Simple Line Chart

An example of a simple line chart with three series.

Source Code

var line2 = new Chartist.Line('#chartLine2', {
  labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
  series: [
    [12, 9, 7, 8, 5],
    [2, 1, 5, 7, 3],
    [1, 3, 4, 5, 6]
  ]
},{
  high: 30,
  axisY: {
    onlyInteger: true
  },
  fullWidth: true,
  chartPadding: {
    bottom: 0,
    left: 0
  }
});

Line Area Chart

This chart uses the showArea option to draw line, dots but also an area shape. Use the low option to specify a fixed lower bound that will make the area expand. You can also use the areaBase property to specify a data value that will be used to determine the area shape base position (this is 0 by default).

Source Code

showArea: true

Bar Chart

A bi-polar bar chart with a range limit set with low and high. There is also an interpolation function used to skip every odd grid line / label.

Source Code

new Chartist.Bar('#bar', data, option);

Horizontal Bar Chart

Guess what! Creating horizontal bar charts is as simple as it can get. There's no new chart type you need to learn, just passing an additional option is enough.

Source Code

horizontalBars: true

Stacked Bar Chart

You can also set your bar chart to stack the series bars on top of each other easily by using the stackBars property in your configuration.

Source Code

stackedBars: true

Pie Chart

A very simple pie chart with label interpolation to show percentage instead of the actual data series value.

Source Code

var sum = function(a, b) { return a + b };
var data = {
  series: [5, 3, 4]
};

var pie1 = new Chartist.Pie('#chartPie1', data, {
  labelInterpolationFnc: function(value) {
    return Math.round(value / data.series.reduce(sum) * 100) + '%';
  }
});

Donut Chart

This pie chart uses donut, startAngle and total to draw a gauge chart.

Source Code

new Chartist.Pie('#chartDonut', {
  series: [20, 10, 30]
}, {
  donut: true,
  donutWidth: 60,
  donutSolid: true,
  startAngle: 270,
  showLabel: true
});