Simple Line Chart

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

Holes In Data

Chartist-jsChartist does not freak out if you have holes in your data. Instead it will render the lines in segments and handles these holes gracefully. This also allows you to introduce a line at a later point or to terminate the series before others.

Line Scatter Diagram With Responsive Settings

Chartist-jsThis advanced example uses a line chart to draw a scatter diagram. The data object is created with a functional style random mechanism. There is a mobile first responsive configuration using the responsive options to show less labels on small screens.

Line Chart With Area

Chartist-jsThis 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

Chartist-jsYou 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.

Using Events To Replace Graphics

Chartist-jsChartist has fixed graphical representations that are chosen because of their flexibility and to provide a high level of separation of the concerns. However,sometimes you probably would like to use different shapes or even images for your charts. One way to achieve this is by using the draw events and replace or add custom SVG shapes.

Bi-Polar Bar Chart

Chartist-jsA 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.

Overlapping Bars On Mobile

Chartist-jsThis example makes use of label interpolation and the seriesBarDistance property that allows you to make bars overlap over each other. This then can be used to use the available space on mobile better. Resize your browser to see the effect of the responsive configuration.

Simple Pie Chart

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

Animating A Donut With Svg.animate

Chartist-jsAlthough it'd be also possible to achieve this animation with CSS, with some minor suboptimal things, here's an example of how to animate donut charts using Chartist.Svg.animate and SMIL.

add