highchart: add images to top of chart on every col

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

Answer 2

Given that highcharts is just SVG you can always go directly and manipulate the SVG to show the images you want, usually with just CSS. You can inspect the chart with Chrome's web inspector and find the elements you want to style. I have to warn you though that having customized highcharts myself in the past has made upgrading to newer versions difficult.

Answer 3

You can use Renderer.image() to add images in any place on chart

http://api.highcharts.com/highcharts#Renderer.image()

Answer 4

I found a solution by chance because of a logging code I forgot to remove. You can access the data inside the method formatter using "this":

...
plotOptions: {
    series: {
        dataLabels: {
            useHTML: true,
            enabled: true,
            x: -50,
            y: -50,
            formatter: function(){
                console.log(this);
                return '<span>'+this.y+'</span><br/>'+this.series+'<img src="'+this.key+'" />';
            },
        }
    ...

This code surely isn't working, but shows up the idea, doesn't it? Hope it helps!

Answer 5

You can add another scatter plot to your series that contains specific markers: http://jsfiddle.net/ZZ7Kd/135/