# 4elements, web design and consultancy

1. Getting Started With Chart.js: Line and Bar Charts

In the first introductory Chart.js tutorial of the series, you learned how to install and use Chart.js in a project. You also learned about some global configuration options that can be used to change the fonts and tooltips of different charts. In this tutorial, you will learn how to create line and bar charts in Chart.js.

## Creating Line Charts

Line charts are useful when you want to show the changes in value of a given variable with respect to the changes in some other variable. The other variable is usually time. For example, line charts can be used to show the speed of a vehicle during specific time intervals.

Chart.js allows you to create line charts by setting the `type` key to `line`. Here is an example:

We will now be providing the data as well as the configuration options that we need to plot the line chart.

Since we have not provided any color for the line chart, the default color `rgba(0,0,0,0.1)` will be used. We have not made any changes to the tooltip or the legend. You can read more about changing the crate size, the tooltip or the legend in the first part of the series

In this part, we will be focusing on different options specifically available for modifying line charts. All the options and data that we provided above will create the following chart.

The color of the area under the curve is determined by the `backgroundColor` key. All the line charts drawn using this method will be filled with the given color. You can set the value of the `fill` key to `false` if you only want to draw a line and not fill it with any color.

One more thing that you might have noticed is that we are using discrete data points to plot the chart. The library automatically interpolates the values of all other points by using built-in algorithms.

By default, the points are plotted using a custom weighted cubic interpolation. However, you can also set the value of the `cubicInterpolationMode` key to `monotone` to plot points more accurately when the chart you are plotting is defined by the equation `y = f(x)`. The tension of the plotted Bezier curve is determined by the `lineTension` key. You can set its value to zero to draw straight lines. Please note that this key is ignored when the value of `cubicInterpolationMode` has already been specified.

You can also set the value of the border color and its width using the `borderColor` and `borderWidth` keys. If you want to plot the chart using a dashed line instead of a solid line, you can use the `borderDash` key. It accepts an array as its value whose elements determine the length and spacing of the dashes respectively.

The appearance of the plotted points can be controlled using the `pointBorderColor``pointBackgroundColor``pointBorderWidth``pointRadius`, and `pointHoverRadius` properties. There is also a `pointHitRadius` key, which determines the distance at which the plotted points will start interacting with the mouse.

The above `speedData` object plots the same data points as the previous chart but with custom values set for all of the properties.

You can also plot multiple lines on a single chart and provide different options to draw each of them like this:

## Creating Bar Charts

Bar charts are useful when you want to compare a single metric for different entities—for example, the number of cars sold by different companies or the number of people in certain age groups in a town. You can create bar charts in Chart.js by setting the `type` key to `bar`. By default, this will create charts with vertical bars. If you want to create charts with horizontal bars, you will have to set the `type` to `horizontalBar`

Let's create a bar chart which plots the density of all the planets in our solar system. The density data has been taken from the Planetary Fact Sheet provided by NASA.

The parameters provided above will create the following chart:

Just like the line chart, the bars are filled with a light gray color this time as well. You can change the color of the bars using the `backgroundColor` key. Similarly, the color and width of the borders of different bars can be specified using the `borderColor` and `borderWidth` keys.

If you want the library to skip drawing the border for a particular edge, you can specify that edge as a value of the `borderSkipped` key. You can set its value to `top`, `left`, `bottom`, or `right`.  You can also change the border and background color of different bars when they are hovered using the `hoverBorderColor` and `hoverBackgroundColor` key.

The bars in the bar chart above were sized automatically. However, you can control the width of individual bars using the `barThickness` and `barPercentage` properties. The `barThickness` key is used to set the thickness of bars in pixels, and `barPercentage` is used to set the thickness as a percentage of the available category width.

You can also show or hide a particular axis using its `display` key. Setting the value of `display` to `false` will hide that particular axis. You can read more about all these options on the documentation page.

Let's make the density chart more interesting by overriding the default values for bar charts using the following code.

The `densityData` object is used to set the border and background color of the bars. There are two things worth noticing in the above code. First, the values of the `barPercentage` and `borderSkipped` properties have been set inside the `chartOptions` object instead of the `dataDensity` object.

Second, the chart `type` has been set to `horizontalBar` this time. This also means that you will have to change the value of `barThickness` and `barPercentage` for the y-axis instead of the x-axis for them to have any effect on the bars.

The parameters provided above will create the following bar chart.

You can also plot multiple datasets on the same chart by assigning an id of the corresponding axis to a particular dataset. The `xAxisID` key is used to assign the id of any x-axis to your dataset. Similarly, the `yAxisID` key is used to assign the id of any y-axis to your dataset. Both the axes also have an `id` key that you can use to assign unique ids to them.

If the last paragraph was a bit confusing, the following example will help clear things up.

Here, we have created two y-axes with unique ids, and they have been assigned to individual datasets using the `yAxisID` key. The `barPercentage` and `categoryPercentage` keys have been used here to group the bars for individual planets together. Setting `categoryPercentage` to a lower value increases the space between the bars of different planets. Similarly, setting `barPercentage` to a higher value reduces the space between bars of the same planet.

## Final Thoughts

In this tutorial, we have covered all the aspects of line charts and bar charts in Chart.js. You should now be able to create basic charts, modify their appearance, and plot multiple datasets on the same chart without any issues. In the next part of the series, you will learn about the radar and polar area charts in Chart.js.

I hope you liked this tutorial. If you have any questions, please let me know in the comments.