JSFiddle - React, Tailwind, and code Playground
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=""></div>
<div id="container-rpm" style="width: 300px; height: 200px; float: left"></div>
</div>JavaScript
$(function () {
var merge = Highcharts.merge;
var perShapeGradient = {
x1: 0,
y1: 1,
x2: 1,
y2: 1
};
var vcolors = Highcharts.getOptions().colors;
vcolors = [
{
linearGradient: merge(perShapeGradient),
stops: [
[0, 'rgb(248,255,232)'],
[1, 'rgb(41,154,11)']
],
},
{
linearGradient: merge(perShapeGradient),
stops: [
[0, 'rgb(248,80,50)'],
[1, 'rgb(241,111,92)']
],
},
{
linearGradient: merge(perShapeGradient),
stops: [
[0, 'rgb(249,198,103)'],
[1, 'rgb(221,164,17)']
],
},
{
linearGradient: merge(perShapeGradient),
stops: [
[0, 'rgb(157,213,58)'],
[1, 'rgb(161,213,79)']
],
}
];
$('#container-speed').highcharts({
chart: {
type: 'solidgauge',
backgroundColor: null,
enableMouseTracking:true,
borderWidth: 1,
plotBorderWidth: 0,
marginBottom: 100,
}, legend: {
enabled: true,
align: 'right',
},
title: 'asdasdadasdasdasdasdasdas',
pane: {
center: ['50%', '85%'],
/* size: '100%',*/
startAngle: -90,
endAngle: 90,
background: {
/*backgroundColor: 'rgba(10,10,10, 0.7)',*/
backgroundColor:'black',
innerRadius: '60%',
outerRadius: '100%',
...