Multiple images for Highcharts X Axis Labels

user_10963024 0
Viewed 465

I want to be able to show a list of different images on a highcharts spiderweb chart. Until now I've only managed to be able to display one singular image repeatedly JS Fiddle with where I've got to.

labels: {
  formatter: function() {       
        return '<img src="' + img_path + '" style="width:45px;height:45px;" />';
    },
    useHTML: true,
    align: 'center'
}

Is it possible to provide different labels per x axis item?

highcharts javascript
1 Answers

The easiest way to achieve it is by setting the xAxis.type to category and provide data which includes the 'name' key, where the name is an output of a function which returns an HTML span element.

Demo: https://jsfiddle.net/BlackLabel/pmckLwh1/

Function to return the HTML span element:

var dataName = function(imgSrc) {
  return '<span><img src=' + imgSrc + ' ' + 'style="width: 40px; height: 40px;"/><br></span>';
};

Data format:

var data2016 = [
  [17, dataName("https://image.flaticon.com/icons/svg/197/197571.svg")],
  [19, dataName("https://image.flaticon.com/icons/svg/197/197408.svg")],
  [26, dataName("https://image.flaticon.com/icons/svg/197/197375.svg")],
  [27, dataName("https://image.flaticon.com/icons/svg/197/197374.svg")],
  [46, dataName("https://image.flaticon.com/icons/svg/197/197484.svg")],
];

API: https://api.highcharts.com/highcharts/series.column.keys

API: https://api.highcharts.com/highcharts/xAxis.type

user_105228420
Related