Creating JavaScript Column and Bar Charts on COVID-19 Data
Tags: javascript, webdev, beginners, datascience
Published: 2020-04-07 16:28:10

**Need compelling JS charts for your website or app? Start with the basics! Complete this quick data visualization tutorial and you'll learn how to easily create JavaScript [column](https://www.anychart.com/chartopedia/chart-type/column-chart/) and [bar charts](https://www.anychart.com/chartopedia/chart-type/bar-chart/) that will look great in any HTML5-based project, allowing for easy comparisons.** Chart examples to be built and demonstrated in this tutorial will be visualizing the latest [novel coronavirus cases data from JHU CSSE](https://github.com/CSSEGISandData/COVID-19) as COVID-19 is the most topical issue nowadays. Keep reading and you'll see JS charting is actually very simple. Especially if you have at least a very basic understanding of programming (more than that is awesome but far from necessary). 

## How to Build a Basic JavaScript Column Chart

Generally, it takes four simple steps to make a JS chart of almost any basic type, and a column chart is not an exception:

1.  Create a web page.
2.  Reference necessary files.
3.  Set the data.
4.  Code the chart.

Let's take them now one by one and then proceed to a bit more advanced customization for better illustration.

### 1\. Create a web page

First, create an HTML page where you want to build the chart. Add a block-level HTML element that will be a container for the chart and specify its ID. To make the chart fill the entire page, set the `width` and `height` parameters at 100%. So the entire HTML page can look like this:
```html
    <!DOCTYPE html>
    <html>
      <head>
        <title>JavaScript Chart on COVID-19 Data</title>
      </head>
      <body>
        <div id="container" style="width: 100%; height: 100%;"></div>
      </body>
    </html>
```
### 2\. Reference necessary files

