Dynamically changing slices for pie chart - Javascript highcharts

Javascript examples for highcharts:Pie Chart

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

Description

Dynamically changing slices for pie chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script type="text/javascript">
$(function () {//from  w w  w.j a v  a  2  s  . c  o  m
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type:'pie',
            events:{
                load: function()
                {
                    var seriesPoints = this.series[0].points;
                    for (var i = 0; i < seriesPoints.length; i++){
                        seriesPoints[i].onMouseOut = function(){};
                    }
                }
            }
        },
        plotOptions: {
            pie: {
                states: {
                    hover: {
                        enabled: false
                    }
                },
                point: {
                    events: {
                        click: function() {
                            if(!this.active)
                                this.graphic.attr({ fill: '#00FF00' });
                            else
                                this.graphic.attr({ fill: '#CCCCCC' });
                            this.active = !this.active;
                        },
                    }
                }
            }
        },
        tooltip: {
            enabled: false
        },
        series: [{
            data: [{name:'test',y:29.9,color:"#CCCCCC",active:false},{name:'test2',y: 71.5,color:"#CCCCCC",active:false},{name:'test3',y: 106.4,color:"#CCCCCC",active:false}]
        }]
    });
});

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

Related Tutorials