JSFiddle - React, Tailwind, and code Playground

by peak_

HTML

<html lang="sv">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="style.css" rel="stylesheet" type="text/css" />
    <title>Power consumption</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
    <script type="text/javascript" src="DrawChart_en.js"></script>
</head>
<body onload="DrawChart();">
    <div class="content">
        <div class="chart">
            <canvas class="shadow" id="powergrid"></canvas>
        </div>
    </div>
</body>
</html>

CSS

body 
{
    font-family: Calibri, Verdana, Tahoma, Arial, sans-serif;
    font-size: 14px;
    padding: 10px;
}
a:link, a:visited, a:active 
{
    text-decoration: none;
    color: #111111;
}
a:hover 
{
    text-decoration: underline;
}
/* https://htmlcolorcodes.com/color-names */
.shadow 
{
    border-radius: 16px;
    box-shadow: 16px 18px 30px 0px rgba(0,0,0,0.75);
    display: inline-block;
}
.chart 
{
    min-width: 640px;
    min-height: 480px;
    width:80%;
}

JavaScript

////////////////////////////////////////////////////////////////
// DrawChart.js
//
function DrawChart()
{
    const maxVals = [200.0, 4.0, 250.0, 6.0];                       // Max values for each dataset
    const barColors = ['#a52a2a', '#0f52ba', '#00a36c', '#ffb81c']; // Bar and scale colors in one place only
    var powerCanvas = document.getElementById("powergrid");
    var powerChart = new Chart(powerCanvas,
        {
            type: 'bar',
            data:
            {
                labels: ['Energy', 'Power', 'Voltage', 'Current'],
                datasets:   
                    [
                        {
                            grouped: false,     // Take up the whole dataset space in the chart
                            data: [],
                            borderWidth: 1,
                            borderColor: barColors[0],
                            backgroundColor: barColors[0],
                            fill: true,
                            yAxisID: 'energy',
                            label: "Energy, kWh"
                        },
                        {
                            grouped: false,
                            data: [],
                            borderWidth: 1,
                            borderColor: barColors[1],
                            backgroundColor: barColors[1],
                            fill: true,
                            yAxisID: 'power',
                            label: "Power, kW"
                        },
                        {
                            grouped: false,
                            data: [],
                            borderWidth: 1,
                            borderColor: barColors[2],
                            backgroundColor: barColors[2],
                            fill: true,
                            yAxisID: 'voltage',
                            label: "Voltage, V"
                        },
                        {
                           ...