Chartist line chart

Simple Line Chart

An example of a simple line chart with three series.

Holes In Data

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

Only Whole Numbers

You're dealing with series that contain only whole numbers? It looks weird that Chartist is creating a scale that contains fractions even if your data does not? No problem! Tell the Chartist guy to only use integers and he'll do the math!

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. There is a mobile first responsive configuration using the responsive options to show less labels on small screens.

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.

Series Overrides

By naming your series using the series object notation with a name property, you can enable the individual configuration of series specific settings. showLine, showPoint, showArea and even the smoothing function can be overridden per series! And guess what? You can even override those series settings in the responsive configuration! Check the example code for more details.

Theme Customizer


Customize & Preview in Real Time

Menu Color Options

Layout Options

Navigation Color Options
Solid
Gradient

Solid

Gradient

Buy Now