JSFiddle - React, Tailwind, and code Playground

by Gonzalo

HTML

<script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
<di class="ct-chart"></di>

CSS

g.ct-series.ct-series-a line.ct-bar {
            stroke: rgb(112,173,71) !important;
            stroke-width: 20px !important;
        }
         g.ct-series.ct-series-b line.ct-bar {
            stroke: rgb(208,206,206) !important;
            stroke-width: 20px !important;
        }

JavaScript

var data = {
  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
  series: [
    [5, 4, 3, 7, 5, 10, 3, 4, 8, 10, 6, 8],
    [3, 2, 9, 5, 4, 6, 4, 6, 7, 8, 7, 4]
  ]
};

var options = {
		height: '500px',
    width: '800px',
  	seriesBarDistance: 22,
   	fullWidth: true,
    axisY: {
        type: Chartist.FixedScaleAxis,
        ticks: [0, 2, 4, 6],
        low: 0,
        onlyInteger: true,
    }
};

var responsiveOptions = [
  ['screen and (max-width: 640px)', {
    seriesBarDistance: 5,
    axisX: {
      labelInterpolationFnc: function (value) {
        return value[0];
      }
    }
  }]
];

new Chartist.Bar('.ct-chart', data, options, responsiveOptions);