Visualize Data Beautifully With the Chart.js Library-ThemesReviewCentral

Creating charts that look presentable can be a bit of a pain. Most often, web designers or developers use graphics to display data using Photoshop or Illustrator, which may take a lot time to be done.

The Chart.js library is one of the great online JavaScript libraries which builds data using HTML5 canvas element to draw graphs and charts, complete with documentation.

To see Chart.js in action, we’re going to build the following charts using web programming languages as our labels with their fictional data:

Resource you need to complete this tutorial:

First, we need to copy the chart.min.js out of the unzipped folder to our js folder or your preferred directory.

Visualize Data Beautifully With the Chart.js Library-ThemesReviewCentral

The next thing we need to do is to create a new HTML file and put on the following codes. This will include the HTML5 doctype and then the CSS file directory followed by our Chart.js library file directory.

To draw a line chart, we need to create an HTML5 canvas element first on our body section of our HTML file.

Next, we need to create a script that will initialize the chart class (in this example, I used myLineChart) and then retrieve the 2D context of the canvas where we want to draw the chart. Copy the code before the closing body tag.

Note: You can also add some styles you want on the each chart, such as the text color and font size using the Chart options.

In the example above, I used scaleFontSize and scaleFontColor to change the font size and the text color of the data. You can check the Chart.js documentation to see more available chart options for each chart.

For our data structure, we will initialize an object (for this example I used LineChart) that contains all labels for our line chart. The data for the line charts will be broken up into an array of data sets. You should define the values of each datasets such as the fill color, stroke color, point color, point stroke color and the data itself.

You will get a similar result like the image below:

Visualize Data Beautifully With the Chart.js Library-ThemesReviewCentral

To draw a bar chart, we need to create an HTML5 canvas element first on our body section of our HTML file.

Next, we will create a script that will represent the bar chart class (in this example, I used myBarChart) and then retrieve the 2D context of the canvas. Copy the code before the closing body tag.

The bar chart has almost the same data structure to the line chart. Let’s use an object (for this example, I used BarChart) to hold on the labels and values for bar chart. As you can see, we are showing the same data as the previous line chart example.

You will get a similar result like the image below:

Visualize Data Beautifully With the Chart.js Library-ThemesReviewCentral

Next, let’s draw a Radar chart. So, first put on the HTML5 canvas element code on our HTML file.

Then, we will create a script that will initialize the radar chart class (in this example, I used myRadarChart) and then retrieve the 2D context of the canvas. Put the code below before the closing body tag.

For the radar chart, we need to show a label to each point of the chart. This will include an array of strings and then display it around the chart. To do this, let’s again instantiate an object (for this example I used RadarChart) as a container of the labels and values of our radar chart.

You will get a similar result like the image below:

Visualize Data Beautifully With the Chart.js Library-ThemesReviewCentral

To draw a Polar Area chart, we need an HTML5 canvas element code on our HTML file.

Next, let’s create a script for our object (in this example, I used myPolarAreaChart) and then retrieve the 2D context of the canvas. You can copy the code below before the closing body tag.

Polar area charts are almost the same as the pie charts; however, each segment has the same angle and the radius differs depending on the value.

Let’s create the data structure of Polar area chart by instantiating first the object (for this example, I used PolarChart) to hold the labels and values. The value attribute should be a number, while the color attribute should be a string.

You will get a similar result like the image below:

Visualize Data Beautifully With the Chart.js Library-ThemesReviewCentral

Next, let’s draw a pie chart. First, we need the HTML5 canvas element.

Then, let’s create our object (in this example, I used myPieChart) and then retrieve the 2D context of the canvas. Copy the code below before the closing body tag.

For a pie chart, we need to pass in an array of objects with a value (which is a number) and a color property. So let’s do that. Copy the code below.

You will get a similar result like the image below:

Visualize Data Beautifully With the Chart.js Library-ThemesReviewCentral

Lastly, we will draw a doughnut chart. We need to create an HTML5 canvas element first on our body section of our HTML file.

Next, we need to get the context of the canvas and to instantiate the chart.

Finally, let’s create the data. For the doughnut chart, just like the pie chart, we need to pass in an array of objects with a value and a color property.

You will get a similar result like the image below:

Visualize Data Beautifully With the Chart.js Library-ThemesReviewCentral

Chart.js is a great JavaScript library to create charts in a way where you can be creative. This tutorial has taken you through the steps on how to use this cool library. However, there are some drawbacks in using Chart.js, like, it doesn’t have tooltips and no interactivity on it.

That’s being said this JavaScript library has a long way to go and eventually be improve by different developers.

Play around it and let me know if you have some demo where you came up with a cool nice design using the Chart Options.

NO COMMENTS