score:1

Accepted answer

You can create that type of chart by using Highcharts. Use for example column series type and each segment can be a visible part of the column. To add the gradient colors easily, use color axis with stops. And finally, to add the pointers, use SVG.Renderer class.

    colorAxis: {
        visible: false,
        stops: [
            [0, '#00bfff'],
            [0.3, '#007bff'],
            [0.35, '#0dc200'],
            [0.5, '#bbff99'],
            [0.55, '#ff8400'],
            [0.9, '#ff0000']
        ],
    },
    series: [{
        pointWidth: 40,
        type: 'column',
        borderWidth: 0,
        threshold: 15,
        data: [
            [0, 85],
            [0, 80],
            [0, 75],
            [0, 70],
            [0, 65],
            [0, 60],
            [0, 55],
            [0, 50],
            [0, 45],
            [0, 40],
            [0, 35],
            [0, 30],
            [0, 25],
            [0, 20]
        ]
    }]

Live demo: http://jsfiddle.net/BlackLabel/qtjs5hc6/1/

API Reference:

https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text

https://api.highcharts.com/class-reference/Highcharts.Axis#toPixels

https://api.highcharts.com/highcharts/chart.events.load

https://api.highcharts.com/highcharts/colorAxis

score:0

You can achieve that using Linear Gauge by AnyChart. Here is the sample of the chart you are looking for. In addition, you can take al look at another sample. You can start from the following two Documentation articles:

https://docs.anychart.com/Gauges/Linear_Gauge

https://docs.anychart.com/Gauges/Pointers_and_Data


Related Query

More Query from same tag