Chartist - Simple Responsive Charts.

SIMPLE LINE CHART

An example of a simple line chart with three series. You can edit this example in realtime.

LINE CHART WITH AREA

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).

BI-POLAR LINE CHART WITH AREA ONLY

You can also only draw the area shapes of the line chart. Area shapes will always be constructed around their areaBase (that can be configured in the options) which also allows you to draw nice bi-polar areas.

ADVANCED SMIL ANIMATIONS

Chartist provides a simple API to animate the elements on the Chart using SMIL. Usually you can achieve most animation with CSS3 animations but in some cases you'd like to animate SVG properties that are not available in CSS.

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.

MULTI-LINE LABELS

Chartist will figure out if your browser supports foreignObject and it will use them to create labels that re based on regular HTML text elements. Multi-line and regular CSS styles are just two of many benefits while using foreignObjects!

SIMPLE PIE CHART

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

GAUGE CHART

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