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 ( 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!

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of seven full-time members of staff: Editor Georgia Coggan, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, Digital Arts and Design Editor Ian Dean, Tech Reviews Editor Erlingur Einarsson and Ecommerce Writer Abi Le Guilcher, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.