I recently got a request for developing a chart based front end, it got me excited about chart libraries and other chart based projects, so I’d like to explore chart.js a popular open source charting library, come along as we learn how to make some charts !
Note: I’ll be using codepen (free and awesome) and gave myself little challenges you are welcome to try if you want to recreate my own learning curve.
My/Your challenge: Import Chart.js,add and configure a simple chart that is not one of their examples.
It took a bit of hammering out, so if you didn’t succeed at first don’t fret, this is what I learned:
Chart.js is canvas based (as opposed to SVG). So your HTML is minimal, just a canvas tag.
Relies heavily on nested Arrays & Objects to configure ( see the Js file for a subdivison of global option, chart options and data ), and a good knowledge of the documentation to look at all the features and options.
Use a container or css grid ( I am using Bootstrap) to simplify displaying the chart.
Alright, I have a basic understanding of Chart.js, lets try some of the different types of charts and see what we can learn:
My/Your challenge: Make a bar chart with chart.js
Still experimenting with the best way to declare the chart and adding options, I think it reads a little better if you divide global options, dataset and chart options rather than have them all in the chart declaration, but a bar chart was made , on to a pie chart.
My/Your challenge: Make a pie chart with chart.js
Success! another chart full of insight, for this one I only changed some minor options (Removed the background, rotated the chart & added some borders) , the trick is going over the documentation for the specific chart; in this case the Pie & Doughnut and finding the feature you want to add,remove or modify.
Ok, Let’s revisit the line chart and try multiple data series and more options.
My/Your challenge: Make a line chart with multple data series, go crazy with the options
My/Your challenge: Interact with a chart and change it’s configuration or dataset
Chart.js can be modified to your hearts content by rebuilding the chart and redrawing the canvas, a common method if you’ve ever worked with the canvas in html5, as mentioned above, this is just an introduction, but check the advanced usage in the docs.
I’ll end up this short introduction to chart.js by saying that working with the library was mostly a joy and I hope these few pens help you get started.