Chartist charts

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.

123456789101112051015

Simple line chart

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

MondayTuesdayWednesdayThursdayFriday051015

Line Scatter Diagram

This advanced example uses a line chart to draw a scatter diagram. The data object is created with a functional style random mechanism.

W1W5W9W13W17W21W25W29W33W37W41W45W4904080

Line chart with tooltips

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

123456051015

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.

1234567802468

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.

-3-113

SVG Path animation

Path animation is made easy with the SVG Path API. The API allows you to modify complex SVG paths and transform them for different animation morphing states.

MonTueWedThuFriSat02468

Line Interpolation / Smoothing

By default Chartist uses a cardinal spline algorithm to smooth the lines. However, like all other things in Chartist, this can be customized easily!

12345051015

Different configuration for different series

By naming your series using the series object notation with a name property, you can enable the individual configuration of series specific settings.

12345678-50510

SVG Animations chart

This advanced example uses a line chart to draw a scatter diagram. The data object is created with a functional style random mechanism.

Bi-polar 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.

W1W3W5W7W9-10-50510

Overlapping bars on mobile

This example makes use of label interpolation and the seriesBarDistance property that allows you to make bars overlap over each other.

JanFebMarAprMaiJunJulAugSepOctNovDec02.557.510

Multi-line labels

Chartist will figure out if your browser supports foreignObject and it will use them to create labels that are based on regular HTML text elements.

First quarter of the yearSecond quarter of the yearThird quarter of the yearFourth quarter of the year0 CHF20000 CHF40000 CHF60000 CHF80000 CHF

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.

Q1Q2Q3Q40k1000k2000k3000k

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.

SundaySaturdayFridayThursdayWednesdayTuesdayMonday00.31250.6250.93751.251.56251.8752.18752.52.81253.1253.43753.754.06254.3754.687555.31255.6255.93756.256.56256.8757.18757.57.81258.1258.43758.759.06259.3759.687510

Extreme responsive configuration

As all settings of a chart can be customized with the responsive configuration override mechanism of Chartist, you can create a chart that adopts to every media condition!

Quarter 1Quarter 2Quarter 3Quarter 402468

Distributed series

Sometime it's desired to have bar charts that show one bar per series distributed along the x-axis. If this option is enabled, you need to make sure that you pass a single series array to Chartist that contains the series values.

XSSMLXLXXLXXXL050100150200

Label placement

You can change the position of the labels on line and bar charts easily by using the position option inside of the axis configuration.

MonTueWedThuFriSatSun02.557.510

Animating a Donut with Svg.animate

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

Simple pie chart

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

7%4%5%

Pie chart with custom labels

This pie chart is configured with custom labels specified in the data object. On desktop we use the labelOffset property to offset the labels from the center.

BananasApplesGrapes

Gauge chart

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