JSFiddle - React, Tailwind, and code Playground

by Dedi Wibisono

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
<canvas id="canvas"></canvas>

CSS

canvas {
   /* background-color: rgba(47, 152, 208, 0.1); */
}

JavaScript

creating_chart(
   'canvas',
	'line',
	['Jan', 'Feb', 'Mar', 'Apr', 'May'],
	[2220, 19998, 55547, 55784, 999985],
	'Money Earned'
);

function creating_chart(get_wrapper, type_of_chart, labels_of_chart, data_of_charts, title_of_chart) {
   var ctx = document.getElementById(get_wrapper).getContext('2d');
   var myChart = new Chart(ctx, {
      type: type_of_chart,
      data: {
         labels: labels_of_chart,
         datasets: [{
            label: title_of_chart,
            data: data_of_charts,
            backgroundColor: 'rgba(47, 152, 208, 0.2)',
            borderColor: 'rgba(19, 247, 228,1)',
            borderWidth: 2,
            pointBackgroundColor: 'rgba(19, 247, 228,1)',
            pointBorderColor: 'rgba(19, 247, 228,1)',
            pointBorderWidth: 5,
         }]
      },
      options: {
         scales: {
            xAxes: [{
               gridLines: {
                  display: false
               }
            }],
            yAxes: [{
               gridLines: {
                  display: false
               }
            }]
         },
         tooltips: {
            callbacks: {
               label: function(t, d) {
                  var xLabel = d.datasets[t.datasetIndex].label;
                  var yLabel = d.datasets[t.datasetIndex].data[t.index];
                  return xLabel + ': $' + yLabel;
               }
            }
         }
      }
   });
};