JSFiddle - React, Tailwind, and code Playground
by fekkyDev s
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="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>JavaScript
$(function () {
$('#container').highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: null
},
pane: {
startAngle: -125,
endAngle: 125,
background: [{
borderWidth: 0,
backgroundColor: 'transparent'
}]
},
// the value axis
yAxis: {
min: 0,
max: 100,
lineColor: 'transparent',
minorTickInterval: 'auto',
minorTickWidth: 0,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 0,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
title: {
text: null,
},
plotBands: [{
from: 0,
to: 50,
color: '#55BF3B',
innerRadius: '90%',
outerRadius: '105%'
}, {
from: 50,
to: 70,
color: '#DDDF0D',
innerRadius: '90%',
outerRadius: '105%'
}, {
from: 70,
to: 100,
color: '#DF5353',
innerRadius: '90%',
outerRadius: '105%'
}]
},
plotOptions: {
gauge: {
dataLabels: {
borderColor: 'transparent'
},
dial: {
radius: '75%',
backgroundColor: '#666666',
borderWidth: 0,
baseWidth: 7,
topWidth: 1,
baseLength: '90%', // of radius
rearLength: '0%'
},
pivot: {
...