JSFiddle - React, Tailwind, and code Playground

by Shashi Kumar Nagulakonda

HTML

<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<div id="statsRenderingResultsDeliveryClaimsChartContainer" class="stats-results-delivery stats-results-delivery-inline" style="width: 60%; vertical-align: top;">
  <canvas class="stats-results-chart stats-results-chart-bar" id="statsRenderingResultsDeliveryClaimsChart" style="vertical-align: top;"></canvas>
</div>

JavaScript

var options = {
          legend: {
            display: false
          },
          animation: {
            animateScale: true
          },
          scales: {
            xAxes: [{
              barPercentage: 1,
              categoryPercentage: 1
            }],
            yAxes: [{
              barPercentage: 1,
              categoryPercentage: 1,
              ticks: {
                beginAtZero: true
              }
            }]
          },
          tooltips: {

          }
        };
        var dataForChart = {
          datasets: [{
            data: [0.2, 0.4, .78, 0.05],
            backgroundColor: ["#FF6384",
              "#4BC0C0",
              "#FFCE56",
              "#36A2EB"
            ],
            borderWidth: 0
          }],
          labels: ['1', '2', '3', '4']
        };
        var chart = new Chart($("#statsRenderingResultsDeliveryClaimsChart"), {
          type: 'bar',
          data: dataForChart,
          options: options
        });