JSFiddle - React, Tailwind, and code Playground

by Brad Patton

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/solid-gauge.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>

JavaScript

$(function () {
    var col = ['#ff0000', '#00ff00', '#0000ff'],
        color;

    function styleTickLines() {
        var paths = $('.highcharts-axis > path').splice(0),
            len = paths.length;
        // hide first and last
        paths[0].setAttribute('opacity', 0);
        paths[len - 1].setAttribute('opacity', 0);
        // style the rest
        for (var i = 1; i < len - 1; i++) {
            paths[i].setAttribute('stroke-dasharray', '3,3');
        }
    }

    $('#container').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBackgroundImage: null,
            plotBorderWidth: 0,
            plotShadow: false,
            events: {
                load: styleTickLines,
                redraw: styleTickLines
            }
        },
        title: {
            text: null
        },
        tooltip: {
            enabled: false
        },
        pane: {
            startAngle: -90,
            endAngle: 90,
            background: {
                backgroundColor: '#ccc',
                borderWidth: 0,
                shape: 'arc',
                innerRadius: '60%',
                outerRadius: '100%'
            }
        },
        yAxis: {
            zIndex: 7,
            stops: [
                [1, '#ff0000']
            ],
            min: 0,
            max: 95,
            minorTickLength: 0,
            lineWidth: 0,
            tickPixelInterval: 30,
            tickWidth: 2,
            tickPosition: 'inside',
            tickLength: 46,
            tickColor: '#666',
            tickPositions: [0, 76.38, 93, 95],
            labels: {
                distance: 20
            }
        },
        series: [{
            type: 'solidgauge',
            fillColor: 'red',
            data: [72],
            radius: '100%',
            dataLabels: {
                y: 10,
                borderWidth: 0,
                style: {
                    fontSize: '20px'
                }
            }
   ...