How to Make a Bar Chart using JavaScript
Tags: javascript, design, charts, graphs
Published: 2019-09-03 20:17:57

---
title: How to Make a Bar Chart using JavaScript
published: true
description: This article will teach you how to create a bar chart using JavaScript.
tags: #Javascript #design #charts #graphs
cover_image: https://thepracticaldev.s3.amazonaws.com/i/zpeqys82zm4srew777f5.jpg
---
Also known as column charts, bar charts come in various shapes and sizes. 
In this post, we will be going over how to create a simple vertical bar chart using the free JavaScript library, [ZingChart](https://www.zingchart.com).

Even with little knowledge of HTML, CSS and JavaScript, you can easily bring your data to life in just a few short steps.

The steps we will cover are as follows:

1. Referencing the ZingChart library
2. Placing your chart on the your HTML page
3. Adding data and rendering your chart
4. Basic customization of your chart

![Bar Chart or Column Chart](https://thepracticaldev.s3.amazonaws.com/i/pdg4eqlpz1hjjfwcdsxj.png)

## 1. Referencing the ZingChart library

If you have little knowledge of HTML layouts, I have provided one below with the ZingChart library referenced already.
```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset=”utf-8">
    <title>ZingChart: My Bar Chart</title>
    <script src=”https://cdn.zingchart.com/zingchart.min.js"></script>
  </head>
  <body>

  </body>
</html>
```
When referencing the ZingChart library, make sure to include the code snippet included in the HTML layout shown above.

You can also [download](https://www.zingchart.com/download) the ZingChart library or use a package manager, like [NPM](https://www.npmjs.com/package/zingchart).

## 2. Placing your chart on your HTML page

Before you begin entering any sort of data, you are going to want to reference your chart within the `<body>` of your code so that the chart can actually render on the page.
```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset=”utf-8">
    <title>ZingChart: My Bar Chart</title>
    <script src=”https://cdn.zingchart.com/zingchart.min.js"></script>
  </head>
  <body>
    <div id=”myChart”></div>
  </body>
</html>
```
To do so, you will want to create an opening and closing `<div>`. Within that `<div>` tag, you will also want to include your chart’s name as an id. As far as HTML goes, you are done! Reference the example above.
## 3. Adding data and rendering your chart
Here is where some knowledge of JavaScript comes into play, however it is still simple to implement.

Your next step will be including `<script>` tags. This is where you are going to place your JavaScript. When adding the `<script>` tag, make sure to include it after the `<div>` to render the chart.
```html
<script>
  var chartData = {
    type: 'bar',
    series: [
      { values: [35, 43, 70, 65] },
      { values: [25, 57, 49, 60] }
    ]
  };
  zingchart.render({
    id: 'myChart',
    data: chartData,
    height: 400,
    width: 600
  });
</script>
```
If you include the code within the `<script>` tag above and run this file in your browser, you will have created a fully functional bar chart!

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/pdg4eqlpz1hjjfwcdsxj.png)

Now let’s break down exactly what’s happening above.

```javascript
var chartData = {    //Sets a variable with all of the chart data
  type: 'bar',       //Tells ZingChart the type of chart
  series: [          //Creates different series of data
    { values: [35, 43, 70, 65] },    //Values for the first bar
    { values: [25, 57, 49, 60] }     //Values for the second bar
  ]
};
```
I have set up a variable or `var` named `chartData`. This is where all of your data, attributes and objects will be referenced (don’t worry, I will go over more attributes later).

After you have created the `chartData` variable, you will want to establish what type of chart you will be working with.

This variable will be created as a JavaScript object and all the attributes and data will be listed as values within the object. For more information on JavaScript objects, check out [this article](https://medium.com/@zingchart/how-to-build-a-bar-chart-using-javascript-38c65a6e5344).

```javascript
var chartData = {
  type: 'bar',       //Tells ZingChart the type of chart
  series: [
    { values: [35, 43, 70, 65] },
    { values: [25, 57, 49, 60] }
  ]
};
```
In this case, you want to create a bar chart. This can be done by including `type: ‘bar’` as an attribute within the object. I will list out ZingChart’s many other options available later in this post.

```javascript
var chartData = {
  type: 'bar',
  series: [          //Creates different series of data
    { values: [35, 43, 70, 65] },    //Values for the first bar
    { values: [25, 57, 49, 60] }     //Values for the second bar
  ]
};
```
Moving forward, you will also want to include data in your object. This can be done using the `series` attribute. You will notice that this attribute is listed as an array with more objects listed within. Feel free to play around with a different number of objects within a series to see how it affects what is rendered on the page.

Lastly, you are going to want to render your chart to the page.
```javascript
zingchart.render({   //Render method used to show chart on page
  id: 'myChart',     //Reference the id used in the <div> tag
  data: chartData,   //Reference the chartData object created above
  height: 400,       //Sets height for chart
  width: 600         //Sets width for chart
});
```
This can be done by calling the `zingchart.render` method shown above. This method takes in certain attributes as arguments for the render function.

The `id: “myChart”` is used to reference your div within the HTML.

The `data: chartData` is used to reference what data you will want to pull when rendering the chart. This value should be set to the object variable created previously.

The `height` and `width` arguments are used to set the size of the chart itself.

Once all this has been filled in, you can run a fully workable chart in the DOM.

## Before I continue..

The easiest way to play around with the different types of charts available is to sign up for ZingChart’s free web-app, the [‘ZingSoft Studio’](https://app.zingsoft.com/signup).

This will give you full access to the ZingChart library in a sandbox-like environment. The Studio allows you to build out fully functioning charts and grids without starting from scratch.

Check out [the Studio](https://app.zingsoft.com/signup) and start charting!

## 4. Basic Customization of Your Chart
Now that I’ve covered the basics, I will look a little deeper into how powerful ZingChart truly is. I will only be able to cover a small portion of the customizations available, but I encourage you to check out the [ZingChart docs](https://www.zingchart.com/docs/chart-types/bar) to answer any questions you may have.

Earlier, I discussed the many different types of bar charts available. To switch the standard bar chart I created earlier into one of these different types, you will want to adjust the `type` attribute. Take a look at a few examples below to see what happens when you set the `type` attribute to a few other bar chart types.

![3D Bar Chart](https://thepracticaldev.s3.amazonaws.com/i/ydp9lj31mcsm0k4fp7zk.png)![Horizontal Bar Chart](https://thepracticaldev.s3.amazonaws.com/i/3yy8tdchmvt2mm02t0a2.png)

There are other things you can do to change the shape of the bars within the chart. You may change the shape of the chart by adding the `aspect` attribute to the `plot` object. Setting the value to `cone`, `histogram`, `cylinder`, or `pyramid` will change the shape of the bar accordingly.

![Pyramid Chart](https://thepracticaldev.s3.amazonaws.com/i/aw1zz1b5g8c9gfc28xf1.png)![Cone Chart](https://thepracticaldev.s3.amazonaws.com/i/vdap041njmiq2x8ot85j.png)

You also have the option to incorporate all kinds of styles into your charts. Changing bar colors is as easy as setting the `background-color` attribute of your dataset to the color of your choosing. You can also set the change the opacity of the bar by using the `alpha` attribute and choosing a level of opacity between 0 and 1.

![Colorful and Opaque Chart](https://thepracticaldev.s3.amazonaws.com/i/kkkb9r8ce5ac3els37j2.png)

Styling the ‘x’ and ‘y’ axes is as easy as adjusting the `scale-x` or `scale-y` object to include the scale you are looking for.

By setting the `min-value` attribute to a number in Unix time and setting the `step` attribute to a value of `day` you can set your chart to follow a time-series.

![Time-Series Chart](https://thepracticaldev.s3.amazonaws.com/i/fboogxk5o5vjkipm4iqn.png)

Note: To adjust the format of each x-axis value, you will need to use the `transform` object and set the `type` to `date` as well as changing the `all` attribute to `%M %d`. This will allow the x-axis to display the months and days of each bar.

There are tons of other features available when making a bar chart and I strongly encourage you to both check out the [docs](https://www.zingchart.com/docs/chart-types/bar) as well as create a chart or two in [the Studio](https://app.zingsoft.com/signup).

---

A pioneer in the world of data visualization, ZingChart is a powerful JavaScript library built with big data in mind. With over 35 chart types and easy integration with your development stack, ZingChart allows you to create interactive and responsive charts with ease.