JSFiddle - React, Tailwind, and code Playground

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 260px; width: 100%;"></div>
<div id="chartContainer1" style="height: 260px; width: 100%;"></div>
<div id="chartContainer2" style="height: 260px; width: 100%;"></div>

JavaScript

var k = 1;
var dataSet = {
  "Cumulative instituiution Statistics": [{
    mousemove: subjectChartDrilldownHandler,  
    mouseout: setParameter,  
    cursor: "pointer",
    legendMarkerType: "square",
    name: "Cumulative instituiution Statistics",
    startAngle: 90,
    type: "bar",
    indexLabel: "{name}",
    indexLabelPlacement: "inside",
    indexLabelFontColor: "white",
    dataPoints: [
      { label: "Pine high school", y: 519960, name: "Pine high school", color: "#E7823A" },
      { label: "Jefferson high school", y: 363040, name: "Jefferson high school", color: "#546BC1" }
    ]
  }],
  "Pine high school": [{
    color: "#E7823A",
    name: "Pine high school",
    type: "bar",
    dataPoints: [
      { label: "Math" , y: 33000 },
      { label: "Science" , y: 35960 },
      { label: "Physics" , y: 42160 },
      { label: "Chemistry" , y: 42240 },
      { label: "English" , y: 43200 }
    ]
  }],
  "Jefferson high school": [{
    color: "#546BC1",
    name: "Jefferson high school",
    type: "bar",
    dataPoints: [
      { label: "Math" , y: 32000 },
      { label: "Science" , y: 25960 },
      { label: "Physics" , y: 32160 },
      { label: "Chemistry" , y: 41240 },
      { label: "English" , y: 41200 }
    ]
  }]
};

var cumulativeStats = {
  animationEnabled: true,
  theme: "light2",
  title: {
    text: "New VS Returning Visitors"
  },
  subtitles: [{
    text: "Click on Any Segment to Drilldown",
    backgroundColor: "#2eacd1",
    fontSize: 16,
    fontColor: "white",
    padding: 5
  }],
  axisX: {
  	labelFormatter: function(e){
    	return " ";
    }
  },
  data: []
};

var drillDownStats = {
  animationEnabled: true,
  theme: "light2",
  axisX: {
    labelFontColor: "#717171",
    lineColor: "#a2a2a2",
    tickColor: "#a2a2a2"
  },
  axisY: {
    gridThickness: 0,
    includeZero: false,
    labelFontColor: "#717171",
    lineColor: "#a2a2a2",
    tickColor: "#a2a2a2",
    lineThickness: 1
  },
  data: []
};

var chart = new...