How to add icon/svg/image on X-axis for bar graph onclick event using highcharts?

Question

I need to show selected bar x-axis label color as different to other bar as well as add icon to that user can easily identifies that selected bar in graph.

I achieve to change a label color of x-axis on click x-axis but 1.how to add icon/image to the selected bar 2.onclick bar plotoption also I need to change color and image on xxis

Can any one help me on this

Please find attached link for reference https://stackblitz.com/edit/highcharts-angular-demo-6zczh1

Thanks in advance

Answer 1

You can enable the useHTML propety for labels and return img element in case of the same selected column index, for example:

    series: [{
        ...,
        point: {
            events: {
                click: function() {
                    var chart = this.series.chart;
                    chart.selectedIndex = this.x;
                    chart.redraw(false);
                }
            }
        }
    }],
    xAxis: {
        type: 'category',
        labels: {
            useHTML: true,
            formatter: function() {
                if (this.chart.selectedIndex === this.pos) {
                    return '<img src="https://www.highcharts.com/samples/graphics/sun.png" height="40" width="40">';
                }
                return this.value;
            }
        }
    }

---

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

API Reference: https://api.highcharts.com/highcharts/xAxis.labels.formatter