score:9

Accepted answer

check highcharts legend api options.you can further customize with desired css. use proper svg image (background color is taken from chart itself) 

legend: {
  align: 'right',
  verticalalign: 'top',
  layout: 'vertical',
  x: -50,
  y: 120,
  symbolpadding: 0,
  symbolwidth: 0.1,
  symbolheight: 0.1,
  symbolradius: 0,
  usehtml: true,
  symbolwidth: 0,
  labelformatter: function() {
    if(this.name=="microsoft internet explorer"){
         return '<div style="width:200px;"><span style="float:left; margin-left:10px"><img src = "http://cdn.onlinewebfonts.com/svg/img_508736.svg" width = "40px" height = "40px" style="background-color:' + this.color + ';"></span><span style="float:right;padding:9px">' + this.percentage.tofixed(2) + " " + this.y + '%</span></div>';
    }
   if(this.name=="chrome"){
   return '<div style="width:200px;"><span style="float:left; margin-left:10px"><img src = "http://cdn.onlinewebfonts.com/svg/img_159842.svg" width = "40px" height = "40px" style="background-color:' + this.color + ';"></span><span style="float:right;padding:9px">' + this.percentage.tofixed(2) + " " + this.y + '%</span></div>';
   }
   if(this.name=="firefox"){
   return '<div style="width:200px;"><span style="float:left; margin-left:10px"><img src = "http://cdn.onlinewebfonts.com/svg/img_261106.svg" width = "40px" height = "40px" style="background-color:' + this.color + ';"></span><span style="float:right;padding:9px">' + this.percentage.tofixed(2) + " " + this.y + '%</span></div>';
   }

  },
  itemstyle: {
    color: '#ffffff',
    fontweight: 'bold',
    fontsize: '19px'
  }
},

fiddle demo

score:2

you can modify legend. to display custom icons in place of legend symbols, you need to set legend.usehtml with true value, hide symbol with:

.highcharts-legend-item rect {
  visibility: hidden;
}

and use labelformatter. take a look at the example posted below.

api reference:
http://api.highcharts.com/highcharts/legend

example:
http://jsfiddle.net/2trc1gv9/


Related Query

More Query from same tag