A look at Chartist.js with sample code
September 01, 2016
CHARTIST.JS
I recently wrote about chartJS (go check it out !) a pretty cool javascript charting library; I would like to explore a few more charting libraries and I’ve had my eye on chartist.js for a while.
So come along as we learn how to make charts with CHARTIST.JS
Note: I gave myself little challenges you are welcome to try if you want to recreate my own learning curve.
Challenge: Import chartist.js and create a chart, any chart.
See the Pen Chartist.js First Chart by Eugenio - Keno - Leon (@k3no) on CodePen.
Success! I learned that to make a chart in Chartist, a minimal example needs a container and a chart declaration in javascript, the default styles are defined within css ( more on that later ) and it is SVG based ( unlike Chart.js which is Canvas based ).
Aspect Ratios
One thing the documentation makes emphasis on, is the display of chart containers through aspect ratios, check the documentation.
Challenge : Display a chart with different Aspect Ratios
See the Pen Chartist.js Aspect Ratios by Eugenio - Keno - Leon (@k3no) on CodePen.
Rather than do one example, I cooked up an interactive way for you to check out ALL the aspect ratios Chartists supports, using them is just a matter of adding them to your chart container like so:
<div id="chart" class="ct-chart ct-golden-section"></div>
Chart Options
So what kind of options does chartist provide ? le’s find out:
Challenge : Make a line chart with options
See the Pen Chartist.js Options by Eugenio - Keno - Leon (@k3no) on CodePen.
I found out 2 key things about options in chartist:
- You can add them as a variable object to the chart configuration, and…
- The options for the specific charts are found on the documentation, I should caution that they are somehow hidden under the a code button for every chart.
Style Options
And what about style options, chartist seems to isolate and treat the style options within CSS, so let’s explore that:
Challenge : Change the style of a chart with CSS
See the Pen Chartist.js CSS Styles & Series Labels by Eugenio - Keno - Leon (@k3no) on CodePen.
Chartist makes it super easy to style the basics of your chart, things like line color and data-points (you can apply them to the whole chart or individually to a data series), for everything else you are going to write some CSS or hope there is already a plugin that does what you want, in this case, I really wanted labels for both series and specific background colors for the whole chart, you can probably use divs instead of SVG shapes like I did.
More Chart Types
Let’s explore the other chart types that chartist provides before coming back to plugins:
Challenge: create a pie and a donut chart
See the Pen Chartist.js Pie & Donut Charts by Eugenio - Keno - Leon (@k3no) on CodePen.
Using the bits we explored before, it is relatively easy to add pie and donut charts.
Plugins:
As mentioned before, chartist allows for added functionality via plugins, let’s try that.
Challenge: Add at least 2 plugins to a chart
See the Pen Chartist.js Plugins by Eugenio - Keno - Leon (@k3no) on CodePen.
Note: The above chart adds Axis titles and data label plugins
Chartist insist in a strict differentiation of data and style, so a few things like labels and axis titles need to be added with plugins, the upside being that it is super small and efficient,You can add multiple plugins by first linking the scripts after chartist, and then adding them along with their options to your chart declaration.
Things I didn’t cover/further challenges: Animating charts & making your own plugins, integration with web frameworks (like angular & react)
The Takeaway:
I loved working with chartist.js, it is easy and fun to get started and some of its decisions make a lot of sense ( separating style and data) , my biggest takeaway though, is that chartist is both easy and fast at first, but you will have to code both in CSS and JS if you need something else, which depending on your project might be exactly what you need or not at all.
Best,
Keno