CODEWITHSUNDEEP
javascripthtmlhighcharts
T.Doe
T.Doe

Reputation: 2035

Highcharts - how to add icons to a label

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:

enter image description here

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/

Upvotes: 1

Views: 1841

Answers (1)

Kamil Kulig
Kamil Kulig

Reputation: 5826

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

Upvotes: 2

Related Questions