Customize legend in chart - Javascript highcharts

Javascript examples for highcharts:Chart Legend

  1. HOME
  2. Javascript
  3. highcharts
  4. Chart Legend

Description

Customize legend in chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.4.3.min.js"></script> 
      <script type="text/javascript">
    $(function(){//from w  w  w  .  j av  a  2s  .  c  o m
window.chart = new Highcharts.Chart({
  chart: {
    renderTo: 'container',
    type: 'pie'
  },
  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,
  },
  plotOptions: {
    pie: {
      allowPointSelect: true,
      cursor: 'pointer',
      dataLabels: {
        enabled: false
      },
      showInLegend: true
    }
  },
  series: [{
    type: 'pie',
    name: 'Browser share',
    data: [
      ['Firefox', 45.0],
      ['IE', 26.8],
      ['Chrome', 12.8],
      ['Safari', 8.5],
      ['Opera', 6.2],
      ['Others', 0.7]
    ]
  }]
});
    });

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="container" style="height: 300px; width: 400px"></div>  
   </body>
</html>

Related Tutorials