Accepted answer

You need to set useHTML true in formatter function of yAxis label.See the code below and working fiddle here

for dynamic image, you can put image path as variable. If you don't want to show axis value remove "this.value" from formatter function

yAxis: { labels: {
        formatter: function() {
            return '<img src="" alt="" style="vertical-align: middle; width: 32px; height: 32px"/>'+ this.value;
        useHTML: true


Just in case anyone else is looking for making a chart with y axis having multiple images, here's how I did it:

        var chartScales ={ return { value:x.Text, key:++imageIndex, image:x.DefaultImage }; });

        var chart = $("#chartContainer").highcharts({
            chart: {
                type: 'spline'
                categories: chartScales,
                labels: {
                    formatter : function()
                        // if there's an image use it, otherwise use the text, or key value
                        if(this.value.image != null)
                            return "<img src='"+ this.value.image +"'  style='vertical-align: middle; width: 32px; height: 32px'/>"+(this.value.value != null ? this.value.value : this.value.key);
                        return this.value.value != null ? this.value.value : this.value.key;
                    useHTML: true
            series: [{
                data: []

Related Query

More Query from same tag