JavaScript JQuery

Simple Responsive Charts with Chartist.JS

Chartist.js is a simple responsive charting library built with SVG. There are other charting libraries available, 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

Chartist’s goal is to provide a simple, lightweight and unintrusive library to responsively craft charts on your website.

Checkout this great 5 minute overview of Chartist.

Let’s get started



The easiest way to get started with Chartist.js is by using bower:

The quickest way to get things up and running is by using the Chartist.js CSS files.

Creating our first chart

Add the following HTML to where we want the chart to be created:

Now lets initialize the chart:

If you’d like to see more advanced examples you should check out the advanced section or the examples page.

Leave a Reply