Add 2 legends in Pie chart - Javascript highcharts

Javascript examples for highcharts:Pie Chart

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

Description

Add 2 legends in Pie 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.9.1.js"></script> 
      <style id="compiled-css" type="text/css">

.symbol {/*from  ww w.  j a  v  a 2 s.c o  m*/
   width:20px;
   height:20px;
   margin-right:20px;
   float:left;
   -webkit-border-radius: 10px;
   border-radius: 10px;
}
.serieName {
   float:left;
   cursor:pointer;
}
.item {
   height:40px;
   clear:both;
}


      </style> 
      <script type="text/javascript">
$(function () {
    $('#container').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: 'Browser market shares at a specific website, 2010'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage}%</b>',
            percentageDecimals: 1
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    formatter: function () {
                        return '<b>' + this.point.name + '</b>: ' + this.percentage + ' %';
                    }
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'Browser share',
            data: [
                ['Firefox', 45.0],
                ['IE', 26.8], {
                    name: 'Chrome',
                    y: 12.8,
                    sliced: true,
                    selected: true
                }, ['Safari', 8.5],
                ['Opera', 6.2],
                ['Others', 0.7]
            ]
        }]
    }, function (chart) {
        $legend = $('#customLegend');
        $.each(chart.series[0].data, function (j, data) {
            $legend.append('<div class="item"><div class="symbol" style="background-color:'+data.color+'"></div><div class="serieName" id="">' + data.name + '</div></div>');
        });
        $('#customLegend .item').click(function(){
            var inx = $(this).index(),
                point = chart.series[0].data[inx];
            if(point.visible)
                point.setVisible(false);
            else
                point.setVisible(true);
        });
    });
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div> 
      <div id="customLegend"></div>  
   </body>
</html>

Related Tutorials