Change color of Pie Chart section without slice animation - Javascript highcharts

Javascript examples for highcharts:Chart Color

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

Description

Change color of Pie Chart section without slice animation

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Pie - exploded</title> 
      <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> 
      <script type="text/javascript">
    $(window).load(function(){/*w  w  w. j a  v a 2s.  c o  m*/
$(function() {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'pie'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                states: {
                    select: {
                        color: '#ff0000'
                    }
                },
                point:{
                    events:{
                        unselect: function(event) {
                            this.slice(true);
                        }
                    }
                }
            }
        },
        series: [{
            data: [
                {
                    name: 'Jan',
                    y: 29.9,
                    sliced:true
                },
                {
                    name: 'Feb',
                    y: 71.5,
                    sliced:true
                },
                {
                    name: 'Mar',
                    y: 106.4,
                    sliced:true
                },
                {
                    name: 'Apr',
                    y: 100,
                    sliced:true
                }
            ],
            slicedOffset:20
        }]
    });
});
    });

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

Related Tutorials