JSFiddle - React, Tailwind, and code Playground

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
<br/>
<div class="row">
  <div class="col-sm-6">
    Chart Type: <select name="chart Type" id="chartType">
      <option value="" selected="selected">Select</option>
      <option value="stackedColumn">Column Chart</option>
      <option value="stackedBar">Bar Chart</option>
      <option value="line">Line Chart</option>
    </select>
    
    Course: <select class="selectpicker" name="Course" id="courseName">
      <option value="" selected="selected">Select</option>
      <option value="BSIS">BSIS</option>
      <option value="BSIT">BSIT</option>
      <option value="BSCS">BSCS</option>
      <option value="BSCE">BSCE</option>
      <option value="BSCHE">BSCHE</option>
      <option value="BSCPE">BSCPE</option>
      <option value="BSEE">BSEE</option>
      <option value="BSECE">BSECE</option>
      <option value="BSME">BSME</option>
    </select>
  </div>
</div>

JavaScript

var course = [];
var dataSeries = [];
var uniqueLabels = {};
var distinct = [];

var chart = new CanvasJS.Chart("chartContainer", {
    theme: "light2",
    animationEnabled: true,
    animationDuration: 1000,
    zoomEnabled: true,
    zoomType: "x",
    panEnabled: true,
    toolTip: {
        shared: true,
        animationEnabled: true
    },
    title: {
        text: "University of Negros Occidental - Recoletos",
        fontSize: 17
    },
    subtitles:[
        {
            text: "Enrollment Population 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"
    }, 
    data: dataSeries
});

$.ajax({
    type: 'GET',    
    url: 'https://api.myjson.com/bins/109zfm',
    contentType: "application/json",
    dataType: 'json', 
    success: function(field) {

        for( var i in field ) {
            //Find all distinct labels in JSON
            if(...