CODEWITHSUNDEEP
highcharts
Hoang
Hoang

Reputation: 867

Customize legend in highchart

i try edit in legend to have result same the picture below but not sucess

enter image description here

This my jsfiddle.net/hoanghoang3009/9wXvr/44. I also try edit with labelFormat with code and can't show chart.

 labelFormat: '<div><div style="float: left; width: 80%;">{name}</div><div style="margin-left: 80%">({percentage:.2f}%)</div></div>'

so I change labelFormat to first value:

labelFormat: '{name} ({percentage:.1f}%)'

Anybody can give me solution to have result same the picture. Thanks!

Upvotes: 1

Views: 421

Answers (1)

Deep 3015
Deep 3015

Reputation: 10075

Your legend in code will be like this

Fiddle

legend: {
    useHTML: true,
    //labelFormat: '{name} ({percentage:.1f}%)',
    labelFormatter: function() {
      return '<div style="width:30vh;"><span style="float:left;color:#ccc">' + this.name + '</span><span style="float:right">' + this.percentage.toFixed(0) + '%</span></div>';
    },
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'middle',
    symbolRadius: 0, //for changing to square 
    padding: 3,
    itemMarginTop: 5,
    itemMarginBottom: 5,
  },

As useHTML: true in code so you can try as many possibilities with CSS and HTML

Upvotes: 2

Related Questions