Second, include all necessary scripts to build the chart — in the `<script>` tag inside of the `<head>` section. The chart being built along this tutorial will be powered by the [AnyChart](https://www.anychart.com) JavaScript charting library which is easy to use and flexible and has a detailed [documentation](https://docs.anychart.com) with many samples. So, include its base module from the CDN right there. The chart code itself will go to the `<script>` tag inside of the `<body>` section.
```html
    <!DOCTYPE html>
    <html>
      <head>
        <title>JavaScript Chart on COVID-19 Data</title>
        <script src="https://cdn.anychart.com/releases/8.7.1/js/anychart-base.min.js"></script>
      </head>
      <body>
        <div id="container" style="width: 100%; height: 100%;"></div>
        <script>
          // The chart code will be written here.
        </script>
      </body>
    </html>
```
### 3\. Set the data

Third, you should add the data you want to visualize. Basically, there are [many ways](https://docs.anychart.com/Working_with_Data/Supported_Data_Formats) to load data to charts. This tutorial describes how to create a simple chart so let's arrange simple data. Currently, the novel coronavirus pandemic is the number one topic all over the world. Let's make a JavaScript column chart visualizing the **top 10 countries with the highest number of confirmed COVID-19 cases as of yesterday, April 5, 2020**. Data will be taken from the [data repository](https://github.com/CSSEGISandData/COVID-19) of the Johns Hopkins University Center for Systems Science and Engineering (JHU CSSE) known to contain trustful statistics. According to it, the list of top 10 countries by confirmed COVID-19 cases as of April 5 looks as follows:

> _**Country — Number of cases**_
_United States — 337,072_
_Spain — 131,646_
_Italy — 128,948_
_Germany — 100,123_
_France — 93,773_
_China — 82,602_
_Iran — 58,226_
_United Kingdom — 48,436_
_Turkey — 27,069_
_Switzerland — 21,100_

Let's convert this data into a JavaScript object with a data array and header settings:
```javascript
    var data = {
      header: ["Country", "Number of cases"],
      rows: [
        ["United States", 337072],
        ["Spain", 131646],
        ["Italy", 128948],
        ["Germany", 100123],
        ["France", 93773],
        ["China", 82602],
        ["Iran", 58226],
        ["United Kingdom", 48436],
        ["Turkey", 27069],
        ["Switzerland", 21100]
    ]};
```
### 4\. Code the chart

Finally, now that you've got a page, scripts and data, you are all set for the final step — start coding. Remember to include the chart code inside of the `<script>` tag in the `<body>` section of the HTML page. To begin with, add the `anychart.onDocumentReady()` function so the chart loads when the page is ready:
```html
    <script>
      anychart.onDocumentReady(function() {
        // The main chart code goes here.
      });
    </script>
```
Then, add the data:
```javascript
    anychart.onDocumentReady(function() {

      var data = {
        header: ["Country", "Number of cases"],
        rows: [
          ["United States", 337072],
          ["Spain", 131646],
          ["Italy", 128948],
          ["Germany", 100123],
          ["France", 93773],
          ["China", 82602],
          ["Iran", 58226],
          ["United Kingdom", 48436],
          ["Turkey", 27069],
          ["Switzerland", 21100]
      ]};

    });
```
Next, define the chart type. (You can find the full list of the chart types available in AnyChart out of the box in the list of [Supported Charts](https://docs.anychart.com/Quick_Start/Supported_Charts_Types).) In this chart, the column chart type is to be picked, with the data specified in the `data` variable:
```javascript
    // create the column chart
    var chart = anychart.column();

    // add the data
    chart.data(data);
```
Let's also add a title for the chart to show what it is about at a glance:
```javascript
    chart.title("Top 10 Countries with the Most Cases of COVID-19");
```
The last thing to do is to set the container and command to draw the chart:
```javascript
    // set the container
    chart.container("container");

    // draw the chart
    chart.draw();
```
**Done! Check out the result below:**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lu9vb6h9q254ifgrt3so.png)

For your convenience, this JS/HTML5 column chart is [available on AnyChart Playground](https://playground.anychart.com/XAX1zauA/) where you can see its interactive live version (for example, hover over the columns and tooltips with the exact numbers will show up), play with the code and visualization to continue mastering this technique on your own. Just in case, the full HTML/JS code is also provided below:
```html
    <!DOCTYPE html>
    <html>
      <head>
        <title>JavaScript Chart on COVID-19 Data</title>
        <script src="https://cdn.anychart.com/releases/8.7.1/js/anychart-base.min.js"></script>
      </head>
      <body>
        <div id="container" style="width: 100%; height: 100%;"></div>
        <script>
    anychart.onDocumentReady(function() {

      // create the data
      var data = {
        header: ["Country", "Number of cases"],
        rows: [
          ["United States", 337072],
          ["Spain", 131646],
          ["Italy", 128948],
          ["Germany", 100123],
          ["France", 93773],
          ["China", 82602],
          ["Iran", 58226],
          ["United Kingdom", 48436],
          ["Turkey", 27069],
          ["Switzerland", 21100]
      ]};

      // create the column chart
      var chart = anychart.column();

      // add the data
      chart.data(data);

      // set the chart title
      chart.title("Top 10 Countries with the Most Cases of COVID-19");

      // set the container
      chart.container("container");

      // draw the chart
      chart.draw();

    });
        </script>
      </body>
    </html>
```
Looks pretty simple and neat, doesn't it? Now, let's see how to modify such a JavaScript column chart in case you want it.

## Chart Customization

### Switch the chart type (to horizontal bars)

There are many [chart types](https://www.anychart.com/chartopedia/usage-type/) for data visualization out there, and sometimes you may need to change one you picked first for a better, more insightful view of your data. For example, here's how you can switch the column chart type to the bar chart type — transform (vertical) columns into (horizontal) bars — by simply changing `anychart.column()` to `anychart.bar()`:
```javascript
    var chart = anychart.bar();
```
That's it! Now this JavaScript column chart is a JS bar chart — [check it out on the playground](https://playground.anychart.com/ocNPbTvy/):

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/pgeggrz97oqkix3yfws1.png)

### Set a theme

You can customize the look of your charts in a number of ways. However, to quickly change the appearance, it may be convenient to choose from pre-built [chart design themes](https://docs.anychart.com/Appearance_Settings/Themes). For example, let's pick one called Dark Turquoise. This can be done in two quick steps. First, reference it in the `<script>` tag inside of the `<head>` section:
```html
    <script src="https://cdn.anychart.com/releases/8.7.1/themes/dark_turquoise.min.js"></script>
```
Second, apply it to the chart like this:
```javascript
    anychart.theme(anychart.themes.darkTurquoise);
```
[Here's how it looks now](https://playground.anychart.com/n12VY4jr/):

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2r0jszeqh88wan7xb563.png)

### Enable grid lines

It is not too easy to intuitively recognize the values represented by the bar lines in such a data visualization. So you may want to add grid lines to facilitate the perception. Before actually enabling the grid, let's determine the desired tick intervals — on every 50,000 cases, with minor ticks on every 10,000\. Then, simply add the corresponding grid lines.
```javascript
    // add ticks
    chart.yScale().ticks().interval(50000);
    chart.yScale().minorTicks().interval(10000);
    // add grid lines
    chart.yGrid().enabled(true);
    chart.yMinorGrid().enabled(true);
```
Note that in AnyChart, bar charts are implemented as [vertical](https://docs.anychart.com/Basic_Charts/Vertical/Overview) JavaScript column charts. As a result, the horizontal axis in bar charts is Y, and the vertical axis in bar charts is X. So don't get confused with what you see in the code snippet above — everything is absolutely correct there. Here's the [result of this step](https://playground.anychart.com/0zSQuUJg/):

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bkocowncxld8zpvizb55.png)

### Turn on the animation

Finally, let's turn on the bar chart animation on load as a simple, yet cool visual effect:
```javascript
    chart.animation(true);
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/orzs3af64opd6cj1ofwr.gif)

It's the [final chart for this tutorial](https://playground.anychart.com/YMW1r6LE/) — the result of all the described transformations implemented one by one! You can easily integrate it into your web project. Remove all the comments and you'll see that it is created in **less than 30 lines of pure JavaScript code**. Here's the full code of this final interactive JS bar chart we've come to from the basic JS column chart:
```html
<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Chart on COVID-19 Data</title>
    <script src="https://cdn.anychart.com/releases/8.7.1/js/anychart-base.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.7.1/themes/dark_turquoise.min.js"></script>
  </head>
  <body>
    <div id="container" style="width: 100%; height: 100%;"></div>
    <script>
anychart.onDocumentReady(function() {

  // create the data
  var data = {
    header: ["Country", "Number of cases"],
    rows: [
      ["United States", 337072],
      ["Spain", 131646],
      ["Italy", 128948],
      ["Germany", 100123],
      ["France", 93773],
      ["China", 82602],
      ["Iran", 58226],
      ["United Kingdom", 48436],
      ["Turkey", 27069],
      ["Switzerland", 21100]
  ]};

  // create the chart
  var chart = anychart.bar();

  // set the theme
  anychart.theme(anychart.themes.darkTurquoise);

  // add the data
  chart.data(data);

  // set the chart title
  chart.title("Top 10 Countries with the Most Cases of COVID-19");

  // add tick intervals
  chart.yScale().ticks().interval(50000);
  chart.yScale().minorTicks().interval(10000);
  // add grid lines
  chart.yGrid().enabled(true);
  chart.yMinorGrid().enabled(true);

  // turn on the chart animation
  chart.animation(true);

  // set the container
  chart.container("container");

  // draw the chart
  chart.draw();

});
    </script>
  </body>
</html>
```
## Conclusion

As you see, creating JavaScript column and bar charts is not difficult at all. If you want to know how to make some further modifications to the data visualizations from this tutorial or create other charts, visit the [documentation](https://docs.anychart.com) and get inspired by demos in the [gallery](https://www.anychart.com/products/anychart/gallery/). Feel free to ask questions if any.

* * *

*UPD: Decided to update the cover image with the most actual data chart.*

* * *

**_See also: [Creating a JavaScript Bar Chart](https://www.anychart.com/blog/2017/10/25/javascript-bar-chart-tutorial/)_**_

* * *