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?

Answer 1

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.

$(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();         
    });
});