How to create responsive charts with Chartist.js

Discover how to use Chartist.js to create great-looking, responsive charts in your next data visualisation project.

As a responsive web developer I'm constantly seekingways to bring standard technologies under one hood, while also trying to keep up with the W3C One Web promise.

Making the same information, design and interactions available on every medium – despite each coming with their ownparticular restrictions –mayseem impossible at first. It'sone of the most challenging parts of a developer's job, but I still think that this is a promise we can and should fulfil.

The problem with not displaying some content oncertain media, or dismissing some interactions, is not really that it breaks a W3C contract, but that it messes with our users' expectations. That's where we pay the fine.

There's nothing more annoying than discovering your favourite button on a website does not exist when you're sitting in the bus and feel like pressing it! In my experience this can even cause a user to simply choose not to view a website on agiven media completely.

I think these principles should be applied to any content on the web, and this includes data visualisation. Faced with a project for a client who wanted me to implement a performance dashboard that should be accessible on a mobile and tablet, butalso displayed nicely on a big widescreen television, Ifelt lost with the options available.

There were already tons of good charting libraries out there, but none of them actually solved the issue of generating simple and nice looking charts that also behaved responsively.

After spending hours trying to tweak existing libraries to make them behave how I wanted them to, I simply decided to create my own. This marked the birth of Chartist.js.

Getting up and running

The easiest way to started with Chartist.js is by using Bower package manager (bower.io). You can then install the latest version of Chartist.js by typing the following command in your shell:

bower install chartist --save

You will now have Chartist.js installed locally, and awaiting your further instruction. All you need to do is add the resources into your HTML and you're ready to draw some nice responsive charts.

<link rel=”stylesheet” href=”bower_components/chartist/libdist/chartist.min.css”>
<script src=”bower_components/chartist/libdist/chartist.min.js”></script>

Chartist.js comes without any dependencies and has a compressed size of less than 10KB. The core purpose of Chartist.js is to solve one and only one problem, which is to enable developers to draw simple, responsive charts. It does that using the power of web standards, like inline SVG in the DOM, and CSS for its appearance. With this clear separation of concerns, and leveraging standard technologies, Chartist.js is able to provide you with all you need and nothing more.

Chartist.js tackles only one problem: to enable devs to draw simple, responsive charts

The biggest issue I'm currently noticing with a lot of libraries is that they are trying to solve too many problems, and forgetting about the fact that they are libraries and not applications. I'm sure you've run into situations where a library customises everything but the one thing you'd really like to customise. By building upon web standards, you can easily extend the functionality of Chartist.js and scale linearly.

Hacking your first chart

Now as you've included Chartist.js into your project, you can go ahead and create your first chart. The library comes with some default styles that can easily be overridden or customised with the Sass (SCSS) version.

If you'd like to go with the default styles, you can simply use the pre-built CSS class .ct-chart to create achart container in your HTML.

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

That's already it for the HTML part. Of course it's up to you if you'd like to use a


,or any other element you think matches the context better.

{ labels: [‘Mon', ‘Tue', ‘Wed', ‘Thu', ‘Fri'],
series: [[0, 3, 2, 8, 9], [1, 2, 3, 5, 8]]
}, {
width: ‘300px', height: ‘200px' });

Congratulations, you've just created your first chart using Chartist.js! Wasn't that a piece of cake? But wait … isn't that supposed to be a responsive charting library? Of course I wouldn't recommend that you use fixed dimensions for your chart, based on pixels, right?

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

Source: http://www.creativebloq.com/web-design/how-create-responsive-charts-chartistjs-31514583

No time to get the job done?
We have plenty.