[Solved]-highchart: add images to top of chart on every column-Highcharts

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.

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

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

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

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!

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