Using connecting legends for two pie charts - Javascript highcharts

Javascript examples for highcharts:Pie Chart

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

Description

Using connecting legends for two pie charts

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="container" style="height: 400px; width: 500"></div> 
      <script type="text/javascript">
var chart = Highcharts.chart('container', {
  chart: {/*from  w  ww. j av a 2 s  .  c  o  m*/
    type: 'pie'
  },
  labels: {
    items: [{
        html: 'One',
        style: {
          top: '25%',
          left: '210',
        },
      },
      {
        html: 'Two',
        style: {
          top: '25%',
          left: '620',
        },
      },
    ],
  },
  legend: {
    squareSymbol: false,
    symbolRadius: 1,
    symbolWidth: 25,
  },
  plotOptions: {
    pie: {
      size: '75%',
      dataLabels: {
        enabled: false,
      },
      point: {
        events: {
          legendItemClick: function() {
            for (var i = 0; i < chart.series.length; i++) {
              if (chart.series[i].points[this.index].visible == true) {
                chart.series[i].points[this.index].setVisible(false, false);
              } else {
                chart.series[i].points[this.index].setVisible(true, false);
              }
            }
            chart.redraw();
            return false; //needed to stop the normal click from interferring
          }
        }
      }
    }
  },
  series: [{
      center: ['25%', '50%'],
      showInLegend: true,
      id: 'aaa',
      data: [
        ['Firefox', 44.2],
        ['IE7', 26.6],
        ['IE6', 20],
        ['Chrome', 3.1],
        ['Other', 5.4]
      ],
    },
    {
      //linkedTo: ':previous',
      center: ['75%', '50%'],
      data: [
        ['Firefox', 12.52],
        ['IE7', 12.83],
        ['IE6', 0],
        ['Chrome', 59.42],
        ['Other', 5.4]
      ]
    }
  ]
});

      </script>  
   </body>
</html>

Related Tutorials