Chartist
Line Chart
An example of a simple line chart with three series. You can edit this example in realtime.
<!-- page js -->
<script src="assets/vendors/chartist/chartist.min.js"></script>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.
<!-- page js -->
<script src="assets/vendors/chartist/chartist.min.js"></script>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).
<!-- page js -->
<script src="assets/vendors/chartist/chartist.min.js"></script>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.
<!-- page js -->
<script src="assets/vendors/chartist/chartist.min.js"></script>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.
<!-- page js -->
<script src="assets/vendors/chartist/chartist.min.js"></script>Horizontal Bar Chart
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.
<!-- page js -->
<script src="assets/vendors/chartist/chartist.min.js"></script>Gauge chart
This pie chart uses donut, startAngle and total to draw a gauge chart.
<!-- page js -->
<script src="assets/vendors/chartist/chartist.min.js"></script>Donut Chart
This pie chart uses donut and donutSolid to draw a donut chart.
<!-- page js -->
<script src="assets/vendors/chartist/chartist.min.js"></script>
