JSFiddle - React, Tailwind, and code Playground

by Leigh Quince

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.js"></script>
<div id="canvas-holder" style="width:75%">
  <canvas id="myChart2" />
</div>

JavaScript

var barChartData = {
   labels: [1, 2, 3, 4, 5, 6, 7, 8, 9],
   datasets: [{
     type: 'bar',
     label: "Actual",
     data: [1.1, 0.5, 1.4, 1.1, 0.5, 1.4, 1.1, 0.5, 2],
     fill: false,
     backgroundColor: '#71B37C',
     borderColor: '#71B37C',
     hoverBackgroundColor: '#71B37C',
     hoverBorderColor: '#71B37C',
     yAxisID: 'y-axis-1'
   }]
 };



 var ctxActualVsMax = document.getElementById("myChart2").getContext("2d");

 var theChart = new Chart(ctxActualVsMax, {
   type: 'bar',
   data: barChartData,
   options: {
     responsive: true,
     tooltips: {
       mode: 'label'
     },
     elements: {
       line: {
         fill: false
       }
     },
     scales: {
       xAxes: [{
         display: true,
         gridLines: {
           display: false
         },
         labels: {
           show: true,
         }
       }],
       yAxes: [{
         type: "linear",
         display: true,
         position: "left",
         id: "y-axis-1",
         gridLines: {
           display: false
         },
         labels: {
           show: true,

         },
         ticks: {
           beginAtZero: true,
           userCallback: function(label, index, labels) {
             if (Math.floor(label) === label) {
               return label;
             }

           },
         }

       }]
     }
   }
 });