highcharts - Highcarts custom legend

Question

How can I customize the legends

From

To this

Answer 1

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