JSFiddle - React, Tailwind, and code Playground

by peak_

HTML

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>PowerGrid</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
    <script type="text/javascript" src="min.js"></script>
</head>
<body onload="DrawChart();">
    <div class="chart" style="height: 80%; width: 80%;">
        <canvas id="powergrid" ></canvas>
    </div>
</body>
</html>

JavaScript

function DrawChart()
{
    const maxVals = [240.0, 6.0];
    var powerCanvas = document.getElementById("powergrid");
    var powerChart = new Chart(powerCanvas,
        {
            type: 'bar',
            data:
            {
                labels: ['Volts', 'Amperes'],
                datasets:
                    [
                        {
                            label: 'Volts',     // This bar should have this label underneath itself
                            borderWidth: 1,
                            borderColor: '#0000e0',
														yAxisID: 'y1',
                            data: [204.78]       // Initial value, will be overwritten
                        },
                        {
                            label: 'Amperes',   // This bar should have this label underneath itself
                            borderWidth: 1,
                            borderColor: '#e00000',
													 	yAxisID: 'y2',
 														data: [4.51]			// Initial value, will be overwritten
                        }
                    ]
            },
            options:
            {
                title:
                {
                    display: true,
                    text: 'Powerchart'
                },
                scales:
                {
                    y2:	// Reverse order to have scales in proper placement
                    {
                        max: 6, // Hardcoded for readabillity
                    },
                    y1:
                    {
                        max: 240,	
                    }
                }
            }
        } // var myChart
    ); // new powerChart
    setInterval(GetData, 3000);

    function GetData() // Simulate power meter input
    {
        var len = powerChart.data.datasets.length;
        for (i = 0; i < len; i++)
            powerChart.data.datasets[i].data[0] = getRandomFloat(0.1, maxVals[i]); // Overwrite old and only data value
        powerChart.update();
    }
}
function...