Bar Chart Gauge Highcharts

Question

How do I achieve a bar gauge chart?

I need a chart like this:

I followed the steps from here, but I am not able to define the stops properly. https://www.safaribooksonline.com/library/view/learning-highcharts/9781849519083/ch04s04.html

These are my stops:

 stops: [
        [0, '#ffffff'],
        [1, '#ff0000'],
        [2, '#f3f03c'],
        [3, '#FFA500'],
        [4, '#02c102']
]

Please advice.

 var value = "3.0"; Highcharts.chart('barGauge', { chart: { type: 'bar', plotBorderWidth: 2, plotBackgroundColor: '#D6D6EB', plotBorderColor: '#D8D8D8', plotShadow: true, spacingBottom: 43, width: 350, height: 120 }, title: { text: '' }, credits: { enabled: false }, xAxis: { tickLength: 0 }, yAxis: { title: { text: null }, labels: { y: 1 }, min: 0, max: 4, tickInterval: 1, minorTickInterval: 1, tickWidth: 1, tickLength: 8, minorTickLength: 5, minorTickWidth: 1, minorGridLineWidth: 0 }, legend: { enabled: false }, series: [{ borderColor: '#7070B8', borderRadius: 3, borderWidth: 1, color: { linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0 }, stops: [ [0, '#ffffff'], [1, '#ff0000'], [2, '#f3f03c'], [3, '#FFA500'], [4, '#02c102'] ] }, pointWidth: 50, data: [parseInt(value)] }] });

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

So if the value is 1, the bar should progress from 0 to 1 and be red. So if the value is 2, the bar should progress from 0 to 2 and be yellow. So if the value is 3, the bar should progress from 0 to 3 and be orange. So if the value is 4, the bar should progress from 0 to 4 and be green.

Answer 1

You can create an array of zones and apply a specific color to each value range.

An array defining zones within a series. Zones can be applied to the X axis, Y axis or Z axis for bubbles, according to the zoneAxis option. The zone definitions have to be in ascending order regarding to the value.

 const gaugeValue = 4; Highcharts.chart('barGauge', { chart: { type: 'bar', height: 120 }, title: { text: '' }, yAxis: { min: 0, max: 4, tickInterval: 1, title: { text: null }, }, legend: { enabled: false }, series: [{ data: [parseInt(gaugeValue)], zones: [{ value: 1, color: '#ffffff' }, { value: 2, color: '#ff0000' }, { value: 3, color: '#f3f03c' }, { value: 4, color: '#FFA500' }, { value: 5, color: '#02c102' } ] }] });

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

---

jsfiddle