JSFiddle - React, Tailwind, and code Playground

by HemalathaThanigaivel

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.9.7/chartist.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.9.7/chartist.min.css">
<div class="ct-chart ct-square" id="barChart" style="width: 100%; height: 400px;"></div>

CSS

.ct-chart .ct-series.ct-series-a .ct-bar{
  stroke : #1c90f3
}
.ct-chart .ct-series.ct-series-b .ct-bar{
  stroke : #f05b4f
}
.ct-chart .ct-series.ct-series-c .ct-bar{
  stroke : #f4c63d
}
.ct-chart .ct-series.ct-series-d .ct-bar{
  stroke : #249d7f
}
.ct-chart .ct-label.ct-vertical{
  color : #000;
}
.ct-chart .ct-label.ct-horizontal{
  color : #000;
}
.ct-chart .ct-grid {
  stroke-dasharray: none;
  stroke : #000
}
.ct-series .ct-bar {
  /* cursor:pointer; */
 }
 .ct-label.ct-label.ct-horizontal {
  /* position: fixed; */
  justify-content: flex-end;
  text-align: right;
  transform-origin: 100% 0;
  transform: translate(-100%) rotate(-45deg);
}

#barChart svg {
  overflow: visible;
}

JavaScript

var flag = 0;
var chart = new Chartist.Bar('.ct-chart', {
  labels: ['Q1', 'Q2', 'Q3', 'Q4', 'Q5', 'Q6', 'Q7', 'Q8',
  'Q9', 'Q10', 'Q11', 'Q12', 'Q13', 'Q14', 'Q15', 'Q16',
  'Q17', 'Q18', 'Q19', 'Q20', 'Q21', 'Q22', 'Q23', 'Q24',
  'Q25', 'Q26', 'Q27', 'Q28', 'Q29', 'Q30', 'Q31', 'Q32',
  'Q33', 'Q34', 'Q35', 'Q36', 'Q37', 'Q38', 'Q39', 'Q40',
  'Q41', 'Q42', 'Q43', 'Q44', 'Q45', 'Q46', 'Q47', 'Q48'],
  series: [
   {meta :'Q1' , data : [800000, 1200000, 1400000, 1300000, 500000, 200000, 275000,800000, 1200000, 1400000, 1300000, 500000, 200000, 275000,800000, 1200000, 1400000, 1300000, 500000, 200000, 275000,800000, 1200000, 1400000, 1300000, 500000, 200000, 275000,800000, 1200000, 1400000, 1300000, 500000, 200000, 275000,800000, 1200000, 1400000, 1300000, 500000, 200000, 275000,800000, 1200000, 1400000, 1300000, 500000, 200000]},
   
   {meta :'Q2' , data : [200000, 400000, 500000, 300000, 200000, 400000, 500000, 300000, 200000, 400000, 500000, 300000, 123000,456900,200000, 400000, 500000, 300000, 200000, 400000, 500000, 300000, 200000, 400000, 500000, 300000, 123000,456900,800000, 1200000, 1400000, 1300000, 500000, 200000, 275000,800000, 1200000, 1400000, 1300000, 500000, 200000, 275000,800000, 1200000, 1400000, 1300000, 500000, 200000]},
   
   {meta :'Q3' , data : [100000, 200000, 400000, 800000, 100000, 200000, 400000, 800000, 100000, 200000, 400000, 800000, 567000, 234300,100000, 200000, 400000, 800000, 100000, 200000, 400000, 800000, 100000, 200000, 400000, 800000, 567000, 234300,800000, 1200000, 1400000, 1300000, 500000, 200000, 275000,800000, 1200000, 1400000, 1300000, 500000, 200000, 275000,800000, 1200000, 1400000, 1300000, 500000, 200000]},
   
   {meta :'Q4' , data : [100000, 200000, 400000, 600000, 100000, 200000, 400000, 600000, 100000, 200000, 400000, 600000, 100000, 200000,100000, 200000, 400000, 600000, 100000, 200000, 400000, 600000, 100000, 200000, 400000, 600000, 100000, 200000,800000, 1200000, 1400000, 1300000, 500000, 200000,...