JSFiddle - React, Tailwind, and code Playground

by andrey90vs

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="width:600px; height: 500px; margin: 0 auto"></div>

JavaScript

$(function () {
    $('#container').highcharts({

        chart: {
            type: 'gauge',
            plotBorderWidth: 1,
            plotBackgroundColor: {
                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                stops: [
                    [0, '#ffbd32'],
                    [0.3, '#ffbd32'],
                    [1, '#ffbd32']
                ]
            },
            plotBackgroundImage: null,
            height: 400
        },

        title: {
            text: 'VU meter'
        },

        pane: [{
            startAngle: -90,
            endAngle: 90,
            background: null,
            center: ['50%', '50%'],
            size: 300
        }],

        tooltip: {
            enabled: false
        },

        yAxis: {
            min: 0,
            max: 1000,
            minorTickPosition: 'outside',
            tickPosition: 'outside',
            labels: {
                rotation: 'auto',
                distance: 20
            },
            plotBands: {
                from: 0,
                to: 6,
                color: '#C02316',
                innerRadius: '100%',
                outerRadius: '105%'
            }
        },

        plotOptions: {
            gauge: {
                dataLabels: {
                    enabled: false
                },
                dial: {
                    radius: '100%'
                }
            }
        },


        series: [{
            name: 'Channel A',
            data: [-20],
            yAxis: 0
        }]
    },

        // Let the music play
        function (chart) {
            setInterval(function () {
                if (chart.series) { // the chart may be destroyed
                    var left = chart.series[0].points[0],
                        leftVal,
                        inc = (Math.random() - 0.5) * 3;

                    leftVal = left.y + inc;
                    if (leftVal < -20 || leftVal > 6) {
                        leftVal =...