Chartist - Simple responsive charts

You may think that this is just yet an other charting library. But Chartist.js is the product of a community that was disappointed about the abilities provided by other charting libraries. Of course there are hundreds of other great charting libraries but after using them there were always tweaks you would have wished for that were not included.

Highly customizable responsive charts

Facts about Chartist

The following facts should give you an overview why to choose Chartists as your front-end chart generator:

  • Simple handling while using convention over configuration
  • Great flexibility while using clear separation of concerns (Style with CSS & control with JS)
  • Usage of SVG (Yes! SVG is the future of illustration in web!)
  • Fully responsive and DPI independent
  • Responsive configuration with media queries
  • Fully built and customizable with Sass

Browser compatibility

IE9IE10IE11Firefox 31Chrome 35Safari 7Safari 8Andorid 4.3Andorid 4.4iOS Safari 6iOS Safari 7
Overall Browser SupportSupportedSupportedSupportedSupportedSupportedSupportedSupportedSupportedSupportedSupportedSupported
Multi-line Labels (foreignObject)Not supportedNot supportedNot supportedSupportedSupportedNot supportedSupportedNot supportedSupportedNot supportedSupported
Advanced CSS AnimationsNot supportedNot supportedNot supportedSupportedSupportedNot supportedSupportedNot supportedSupportedSupportedSupported
SVG Animations with SMILNot supportedNot supportedNot supportedSupportedSupportedSupportedSupportedSupportedSupportedSupportedSupported
Reponsive Options OverrideSupported with polyfillSupportedSupportedSupportedSupportedSupportedSupportedSupportedSupportedSupportedSupported

Projects / Wrapper libraries

These projects and wrapper libraries are known to me right now that either use Chartist.js or wrap them into a library for usage in a framework. If you know other projects that use Chartist.js please let us know or make a pull request for this file.

Chart CSS animation example

Cross-browser support
Note that CSS3 animations on SVG CSS attributes are not supported on all browsers and the appearance may vary.

Crazy Animations with SMIL!

Responsive charts configuration

/* Add a basic data series with six labels and values */
var data = {
  labels: ['1', '2', '3', '4', '5', '6'],
  series: [
    {
      data: [1, 2, 3, 5, 8, 13]
    }
  ]
};

/* Set some base options (settings will override the default settings in Chartist.js *see default settings*). We are adding a basic label interpolation function for the xAxis labels. */
var options = {
  axisX: {
    labelInterpolationFnc: function(value) {
      return 'Calendar Week ' + value;
    }
  }
};

/* Now we can specify multiple responsive settings that will override the base settings based on order and if the media queries match. In this example we are changing the visibility of dots and lines as well as use different label interpolations for space reasons. */
var responsiveOptions = [
  ['screen and (min-width: 641px) and (max-width: 1024px)', {
    showPoint: false,
    axisX: {
      labelInterpolationFnc: function(value) {
        return 'Week ' + value;
      }
    }
  }],
  ['screen and (max-width: 640px)', {
    showLine: false,
    axisX: {
      labelInterpolationFnc: function(value) {
        return 'W' + value;
      }
    }
  }]
];

/* Initialize the chart with the above settings */
new Chartist.Line('#my-chart', data, options, responsiveOptions);

Configuration overrides based on media queries

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.

Cross-browser support
For IE9 you need to use a matchMedia polyfill. You should take a look at Paul Irish's matchMedia polyfill.