Pie Chart to ignore disabled legend items - Javascript highcharts

Javascript examples for highcharts:Pie Chart

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

Description

Pie Chart to ignore disabled legend items

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://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <style id="compiled-css" type="text/css">

.name{//  ww  w  .j  a v a  2 s.  co  m
   width: 190px;
}
.value{
   width: 60px;
}


      </style> 
      <script type="text/javascript">
$(function () {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'pie',
            width: 500,
            borderWidth: 2,
            events: {
            redraw: function(event) {
              $('#total_val').remove();
              var total = this.series[0].total;
              var text = this.renderer.text(
                'Total: ' + total,
                this.plotLeft,
                this.plotTop - 20
            ).attr({
                  id: 'total_val',
                  zIndex: 5
            }).add()
            }
              }
        },
        title: {
            text: 'demo'
        },
        credits: {
            enabled: false
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            y: 30,
            labelFormat: '{name} ({y})',
            navigation: {
                activeColor: '#3E576F',
                animation: true,
                arrowSize: 12,
                inactiveColor: '#CCC',
                style: {
                    fontWeight: 'bold',
                    color: '#333',
                    fontSize: '12px'
                }
            }
        },
    tooltip: {
            formatter: function() {
                return Highcharts.numberFormat(this.percentage, 2) + '%<br />' + '<b>' + this.point.name + '</b><br />Rs.: ' + Highcharts.numberFormat(this.y, 2);
            }
        },
        series: [{
            data: (function () {
                var names = 'Ari,Bjartur,Bogi,Bragi,D?njal,D?vur,Eli,Emil,Fr??i,H?kun,Hanus,Hjalti,??sakur,' +
                    'Johan,J?han,Julian,Kristian,Leon,Levi,Magnus,Martin,Mattias,Mikkjal,N?a,?li,Pauli,Petur,R?i,Sveinur,Teitur',
                    arr = [];
                Highcharts.each(names.split(','), function (name) {
                    arr.push({
                        name: name,
                        y: Math.round(Math.random() * 100)
                    });
                });
                return arr;
            }()),
            showInLegend: true
        }]
    });
    chart.redraw();
});

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

Related Tutorials