Chart 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 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.
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.
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.
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.
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.
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! check the example code for more details.
Add peak circles using the draw events
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. with the help of draw events we are able to add a custom SVG shape to the peak of our bars.