Extract from Sitepoint article “Fancy, Responsive Charts with Chart.js” by Monty Shokeen
Data is all around us. While search engines and other applications work most optimally with text based representation of data, people find data represented visually to be easy to comprehend. Earlier this year, SitePoint published Aurelio’s article presenting an introduction to Chart.js. This tutorial will provide a quick recap of that introduction followed by a deeper look into the features of Chart.js.
Getting Started
Chart.js is an HTML5 canvas based responsive, flexible, light-weight charting library. The library supports six different chart types, each of these chart types coming with a load of customization options. If that is not enough, you also have the ability to create your own custom chart types.
All six core chart types in Chart.js are just 11kb minified and gzip’d and the library is modular so you can further reduce the request size for the file by only including the chart type that you actually need. Below is the cdnjs link to include it:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
Available Configuration Options
Chart.js allows you to change almost every aspect of your charts — from tool tips to animation. In this section I will modify a few settings to demonstrate what Chart.js is capable of creating. Here is the HTML we’ll start with:
<canvas id="canvas"></canvas>
For the first demonstration, I will create a line chart. There are some basic options that you need to set for the charts to make sense. The line chart expects an array of labels and datasets. The labels appear on the X axis. I have filled up the line chart with some dummy data. The data is broken up into an array of data sets. Each data set has a color for the fill, the line, and the points.
I have set fillColor to transparent in this case. If you don’t set a value of fillColor it will be set to black or grey instead. Same goes for other values. The colors are defined using RGBA, RGB, hex, or HSL format, similar to CSS.
var lineData = {
labels: ['Data 1', 'Data 2', 'Data 3', 'Data 4',
'Data 5', 'Data 6', 'Data 7'],
datasets: [{
fillColor: 'rgba(0,0,0,0)',
strokeColor: 'rgba(220,180,0,1)',
pointColor: 'rgba(220,180,0,1)',
data: [20, 30, 80, 20, 40, 10, 60]
}, {
fillColor: 'rgba(0,0,0,0)',
strokeColor: 'rgba(151,187,205,1)',
pointColor: 'rgba(151,187,205,1)',
data: [60, 10, 40, 30, 80, 30, 20]
}]
}
Setting Global Options
I have included the code that sets some global values. animationSteps determines animation duration. There are many more options that you can modify according to your needs, such as scaleLineColor and scaleIntegersOnly. I suggest that you go through the Chart.js documentation to see what else this library has to offer.