JSFiddle - React, Tailwind, and code Playground

by Christian Bonato

HTML

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

JavaScript

var data = {
            datasets: [
                {
                    label: "Oranges",
                    backgroundColor: '#00F',
                    data: [2],
                    xAxisID: "bar-x-axis2"
                },{
                    label: "Apples",
                    backgroundColor: '#F00',
                    data: [5],
                    xAxisID: "bar-x-axis1",
                    stack: "background"
                },{
                    label: "Bananas",
                    backgroundColor: '#0F0',
                    data: [6],
                    xAxisID: "bar-x-axis1",
                    stack: "background"
                }
            ]
        };

        var options = {
            scales: {
                xAxes: [
                    {
                        id: "bar-x-axis2",
                        stacked: true,
                        categoryPercentage: .2
                    },
                    {
                        display: true,
                        stacked: true,
                        id: "bar-x-axis1",
                        type: 'category',
                        categoryPercentage: .2,
                        gridLines: {
                            offsetGridLines: 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
        });