JSFiddle - React, Tailwind, and code Playground

by Avizura

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>

<div style="width: 600px; height: 400px; margin: 0 auto">
	<div id="container-speed" style="width: 300px; height: 300px; float: left"></div>
</div>

JavaScript

$(function () {

    var gaugeOptions = {

        chart: {
                type: 'solidgauge',
                    margin: [0, 0, 0, 0],
                    backgroundColor: 'transparent'
                },
                title: null,
                yAxis: {
                    min: 0,
                    max: 30,
                    minColor: '#009CE8',
                    maxColor: '#009CE8',
                    lineWidth: 0,
                    tickWidth: 0,
                    minorTickLength: 0,
                    minTickInterval: 500,
                    labels: {
                        enabled: false
                    }
                },
                pane: {
                    size: '100%',
                    startAngle: 0,
                    endAngle: 230,
                    background: {
                    borderWidth: 8,
                    backgroundColor: 'transparent',
                    shape: 'arc',
                    borderColor: 'transparent',
                        outerRadius: '90%',
                        innerRadius: '90%'
                    }
                },
                tooltip: {
                    enabled: false
                },
                plotOptions: {
                    solidgauge: {
                        borderColor: 'blue',
                        borderWidth: 8,
                        radius: 90,
                        innerRadius: '90%',
                        dataLabels: {
                            y: 5,
                            borderWidth: 0,
                            useHTML: true
                        }
                    }
                },
                series: [{
                    name: 'windSpeed',
                    data: [5],
                    dataLabels: {
                        format: '<div style="Width: 50px;text-align:center"><span style="font-size:30px;color:#009ce8">{y}</span></div>'
                    }
                    
                }],

        ...