Highcharts - temperature gauge

Question

The one drawback to Highcharts that I can see currently is that it doesn't seem to have anything resembling a thermometer gauge in its gauge library. I can see that you might be able to fiddle something but using eg a 1-column barchart or something similar, but that doesn't really start to look like a thermometer ie with a color-fill bulb at the bottom or even a rounded base.

Have I overlooked a way of doing this or is it simply missing from the Highcharts repertoire? Anyone from Highcharts care to comment please?

I know it doesn't look like a mercury thermometer but would a Angular gauge serve the same purpose? http://www.highcharts.com/demo/gauge-speedometer — Ryan Erb, Jul 19 '13 at 17:55
Thanks for the suggestion, but no - I really don't think that a plain dial is a suitable substitute. The thermometer is _the_ iconic way to present temperature data, especially to generalist viewers. It really seems a shame that alternatives such as RGraph and FusionCharts do have a true thermometer graphic/gauge, but Highcharts does not AFAICS. — johnd, Jul 19 '13 at 19:56
Maybe a modified version of this? http://stackoverflow.com/questions/17564548/gauge-like-high-chart — wergeld, Jul 19 '13 at 20:45
Thanks again, but I'd argue that this fails on the critical test of how well it communicates the data. If you're trying to show, visually, a temperature value to a general audience then the one graphic element that will be immediately meaningful to them would be a thermometer, ie a vertical 'progress bar' for want of a better term with a coloured bulb at the bottom or, at the very least, an arc or semicircle to close the element at the bottom. But it does rather sound like I'm going to be out of luck with Highcharts on this one, a shame for such a simple modification to an exisitng shape. — johnd, Jul 19 '13 at 21:08
I was looking for the same gauge so I could use it for a leader-board. It has a Goal that is trying to be reached. http://jsfiddle.net/crh225/10vkkgdj/2/ — crh225, Nov 14 '14 at 16:59

Mark · Answer 1 · 2013-07-22T01:52:43.560

But it does rather sound like I'm going to be out of luck with Highcharts on this one, a shame for such a simple modification to an exisitng shape.

Don't give up so easy. Highcharts is a tool; if it doesn't do exactly what you want out of the box, then do it yourself. This is what being a good software developer is all about.

For instance, this fiddle combines an SVG image of a thermometer with a column chart in 36 lines of code. It will need some polish but hopefully it can get you going.

enter image description here

$(function () {
        $('#container').highcharts({
            chart: {
                type: 'column',
                marginBottom: 53
            },
            credits: {
                enabled: false
            },
            title: null,
            legend: {
                enabled: false
            },
            exporting: {
                enabled: false   
            },
            yAxis: {
                min: 0,
                max: 100,
                title: null,
                align: 'right'
            },
            xAxis: {
                labels: false
            },
            series: [{
                data: [60],
                color: 'red'
             }]
        }, function(chart) { // on complete

        chart.renderer.image('http://www.clker.com/cliparts/p/W/e/k/U/d/blank-fundraising-thermometer.svg', 0, 0, 256, 400)
            .add();         
    });
});

score 0 · Answer 2 · edited Jan 30 '15 at 22:02

I fixed it, see this fiddle.

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column',
            marginBottom: 72
        },
        credits: {
            enabled: false
        },
        title: null,
        legend: {
            enabled: false
        },
        exporting: {
            enabled: false   
        },
        yAxis: {
            min: 0,
            max: 100,
            title: null,
            align: 'right'
        },
        xAxis: {
            labels: false
        },
        series: [{
            data: [54],
            color: '#c00'
         }]
    }, function(chart) { // on complete

    chart.renderer.image('http://www.clker.com/cliparts/p/W/e/k/U/d/blank-fundraising-thermometer.svg',24, 0, 110, 510).add();   

});

});

Could you please state in your answer what exactly wasn't working from the older answer that you fixed? — Math, Dec 04 '13 at 17:41

Highcharts - temperature gauge

2 Answers2