Highcharts - how to add icons to a label

Question

I'm using highcarts to add a label to the centre of my pie chart. I'm using the labels config options but I want to add a label to the beginning of it as such:

I've tried multiple things, including the labelFormatter but nothing seem to work. Currently my code stands as:

labels: {
  items: [{
   useHTML: true, // Using HTML for label
    //html: "Transactions",
    html: '<img src="https://github.com/tobi-ajala/shell-exercise/blob/master/icons/card.png?raw=true"/>' + "Transactions", // Doesn't work!
    style: {
      fontFamily: 'Arial,Roboto,Helvetica,sans-serif',
      fontWeight: 'bold',
      fontSize: 14,
      verticalAlign: 'middle',
      top: 140,
      left: 460
    }
  }]
},

Please see the JS Fiddle here: http://jsfiddle.net/tobitobetoby/1fqvzpdn/22/

Answer 1

labels.items doesn't seem to support images.

You can use renderer to create the label with the exact inner HTML that you pass as an argument. Notice that useHTML option (7th argument) is enabled. Then you can style it via CSS.

this.renderer.label("<div class='transactions'>
   <img src='https://github.com/tobi-ajala/shell-exercise/blob/master/icons/card.png?raw=true'/>
         Transactions</div>", 120, 125, null, null, null, true).add();

Demo: http://jsfiddle.net/kkulig/p4nnxjq1/

API reference: http://api.highcharts.com/highcharts/Renderer.label