1. SmartAdmin
  2. Statistics
  3. Chartist.js

Chartist.js ADDON Simple responsive charts

About

Chartist's goal is to provide a simple, lightweight and unintrusive library to responsively craft charts on your website. Chartist leverages the power of browsers today and say good bye to the idea of solving all problems ourselves.

Chartist works with inline-SVG and therefore leverages the power of the DOM to provide parts of its functionality. This also means that Chartist does not provide it's own event handling, labels, behaviors or anything else that can just be done with plain HTML, JavaScript and CSS. The single and only responsibility of Chartist is to help you drawing "Simple responsive Charts" using inline-SVG in the DOM, CSS to style and JavaScript to provide an API for configuring your charts.

Find tutorials, guidelines and more on their official documentation

Area Chart

Example of line area chart with a color filler

Line Scattered

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.

Using Events

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

Bipolar Line Chart

You can also only draw the area shapes of the line chart. Area shapes will always be constructed around their areaBase which also allows you to draw nice bi-polar areas.

Advanced SMIL Animation

Chartist provides simple API to animate the Chart elements using SMIL. You can do most animation with CSS but in some cases you'd like to animate SVG properties that are not available in CSS

Horizontal Bar

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

Peak Circles

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

Pie Chart

Basic pie chart with label interpolation to show percentage instead of the actual data value

Overlap Bar (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.

Extream Responsive

Customized responsive configuration, you can create a chart that adopts to every media condition!

Gauge Chart

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

Line Interpolation

By default Chartist uses a cardinal spline algorithm to smooth the lines

Muti 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!

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 overriden per series! And guess what? You can even override those series settings in the responsive configuration!

Stacked Bar

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.

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.

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.

Bar Chart

A simple barchart with default configuration

Pie Chart (labels)

This pie chart is configured with custom labels specified in the data object

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.

Donut Fill

This pie chart uses donut and donutSolid to draw a donut chart

Gauge Fill

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