如何在图例中的所有系列旁边添加图标

Question

I want to add a favicon beside all the series data objects in the legend of my highcharts pie chart but I'm having no luck. I've searched around for a few hours but it seems like all of the examples are not quite right. I want it to look like the image below

I though adding the icon to the series data and defining it in the legends labelFormatter like this:

legend: {
  enabled: true,
  floating: true,
  borderWidth: 0,
  align: 'right',
  layout: 'vertical',
  verticalAlign: 'middle',
  itemMarginTop: 20,
  itemMarginBottom: 20,
  labelFormatter: function() {
    return '<span style="font-weight: normal;">' + this.name + ' </span> <span style:"font-weight: normal;"><b>€' + this.y + '<br/></span>';
  }
},

   series: [{
  name: 'Transactions',
  data: [{
    name: 'Carrots',
    y: 7450.00,
    icon: 'url(http://www.highcharts.com/demo/gfx/snow.png)'
  }, {
    name: 'Apples',
    y: 435.00,
    icon: 'url(http://www.highcharts.com/demo/gfx/snow.png)'
  }, {
    name: 'Oranges',
    y: 300.87,
    icon: 'url(http://www.highcharts.com/demo/gfx/snow.png)'
  }, {
    name: 'Lemons',
    y: 45.67,
    icon: 'url(http://www.highcharts.com/demo/gfx/snow.png)'
  }, {
    name: 'Limes',
    y: 42.45,
    icon: 'url(http://www.highcharts.com/demo/gfx/snow.png)'
  }],

would work the best but still no luck. Can anybody please enlighten me on what I'm doing wrong? The whole code is here http://jsfiddle.net/tobitobetoby/1fqvzpdn/6/

Thank you!

Answer 1

For your legend, you can enable HTML with the useHTML flag. I also didn't see anywhere in your code where you were adding the image, so I added an image tag to the labelFormatter.

legend: {
  enabled: true,
  floating: true,
  borderWidth: 0,
  align: 'right',
  layout: 'vertical',
  verticalAlign: 'middle',
  itemMarginTop: 20,
  itemMarginBottom: 20,
  useHTML: true,
  labelFormatter: function() {
    return '<span style="font-weight: normal;">' + this.name + ' </span> <span style:"font-weight: normal;"><b>€' + this.y + '<br/><image src="' + this.icon +'" /></span>';
  }
},

http://jsfiddle.net/blaird/1fqvzpdn/8/