How to create responsive charts with Chartist.js

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 <div>,or any other element you think matches the context better.

Chartist.Line(‘.ct-chart', {
  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?

Next page: more on how to create responsive charts with Chartist.js