JSFiddle - React, Tailwind, and code Playground

by adrienne

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

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

JavaScript

$(function () {
   
    var chart = new Highcharts.Chart({
    
        chart: {
            renderTo: 'container',
            type: 'gauge',
            plotBackgroundColor: null,
            plotBackgroundImage: null,
            plotBorderWidth: 0,
            plotShadow: false
        },
        
        title: {
            text: 'Speedometer'
        },
        
        pane: {
            startAngle: -90,
            endAngle: 90,
            background: [{
                backgroundColor: 'transparent',
                borderWidth: 0,
                outerRadius: '105%',
                innerRadius: '0%'
            }],
            center: ['50%', '80%'],
            size: 400
           
        },
           
        // the value axis
        yAxis: {
            min: 0,
            max: 200,
            
            minorTickInterval: 'auto',
            minorTickWidth: 1,
            minorTickLength: 10,
            minorTickPosition: 'inside',
            minorTickColor: '#666',
    
            tickInterval: 50,
            tickWidth: 2,
            tickPosition: 'inside',
            tickLength: 20,
            tickColor: '#666',

            title: {
                text: null
            }      
        },
        
        tooltip: {
            enabled: false
        },
         plotOptions: {
            gauge: {
                dataLabels: {
                    enabled: false
                },
                dial: {
                    radius: '80%',
                    rearLength: 0,
                    baseWidth: 16,
                    baseLength: '10%',
                    backgroundColor: '#e75f5f'
                },
                pivot: {
                    backgroundColor: '#9acd82',
                    radius: 12
                }
            }
        },
        series: [{
            name: 'Speed',
            data: [80]
        }]
    
    },
    // Add some life
    function (speedometer) {
        setInterval(function () {
 ...