Chartist: Making A Donut Chart & Updating It While Its Hidden

Making Donut Chart with Chartist
Making Donut Chart with Chartist

The application I have been working on has a polling feature, and the answers also needed to be showed in donut chart. Now, usually I would use Chart.js for simple charts like these but I found out that Chart.js is not fully responsive.

While Chart.js is based on canvas, Chartist.js is based on SVG, so it is fully responsive. But Chartist, is still relatively has some drawbacks, but still really great library as it has full responsive support which is more important nowadays considering the fact 60% of your traffic will be from mobile!

Making a Donut Chart in Chartist.js

It is really simple to make a donut chart in Chartist, following JSFiddle will demonstrate that:

Updating the chart when its hidden

Now there is one small problem with Chartist. If the chart’s div is hidden/ or in display:none; state, the chart wont render correctly. As you can see in the next JSFiddle, click “Show Chart”:

To solve this issue Chartist provides a method to update the chart, you can use this when you are changing the visibility of the chart. It will happen without a jitter:

document.querySelector(".chart").__chartist__.update();

Adding your custom colors with JS

Now as Chartist is fully SVG based, you can change color, width, height and every other thing that CSS can do to a HTML element. But sometimes it is not convenient to give colors thru CSS, Chart.js has this support where you can give color hex code and it will be applied to that data representation in the chart.

I have modified Chartist in a way you can give colors thru JS. Check out the JSFiddle:

The JS file is available on my Github and I have also hosted it on my website:

http://ozytive.com/ozycdn/chartist.min.js
http://ozytive.com/ozycdn/chartist.js

Be the first to comment

Leave a Reply

Your email address will not be published.


*