How to create responsive charts with Chartist.js

Aspect ratios and scales

Because of the nature of responsive design, it's important to understand that block content in design, including images, videos and the like needtobe able to scale and adapt to the medium. Inorder for an element to scale, you need to rely oncertain aspect ratios (4:3, 3:2, 16:9 and so on) rather than specifying a fixed width and height.

With Chartist.js you can specify those ratios directly on containers, without the need to calculate any fixed dimensions. In order to create a chart that uses the aspect ratio of a golden section, you can just add the class .ct-golden-section to your container where you initialise your chart.

There are also classes for other common scales that you can use instead. Just check the Chartist.js documentation online (netm.ag/chartistdoc-261) to geta complete list of aspect ratio classes you can use, out of the box.

<div class=”ct-chart ct-golden-section”></div>

You can then just omit the fixed width and height inthe options when initialising your chart.

Chartist.Line(‘.ct-chart', {
  labels: [‘Mon', ‘Tue', ‘Wed', ‘Thu', ‘Fri'],
  series: [[0, 3, 2, 8, 9], [1, 2, 3, 5, 8]]
});

Your chart will now use 100 per cent of the available width and scale with the golden section as fixed aspect ratio.

Responsive sugar topping

Chartist.js provides an easy way to specify configuration that should be used specifically foragiven medium. It makes use of CSS media queries and window.matchMedia to provide a configuration override mechanism that allows youtofully re-configure your charts based on mediaquery rules.

The following example shows a mobile-first configuration style where small screen devices will see a point on the line chart and on larger screens the points will not be drawn.

Chartist.Line(‘.ct-chart', {
  labels: [‘Monday', ‘Tuesday', ‘Wednesday', ‘Thursday', ‘Friday'],
  series: [[12, 9, 7, 8, 5]]
}, {
  showPoint: true
}, [[‘screen and (min-width: 640px)', { showPoint: false }]]);

I hope this has given you a good overview of the philosophy of Chartist.js, and that you're hopefully already thinking about a next project where you could use it.

Words: Gion Kunz

Gion Kunz is a front end developer. Follow him on Twitter at @GionKunz. This article first appear in net magazine issue 261.

Like this? Read this!

• Google releases 1,000th Chrome Experiment
• 14 top online coding courses
• 10 ways the Romans still influence architecture