JSFiddle - React, Tailwind, and code Playground

by Akihiko Kusanagi

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],
                    xAxisID: "bar-x-axis1"
                },
                {
                    label: "Target",
                    backgroundColor: 'rgba(0, 0, 0, 0.2)',
                    borderWidth: 1,
                    data: [100, 100, 100, 100, 100],
                    xAxisID: "bar-x-axis2"
                }
            ]
        };

        var options = {
            scales: {
                xAxes: [
                    {
                        id: "bar-x-axis2",
                        stacked: true,
                        categoryPercentage: 0.5,
                        barPercentage: 0.5
                    },
                    {
                        display: true,
                        stacked: true,
                        id: "bar-x-axis1",
                        type: 'category',
                        categoryPercentage: 0.4,
                        barPercentage: 1,
                        gridLines: {
                            offsetGridLines: true
                        },
                        offset: true
                    }
                ],

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

            }
        };

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