JSFiddle - React, Tailwind, and code Playground

by andig2

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.bundle.js"></script>
<canvas id="chart"></canvas>

JavaScript

var opc = document.getElementById("chart");
var operationalPerformanceChart = new Chart(opc, {
  type: 'line',
  data: {
    xLabels: ["APR", "MAY", "JUN", "JUL", "AUG", "SEP"],
    yLabels: ['A+', 'A', 'B', 'C', 'D'],
    datasets: [{
      label: 'Grade',
      data: ['A+', 'B', 'C', 'B', 'B'],
      fill: false,
      lineTension: 0.2,
      borderColor: '#337ab7',
      backgroundColor: '#337ab7'
    }]
  },
  options: {
    responsive: true,
    tooltips: {
      enabled: true,
      mode: 'x-axis'
    },
    scales: {
      xAxes: [{
        display: true,
      }],
      yAxes: [{
        type: 'category',
        position: 'left',
        display: true,
        scaleLabel: {
          display: true,
          //labelString: 'Grade'
        },
        ticks: {
          reverse: false
        }
      }]
    }
  }
});