JSFiddle - React, Tailwind, and code Playground

by canvasjs

HTML

<html>
<head>
<title>Total Population</title>
<script
  src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</head>
<body>
<div class="row">
  <div class="col-md-3"> &nbsp;
    <select name="chart Type" id="chartType">
      <option value="stackedColumn">Column Chart</option>
      <option value="stackedBar">Bar Chart</option>
      <option value="line">Line Chart</option>
      <option value="pie">Pie Chart</option>
    </select>
  </div>
  <div id="chartContainer" style="height: 370px; width: 100%;"></div>
  </div>
</body>
</html>

JavaScript

var college = []; 
var dataSeries = []; 
var uniqueLabels = {}; 
var distinct = [];
CanvasJS.addColorSet("customColorSet", [ 
    "#fe4df5",
    "#00d607", 
    "#e7c403", 
    "#680202", 
    "#565151",
    "#cc6200",
    "#032fe2",
    "#04bccc",
    "#59049f"
]);
var chart = new CanvasJS.Chart("chartContainer", {
    exportFileName: "Annual Per College Population", 
    exportEnabled: true,
    theme: "light2",
    animationEnabled: true,
    animationDuration: 1000,
    zoomEnabled: true,
    colorSet: "customColorSet",
    zoomType: "x",
    panEnabled: true,
    toolTip: {
        shared: true,
        animationEnabled: true
    },
    title: {
        text: "University of Negros Occidental - Recoletos",
        fontSize: 17
    },
    subtitles:[
        {
            text: "Population Per College 2014-2018"
        }
    ],
    legend: {
        cursor: "pointer",
        itemclick: function (e) {
            if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                e.dataSeries.visible = false;
            } else {
                e.dataSeries.visible = true;
            }
            e.chart.render();
        },
        itemmouseover: function(e) {
            e.dataSeries.lineThickness = e.chart.data[e.dataSeriesIndex].lineThickness * 2;
            e.dataSeries.markerSize = e.chart.data[e.dataSeriesIndex].markerSize + 2;
            e.chart.render();
        },
        itemmouseout: function(e) {
            e.dataSeries.lineThickness = e.chart.data[e.dataSeriesIndex].lineThickness / 2;
            e.dataSeries.markerSize = e.chart.data[e.dataSeriesIndex].markerSize - 2;
            e.chart.render();
        }
    },

    axisX: {
        title: "Year",
        interval: 1,
        gridDashType: "dot",
        gridThickness: 1,
        labelFontColor: "black"
    },
    axisY: { 
        includeZero: false,
        title: "Number of Enrollees",
        labelFontColor: "black",
        interlacedColor: "#faf9f9"
   ...