CSS ANIMATION
Specifying the style of your chart in CSS is not only cleaner but also enables you to use awesome CSS animations and transitions to be applied to your SVG elements!
Line
Simple Line Chart
An example of a simple line chart with three series.
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 Tooltips
This is just one of many benefits of using inline-SVG and provides you with the freedom you need in order to create exactly the experience you're looking for.
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.
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.
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.
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!
Bar
Bi-Polar Bar Chart
A bi-plar 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.
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.
Add Peak Circles Using The Draw Events
With the help of draw events we are able to add a custom SVG shape to the peak of our bars.
Multi-Line Labels
Chartist will figure out if your browser supports foreignObject and it will use them to create labels that re based on regular HTML text elements. Multi-line and regular CSS styles are just two of many benefits while using foreignObjects!
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.
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!
Pie
Simple Pie Chart
A very simple pie chart with label interpolation to show percentage instead of the actual data series value.
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. Also labelDirection can be used to control the direction in which the labels are expanding.
Gauge Chart
This pie chart uses donut, startAngle and total to draw a gauge chart.