JSFiddle - React, Tailwind, and code Playground

by Marc Locchi

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/solid-gauge.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {
        divID = 'container';
        dataC = {
            'title': '<b style="color:#333333;font-size:15px;font-weight:bold;">Connect</b>',
            'seriesDataConnections': 7,
            'seriesData': 7
        };

        gaugeChartObj = new Highcharts.Chart({
            credits: false,
            chart: {
                renderTo: divID,
                type: 'solidgauge',
                marginTop: 30,
                events: {
                    load: function(){
                        var p = this.series[0].points[0];
                        this.tooltip.refresh(p);
                    }
                }
            },
            title: {
                text: dataC.title,
                style: {
                    fontSize: '16px'
                }
            },
            exporting: {
                enabled: false
            },
            tooltip: {
                borderWidth: 0,
                backgroundColor: 'none',
                useHTML: true,
                shadow: false,
                style: {
                    fontSize: '16px'
                },
                formatter: function() {
                    return '<div style="width:100%;text-align:center;"><span style="font-size:1.2em;font-weight:bold;">' + this.point.series.name + '</span><br/><span style="font-size:3em;color:' + Highcharts.getOptions().colors[0] + ';font-weight:bold;">' + Highcharts.numberFormat(this.y / 10, 0) + '</span>';
                },
                positioner: function (labelWidth) {
                    return {
                        x: 170 - labelWidth / 2,
                        y: 125
                    };
                }
            },
            pane: {
                startAngle: 0,
                endAngle: 360,
                background: [{
                    outerRadius: '106%',
                    innerRadius: '94%',
                    backgroundColor:...