Chartist bar chart

A diagram in which the numerical values of variables are represented by the height or length of lines or rectangles of equal width.

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.

Peak Circles Using Draw Events

With the help of draw events we are able to add a custom SVG shape to the peak of our bars.

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.

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.

Multi Column Chart

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!

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.

Theme Customizer


Customize & Preview in Real Time

Menu Color Options

Layout Options

Navigation Color Options
Solid
Gradient

Solid

Gradient

Buy Now