JSFiddle - React, Tailwind, and code Playground

by mosamadi

HTML

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

JavaScript

var data = {
            labels: ["x1", "x2", "x3", "x4", "x5"],
            datasets: [
                {
                    label: "Actual",
                    backgroundColor: 'rgba(0, 0, 255, 0.5)',
                    borderWidth: 1,
                    data: [40, 150, 50, 60, 70],
                    yAxisID: "bar-y-axis1"
                }
            ]
        };

        var options = {
            scales: {
                yAxes: [
                    {
                        id: "bar-y-axis1",
                        
                        categoryPercentage: 0.5,
                        barPercentage: 0.5
                    }
                ],

                xAxes: [{
                    id: "bar-x-axis1",
                    stacked: false,
                    ticks: {
                        beginAtZero: true
                    }
                }]

            }
        };

        var ctx = document.getElementById("canvas").getContext("2d");
        var myBarChart = new Chart(ctx, {
            type: 'horizontalBar',
            data: data,
            options: options
        });