highchart: add images to top of chart on every column

Question

Does anyone know if it's possible to create something like this in Highcharts:

It's about the weather icons on the top. I added them as a "scatter graph" which is nice, so the images/graph can be disabled. But I want them always at the top. For example: y=20px or something. Is it possible to do this with Highchart? I know set their data to "30 celcius" but that would mess up the graph if it the temperature would go up to 30 degrees.

Answer 1

You can use a trick of having two x-axes, one with images and offset'ed to the top of the chart and one with the usual labels at the bottom:

xAxis: [{
    offset: -290,
    tickWidth: 0,
    lineWidth: 0,
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    labels: {
        x: 5,
        useHTML: true,
        formatter: function () {
            return '<img src="http://highcharts.com/demo/gfx/sun.png"><img>&nbsp;';
        }
    }
}, {
    linkedTo: 0,
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}],

Full example on jsfiddle