Searching for JS based (Highcharts, AnyChart, etc) thermometer or vertical linear gauge with multiple pointers

Question

Despite combing the web, I have been unable to find an example to work from as a starting point. I am looking to recreate the thermometer gauge in the attached image using Highcharts, AnyChart, or similar JS based charting library. Any leads to examples would be much appreciated.

As you can see, the idea is to display multiple data values on a single thermometer or gauge in an intuitive and uncluttered way.

Thanks,

Baobab

Answer 1

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