JSFiddle - React, Tailwind, and code Playground

by oktaviardi pratama

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;" width="214"></canvas>
                        </div>

JavaScript

var options = {
        	  responsive: false,
            legend: { display: true, position: 'right' },
            animation: {
                animateScale: true
            },
            scales: {
                xAxes: [{
                    barThickness: 45
                }],
                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', '1', '2', '3', '4']
        };
        var chart = new Chart($("#statsRenderingResultsDeliveryClaimsChart"), {
            type: 'pie',
            data: dataForChart,
            options: options
        });