JSFiddle - React, Tailwind, and code Playground

by Fairlight

HTML

<div class=chart>
<canvas id="myChart"></canvas>
</div>

CSS

.chart {
            display: float;
            width: 100%;
            display: block;
           top:auto;
        }

JavaScript

var ctx = document.getElementById("myChart").getContext('2d');
new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets:[{
            type: 'line',
            label: "A",
            data: [65, 59, 80, 81, 56, 55, 40],
            backgroundColor: "rgba(54, 162, 235, 0.2)",
            borderColor: "rgb(54, 162, 235)",
            borderWidth: 1
        },
        {
            type: 'line',
            label: "B",
            data: [55, 59, 70, 91, 26, 25, 70],
            backgroundColor: "rgba(255, 99, 132, 0.2)",
            borderColor: "rgb(255, 99, 132)",
            borderWidth: 1
        }]
    },
    options: {
        tooltips: {
            mode: 'x',
        }
    }
})