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.
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
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>
So what kind of options does chartist provide ? le’s find out:
Challenge : Make a line chart with options
I found out 2 key things about options in chartist:
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
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.
Let’s explore the other chart types that chartist provides before coming back to plugins:
Challenge: create a pie and a donut chart
Using the bits we explored before, it is relatively easy to add pie and donut charts.
As mentioned before, chartist allows for added functionality via plugins, let’s try that.
Challenge: Add at least 2 plugins to a chart
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)
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.