Loading. Please Wait.

You may think that this is just yet an other charting library. But Chartist.js is the product of a community that was disappointed about the abilities provided by other charting libraries. Of course there are hundreds of other great charting libraries but after using them there were always tweaks you would have wished for that were not included.

##### Simple Line Chart

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

Example

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

Example

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

Example

##### 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. Multi-line and regular CSS styles are just two of many benefits while using foreignObjects!

Example

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

Example

##### Simple Pie Chart

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

Example

##### Gauge Chart

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

Example

##### Line scatter diagram with responsive settings

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

Example

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

Example

##### 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. This then can be used to use the available space on mobile better. Resize your browser to see the effect of the responsive configuration.

Example

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

Example

##### 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. In this example you can see T-shirt sales of a store categorized by size.

Example

##### Pie Chart with Custom Labels

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

Example

##### Animating Donut

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.

Example

Navbar Options

Show/Hide Fixed

Header Layout

Show/Hide

Sidebar Options

Show/Hide
Fixed Aside

Content View

Footer Options

Show/Hide Fixed

Main Color

Primary
Info
Success
Warning
Danger

Navbar

Dark
Light
Like Main Color

Sidebar

Dark
Light
Like Main Color