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() {

	/**
     * Plugin for Highcharts solid gauge to display a continuous
     * gradient based on they yAxis min and max color. 
     * To do
     * - Initial and update animation
     */
	(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 / 3,
                    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();
                    point.arcs = [];
                }
                var shapeArgs = point.shapeArgs;
                for (angle = shapeArgs.start; angle < shapeArgs.end; angle += sector) {
                	var end = Math.min(angle + sector, shapeArgs.end);
                	var startAngleColor = yAxis.toColor(
                    	yAxis.translate(angle - yAxis.startAngleRad, true, null, null, true)
                    ), endAngleColor = yAxis.toColor(
                    	yAxis.translate(angle + sector - 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: end
                    })
                    .attr({
                        'fill': startAngleColor,
                        'stroke': startAngleColor,
                        'stroke-width':...