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>Elförbrukning</title>
    <script type="text/javascript" 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 
{
    width: 90%;
}

JavaScript

////////////////////////////////////////////////////////////////
// DrawChart.js
//
function DrawChart()
{
    const maxVals = [200.0, 4.0, 250.0, 6.0];
    const barColors = ['#a52a2a', '#0f52ba', '#00a36c', '#ffb81c'];
    const title = 'Power consumption';
    const labels = ['Energy', 'Power', 'Voltage', 'Current'];

    var powerCanvas = document.getElementById("powergrid");
    var powerChart = new Chart(powerCanvas,
        {
            type: 'bar',
            data:
            {
                labels: [labels[0], labels[1], labels[2], labels[3]],
                datasets:
                    [
                        {
                            grouped: false,
                            data: [{ x: labels[0], y: 0 }],
                            borderWidth: 1,
                            borderColor: barColors[0],
                            backgroundColor: barColors[0],
                            fill: true,
                            yAxisID: 'energy',
                            label: labels[0] + ', kWh',
                        },
                        {
                            grouped: false,
                            data: [{ x: labels[1], y: 0 }],
                            borderWidth: 1,
                            borderColor: barColors[1],
                            backgroundColor: barColors[1],
                            fill: true,
                            yAxisID: 'power',
                            label: labels[1] + ', kW',
                        },
                        {
                            grouped: false,
                            data: [{ x: labels[2], y: 0 }],
                            borderWidth: 1,
                            borderColor: barColors[2],
                            backgroundColor: barColors[2],
                            fill: true,
                            yAxisID: 'voltage',
                            label: labels[2] + ', V',
                        },
              ...