JSFiddle - React, Tailwind, and code Playground

by Yosef Waysman

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
<script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
<div class="ct-chart" id="chart1"></div>
<div class="ct-chart" id="chart2"></div>
<div class="ct-chart" id="chart3"></div>

JavaScript

var barChartOptions = {
    reverseData: true,
    horizontalBars: true,
}

new Chartist.Bar('#chart1', {
    labels: [1, 2, 3, 4],
    series: [[100, 120, 180, 200]]
});
  
new Chartist.Bar('#chart2', {
    labels: [1, 2, 3, 4],
    series: [[120, 90, 150, 100]]
});

new Chartist.Bar('#chart3', {
    labels: [1, 2, 3, 4],
    series: [[180, 190, 90, 110]]
});