JSFiddle - React, Tailwind, and code Playground

by Torstein Hønsi

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 class="">
    <div id="container" style="width:250px; height:250px; margin: 0 auto"></div>
</div>

JavaScript

$(function() {

	(function (H) {
    	H.wrap(H.seriesTypes.solidgauge.prototype, 'drawPoints', function (proceed) {
        	proceed.call(this);
            var yAxis = this.yAxis,
            	renderer = this.chart.renderer;

        	H.each(this.points, function (point) {	
            	var graphic = point.graphic, 
                	angle,
                    sector = Math.PI / 30,
                    rotation = yAxis.startAngleRad + yAxis.translate(point.y, null, null, null, true);
                    
                if (graphic.element.nodeName === 'path') {
                	// Add to group
                	point.graphic = renderer.g().add(graphic.parentGroup);
                	graphic.destroy();
                }
                var shapeArgs = point.shapeArgs;
                for (angle = shapeArgs.start; angle < shapeArgs.end; angle += sector) {
                	var angleColor = yAxis.toColor(
                    	yAxis.translate(angle - yAxis.startAngleRad, true, null, null, true)
                    );
                    var arc = renderer.arc({
                        x: point.shapeArgs.x,
                        y: point.shapeArgs.y,
                        r: point.shapeArgs.r,
                        innerR: point.shapeArgs.innerR,
                        start: angle,
                        end: Math.min(angle + sector, shapeArgs.end),
                        fill: angleColor
                    })
                    .attr({
                        'fill': angleColor,
                        'stroke': angleColor,
                        'stroke-width': this.options.borderWidth,
                        'stroke-linejoin': 'round'
                    })
                    .add(point.graphic);
                }
            }, this);
        });
    }(Highcharts));

    Highcharts.chart('container', {
        chart: {
            type: 'solidgauge',
            marginTop: 10,
            marginBottom: 38,
            //marginRight: -15,
           ...