JSFiddle - React, Tailwind, and code Playground

by jayhilwig

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>

<div id="container" style="width: 600px; height: 800px; margin: 0 auto; text-align: center"></div>

JavaScript

$(function () {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'gauge',
            plotBorderWidth: 0,
            plotBackgroundColor: null,
            plotBackgroundImage: null,
            height: 400,
        },

        title: {
            text: 'Efficiencies'
        },

        pane: [{
            startAngle: -60,
            endAngle: 60,
            background: [{
                borderWidth: 0,
                backgroundColor: 'transparent'
            }]


        }],

        yAxis: [{
            min: 0,
            max: 200,
            lineWidth: 0,
            minorGridLineWidth: 0,
            lineColor: 'transparent',

            minorTickLength: 0,
            tickLength: 0,
            labels: {
                enabled: false,
                rotation: 'auto',
                distance: 20
            },
            plotBands: [{
                from: 0,
                to: 80,
                color: '#6DA539', // green
                innerRadius: '50%',
                outerRadius: '80%'
            }, {
                from: 80,
                to: 130,
                color: '#F3CA42', // yellow
                innerRadius: '50%',
                outerRadius: '80%'
            }, {
                from: 130,
                to: 200,
                color: '#BD3030', // red
                innerRadius: '50%',
                outerRadius: '80%'
            }],
            pane: 0,
            title: {

            }
        }, ],


        series: [{
            name: 'Speed',
            data: [67],

            tooltip: {
                enabled: false
            },
            dataLabels: {

                enabled: true,
                borderWidth: 0,
                formatter: function () {
                    //return this.y + " ms";
                    return '<span style="color:red; font-size:24px">' + this.y + 'ms' + '</span>';
                }
            },
     ...