JSFiddle - React, Tailwind, and code Playground

by oduska

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id='TestDial_container'></div>

CSS

#TestDial_container .highcharts-container:after {
    content: '';
    background-image: url('http://i.imgur.com/H0t2hYu.png');
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 67px; bottom: -83px;
    opacity: 0.2;
}

JavaScript

var TestDial;
$(document).ready(function() {
	TestDial = new Highcharts.Chart({
		chart: {
            renderTo:'TestDial_container',
            alignTicks: false,
            plotBorderWidth: 0,
            plotShadow: false,
            type: 'gauge',
            width: 400
        },
        
		credits: {
        	enabled: false
        },
        
		plotOptions: {
        	gauge: {
            	dataLabels: {
                	enabled: false
                }, 
                dial: {
                	baseLength: '0%',
                    baseWidth: 10,
                    radius: '85%',
                    rearLength: '0%',
                    topWidth: 1
                    }
            	}
        },
        
		pane: {
        	background: [{
        		backgroundColor: 'transparent',
            	borderColor: 'transparent'
        	}],
            
       		endAngle: 90,
        	startAngle: -90
        },
        
		title: {
        	text: 'Forecast CQ vs. Goal'
        },
        
		yAxis: {
        	labels: {
            	enabled: true,
                distance: 20
            },
            max: 100,
            min: 0,
            minorTickColor: 'transparent',
            plotBands: [{
            	color: {
                    linearGradient: [100, 0, 300, 220],
                    stops: [
                        [0.5, '#DF5353'], // red
                        [0.75, '#DDDF0D'], // yellow
                        [1, '#55BF3B'] // green
                    ]
                },
                from: 0,
                thickness: '40%',
                to: 100
            }],
            tickColor: 'darkgray',
            tickLength: 5,
            tickPosition: 'outside',
            tickmarkPlacement: 'on'
        },
        
		series: [{
        	data: [80], 
            name: 'Speed'
        }]
	});
});