JSFiddle - React, Tailwind, and code Playground

Highcharts Demo: Gauge

by David Hepworth

HTML

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

<div id="container" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>

CSS

@import 'https://code.highcharts.com/css/highcharts.css';

.highcharts-background {
  fill: transparent;
}
.highcharts-credits {
  display: none;
}
.highcharts-plot-band, .highcharts-pane {
  fill-opacity: 1;
  fill: black
  stroke: none;
}
.outer-pane {
	fill: transparent;
  stroke: none;
}
.middle-pane {
	stroke-width: 0;
	stroke: none;
  fill: transparent;
}
.inner-pane {
	fill: transparent;
  stroke: none;
}
.green-band {
  fill: #43CC5A;
	fill-opacity: .75;
}
.yellow-band {
	fill: #F7E94D;
	fill-opacity: .75;
}
.red-band {
  fill: #f9573a;
	fill-opacity: .75;
}
.highcharts-gauge-series .highcharts-pivot {
	stroke-width: 0;
	stroke: white;
	fill-opacity: 1;
  fill: white;
}
.highcharts-gauge-series .highcharts-dial {
	fill: white;
}
.highcharts-yaxis .highcharts-tick {
	stroke-width: 1px;
	stroke: #e3e3e3;
}
.highcharts-yaxis-grid .highcharts-grid-line,
.highcharts-yaxis-grid .highcharts-minor-grid-line {
	display: none;
}
.highcharts-yaxis .highcharts-minor-tick {
	stroke-width: 0;
	stroke: #dfdfdf;
}
.highcharts-data-label text,
.highcharts-axis-title {
  fill: white !important;
  stroke: none !important;
}
.highcharts-axis-labels,
.highcharts-axis-labels text {
  fill: #f3f3f3 !important;
  stroke: none;
  color: #f3f3f3;
}
.highcharts-data-label text>tspan {
  stroke: none !important;
}
.highcharts-gauge-series .highcharts-data-label-box {
  stroke: none !important;
}
.highcharts-data-labels.total-amount {
  transform: translate(0,30px) !important;
}
.total-amount text {
  font-size: 20px !important;
  font-weight: normal !important;
}

JavaScript

Highcharts.chart('container', {

    chart: {
        type: 'gauge'
    },

    title: {
        text: null
    },

    pane: {
        startAngle: -150,
        endAngle: 150,
        background: [{
            className: 'outer-pane',
            outerRadius: '115%'
        }, {
            className: 'middle-pane',
            outerRadius: '112%'
        }, {
            // default background
        }, {
            className: 'inner-pane',
            outerRadius: '105%',
            innerRadius: '103%'
        }]
    },

    // the value axis
    yAxis: {
        min: 0,
        max: 0.5,

        minorTickInterval: 'auto',
        minorTickLength: 10,
        minorTickPosition: 'inside',

        tickPixelInterval: 30,
        tickPosition: 'inside',
        tickLength: 10,
        labels: {
            step: 2,
            rotation: 'auto'
        },
        title: {
            text: 'TRR Goal<br><0.15\u00A0'
        },
        plotBands: [{
            from: 0,
            to: 0.15,
            className: 'green-band'
        }, {
            from: 0.15,
            to: 0.3,
            className: 'yellow-band'
        }, {
            from: 0.3,
            to: 0.5,
            className: 'red-band'
        }]
    },

    series: [{
        name: 'TRR',
        data: [0.14],
        className: 'total-amount'
    }]

});