Chartist.js - Simple responsive charts

Download Demo

Chartist.js is a simple responsive charting library built with SVG. There are hundreds of nice charting libraries already out there, but they are either:

• not responsive


• use the wrong technologies for illustration (canvas)


• are not flexible enough while keeping the configuration simple


• are not friendly to your own code


• are not friendly to designers


• have unnecessary dependencies to monolithic libraries


• more annoying things

What is it made for?

Chartist’s goal is to provide a simple, lightweight and non-intrusive library to responsive craft charts on your website. It’s important to understand that one of the main intentions of Chartist.js is to rely on standards rather than providing a own solution to the problem which is is already solved by the standard. We need to leverage the power of the browsers today and say good bye to the idea of solving all problems ourselves.

Chartist works with inline-SVG and therefore leverages the power of the DOM to provide parts of its functionality. This also means that Chartist is not providing it’s own event handling, labels, behaviors and anything else that can just be done with plain HTML, JavaScript and CSS. The single and only responsibility of Chartist is to help you drawing “Simple responsive Charts” using inline-SVG in the DOM, CSS to style and JavaScript to provide an API for configuring your charts.

 

1. INCLUDE CSS AND JS FILES

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

2. HTML

<div class="ct-chart ct-perfect-fourth"></div>

3. JAVASCRIPT

var data = 
 // A labels array that can contain any sort of values
 labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
 // Our series array that contains series objects or in this case series data arrays
 series: [
 [5, 2, 4, 2, 0]
 ]
;

// In the global name space Chartist we call the Line function to initialize a line chart
// As a first parameter we pass in a selector where we would like to get our chart created
// Second parameter is the actual data object
Chartist.Line('.ct-chart', data);

4. OPTIONS

var options = 
 // Don't draw the line chart points
 showPoint: false,
 // Disable line smoothing
 lineSmooth: false,
 // X-Axis specific configuration
 axisX: 
 // We can disable the grid for this axis
 showGrid: false,
 // and also don't show the label
 showLabel: false
 ,
 // Y-Axis specific configuration
 axisY: 
 // Lets offset the chart a bit from the labels
 offset: 40,
 // The label interpolation function enables you to modify the values
 // used for the labels on each axis. Here we are converting the
 // values into million pound.
 labelInterpolationFnc: function(value) 
 return '£' + value + 'm';
 
 
;

// All you need to do is pass your configuration as third parameter to the chart function
Chartist.Line('.ct-chart', data, options);

5. RESPONSIVE SETTING OVERRIDES

Configuring different chart behavior for various media is made simple with an override mechanism. The priority of the override mechanism is based on order of specification of the matching media queries.

The following example uses different label interpolations (to save some space) on small media as well as different spacing between the bars of the bar chart series. Resize your browser window to see the effect.

var data = 
 labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
 series: [
 [5, 4, 3, 7, 5, 10, 3, 4, 8, 10, 6, 8],
 [3, 2, 9, 5, 4, 6, 4, 6, 7, 8, 7, 4]
 ]
;

var options = 
 seriesBarDistance: 15
;

// You can define a responsive settings array that consists of settings arrays containing a media query as first element followed by a regular Chartist.js settings object. We recommend that you store your media queries somewhere centrally and use them wherever required.
var responsiveOptions = [
 // The first responsive setting is for medium / large media only
 ['screen and (min-width: 641px) and (max-width: 1024px)', 
 seriesBarDistance: 10,
 axisX: 
 labelInterpolationFnc: function (value) 
 return value;
 
 
 ],
 // These settings will only be applied to small media
 ['screen and (max-width: 640px)', 
 seriesBarDistance: 5,
 axisX: 
 labelInterpolationFnc: function (value) 
 return value[0];
 
 
 ]
];

// In addition to the regular options we pass in our responsive options array as 4th parameter
Chartist.Bar('.ct-chart', data, options, responsiveOptions);

Chartist.js - Simple responsive charts