Highcharts: How to set unique images on top of bar chart serie

user_4627608 0
Viewed 673

I am trying to find a solution where I am able to set images on the top of each bar. At the moment I didn't found the solution yet.

I tried:

  1. To set the images by adding a new serie of type 'scatter' with the same value as the bar chart serie and a marker with the image as symbol. But if I have multiple series of type 'bar' the points of the scatter serie are set in the middle and not on the top of each bar. I also want to keep the grouping if series are linked to the same category. const weather_serie = { type: 'scatter', data: this.visualisationService .generate_serie(this.categories[elem], weather, this.period) .map((val, index) => { if (val.hasOwnProperty('weather')) { return { y: isNaN(visit_serie.data[index]) ? 0 : visit_serie.data[index], marker: { symbol: 'url(https://openweathermap.org/img/w/${ val.weather }.png)' } }; } else { return NaN; } }), enableMouseTracking: false, showInLegend: true }; enter image description here
  2. To set the images by adding the datalabel and format it inside the chart options. But I didn't found how to set unique images linked to the correct bar chart inside the same category. Some other remarks are that the image is not in the middle of the bar (Starts from the bottom left of the image) and when hovering the tooltip is shown behind the image. plotOptions: { bar:{ dataLabels: { align: 'center', enabled: true, useHTML: true, formatter: function() { return '<img src="http://highcharts.com/demo/gfx/sun.png"><img>&nbsp;'; } } }
highcharts
1 Answers

In the first case, you should disable grouping on series:

plotOptions: {
    series: {
        grouping: false
    }
}

Live demo: http://jsfiddle.net/BlackLabel/v7qx1s5u/

In the second case, you can define individual data label for point:

series: [{
    type: 'column',
    data: [{
            x: 0,
            y: 1,
            dataLabels: {
                align: 'center',
                enabled: true,
                useHTML: true,
                formatter: function() {
                    return '<img src="https://www.highcharts.com/samples/graphics/sun.png"><img>';
                }
            }
        },
        [1, 2],
        [2, 3]
    ]
}]

or in formatter function define some rules where the data label should be some image:

    dataLabels: {
        align: 'center',
        enabled: true,
        useHTML: true,
        formatter: function(){
            if (this.point.index === 1){
                return '<img src="https://www.highcharts.com/samples/graphics/sun.png"><img>&nbsp;';
            }

        }
    }

Live demo: http://jsfiddle.net/BlackLabel/72Lahvp4/

user_89513770
Related