JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<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/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
<div id="container" style="width: 600px; height: 300px; margin: 0 auto"></div>
</body>
<template name="Charts">
</template>
JavaScript
$(function () {
$('#container').highcharts({
chart: {
type: 'gauge',
plotBorderWidth: 1,
plotBackgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#FFF4C6'],
[0.3, '#FFFFFF'],
[1, '#FFF4C6']
]
},
plotBackgroundImage: null,
height: 200
},
title: {
text: 'VU meter'
},
pane: [{
startAngle: -45,
endAngle: 45,
background: null,
center: ['25%', '145%'],
size: 300
}, {
startAngle: -45,
endAngle: 45,
background: null,
center: ['75%', '145%'],
size: 300
}],
tooltip: {
enabled: false
},
yAxis: [{
min: -20,
max: 6,
minorTickPosition: 'outside',
tickPosition: 'outside',
labels: {
rotation: 'auto',
distance: 20
},
plotBands: [{
from: 0,
to: 6,
color: '#C02316',
innerRadius: '100%',
outerRadius: '105%'
}],
pane: 0,
...