JSFiddle - React, Tailwind, and code Playground

by andyjh07

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.7.2/chartist.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.7.2/chartist.min.js"></script>
<div class="ct-chart ct-perfect-fourth"></div>

CSS

.ct-chart .ct-series.ct-series-a .ct-area { fill: orange; }
.ct-chart .ct-series.ct-series-a .ct-line { stroke: orange; stroke-width: 3px; }
.ct-chart .ct-series.ct-series-a .ct-circle{fill:orange;stroke-width:5;stroke:#203135;}

.ct-chart .ct-series.ct-series-b .ct-area { fill: #f05b4f; }
.ct-chart .ct-series.ct-series-b .ct-line { stroke: #f05b4f; stroke-width: 3px; }
.ct-chart .ct-series.ct-series-b .ct-circle{fill:#f05b4f;stroke-width:5;stroke:#203135;}

body { background: #203135; }

JavaScript

var chart = new Chartist.Line('.ct-chart', {
  labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
  series: [
    [5, 9, 7, 8, 5, 3, 5, 4, 9, 23],
    [10, 14, 12, 13, 10, 8, 10, 9, 14, 28],
  ]
}, {
  low: 0,
  showArea: true,
      fullWidth: true,
  lineSmooth: Chartist.Interpolation.simple({
    divisor: 2
  }),
});
      


chart.on('draw', function(data) {
  if(data.type === 'point') {
    var circle = new Chartist.Svg('circle', {
      cx: [data.x], cy:[data.y], r:[7],
    }, 'ct-circle');
    data.element.replace(circle);
  }
});

chart.on('draw', function(data) {
  if(data.type === 'line' || data.type === 'area') {
    data.element.animate({
      d: {
        begin: 2000 * data.index,
        dur: 2000,
        from: data.path.clone().scale(1, 0).translate(0, data.chartRect.height()).stringify(),
        to: data.path.clone().stringify(),
        easing: Chartist.Svg.Easing.easeOutQuint
      }
    });
  }
});