Chart

Overlapping Bar Chart
Show Code
                    
        <div id="overlapping-bar-chart" class="ct-chart"></div>
                    
                    
        <!-- Script -->
        <script>
          new Chartist.Bar('#overlapping-bar-chart', {
            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            series: [
              [7, 3, 9, 2, 4, 3, 4, 6, 1, 7, 10, 9],
              [3, 1, 4, 7, 5, 2, 4, 7, 3, 5, 7, 6]
            ]
          }, {
            seriesBarDistance: 10
          }, [
            ['screen and (max-width: 767px)', {
              seriesBarDistance: 5,
              axisX: {
                labelInterpolationFnc: function (value) {
                  return value[0];
                }
              }
            }]
          ]);
        </script>
                    
                  
Stacked Bar Chart
Show Code
                    
        <div id="stacked-bar-chart" class="ct-chart"></div>
                    
                    
        <!-- Script -->
        <script>
          new Chartist.Bar('#stacked-bar-chart', {
            labels: ['2019Q3', '2019Q4', '2020Q1', '2020Q2', '2020Q3', '2020Q4'],
            series: [
              [150, 132, 148, 121, 152, 112],
              [31, 33, 42, 32, 41, 44],
              [67, 54, 73, 26, 38, 41]
            ]
          }, {
            stackBars: true,
            axisY: {
              labelInterpolationFnc: function (value) {
                return value;
              }
            },
            plugins: [
              Chartist.plugins.tooltip()
            ]
          }).on('draw', function (data) {
            if (data.type === 'bar') {
              data.element.attr({
                style: 'stroke-width: 30px'
              });
            }
          });
        </script>
                    
                  
Basic Pie Chart
Show Code
                    
        <div id="basic-pie-chart" class="ct-chart basic-pie-chart"></div>
                    
                    
        <!-- Script -->
        <script>
          new Chartist.Pie('#basic-pie-chart', {
            series: [37, 29, 34]
          }, {
            labelInterpolationFnc: function (value) {
              return value + '%';
            }
          });
        </script>
                    
                  
Gauge Chart
Show Code
                    
        <div id="guage-chart" class="ct-chart gauge-chart"></div>
                    
                    
        <!-- Script -->
        <script>
          new Chartist.Pie('#gauge-chart', {
            series: [20, 10, 30, 40]
          }, {
            donut: true,
            donutWidth: 60,
            startAngle: 270,
            total: 200,
            showLabel: true
          });
        </script>
                    
                  
Donut Chart
Show Code
                    
        <div id="donut-chart" class="ct-chart donut-chart"></div>
                    
                    
        <!-- Script -->
        <script>
          new Chartist.Pie('#donut-chart', {
            series: [20, 10, 30, 40]
          }, {
            donut: true,
            donutWidth: 60,
            donutSolid: true,
            startAngle: 270,
            showLabel: true
          });
        </script>
                    
                  
Basic Line Chart
Show Code
                    
        <div id="basic-line-chart" class="ct-chart basic-line-chart"></div>
                    
                    
        <!-- Script -->
        <script>
          new Chartist.Line('#basic-line-chart', {
            labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            series: [
              [6, 3, 5, 8, 12, 11, 9],
              [7, 9, 15, 16, 13, 14, 12],
              [16, 13, 11, 10, 9, 7, 4]
            ]
          }, {
            fullWidth: true,
            chartPadding: {
              right: 40
            },
            plugins: [
              Chartist.plugins.tooltip()
            ]
          });
        </script>
                    
                  
Scatter Diagram
Show Code
                    
        <div id="scatter-diagram" class="ct-chart"></div>
                    
                    
        <!-- Script -->
        <script>
          var times = function (n) {
            return Array.apply(null, new Array(n));
          };

          var data = times(52).map(Math.random).reduce(function (data, rnd, index) {
            data.labels.push(index + 1);
            data.series.forEach(function (series) {
              series.push(Math.random() * 100)
            });

            return data;
          }, {
            labels: [],
            series: times(4).map(function () { return new Array() })
          });

          var options = {
            showLine: false,
            axisX: {
              labelInterpolationFnc: function (value, index) {
                return index % 13 === 0 ? 'W' + value : null;
              }
            }
          };

          var responsiveOptions = [
            ['screen and (min-width: 767px)', {
              axisX: {
                labelInterpolationFnc: function (value, index) {
                  return index % 4 === 0 ? 'W' + value : null;
                }
              }
            }]
          ];

          new Chartist.Line('#scatter-diagram', data, options, responsiveOptions);
        </script>
                    
                  
Bi-polar Line Chart
Show Code
                    
        <div id="bipolar-line-chart" class="ct-chart"></div>
                    
                    
        <!-- Script -->
        <script>
          new Chartist.Line('#bipolar-line-chart', {
            labels: [1, 2, 3, 4, 5, 6, 7, 8],
            series: [
              [1, 2, 3, 1, -2, 0, 1, 0],
              [-2, -1, -2, -1, -2.5, -1, -2, -1],
              [0, 0, 0, 1, 2, 2.5, 2, 1],
              [2.5, 2, 1, 0.5, 1, 0.5, -1, -2.5]
            ]
          }, {
            high: 3,
            low: -3,
            showArea: true,
            showLine: false,
            showPoint: false,
            fullWidth: true,
            axisX: {
              showLabel: false,
              showGrid: false
            }
          });
        </script>