HighStock to keep the same color for each segment in case of selecting - Javascript highcharts

Javascript examples for highcharts:Stock Chart

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

Description

HighStock to keep the same color for each segment in case of selecting

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="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script type="text/javascript">
$(function () {//w ww . j a  v a  2 s  . c om
    $('#container').highcharts({
        chart: {
            type: 'pie'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        plotOptions: {
           series: {
               allowPointSelect: true,
               states: {
                   select : {
                       color: null
                   }
               }
            }
        },
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    });
    // the button action
    $('#button').click(function() {
        var chart = $('#container').highcharts(),
            selectedPoints = chart.getSelectedPoints();
        console.log('You selected '+ selectedPoints.length +' points');
    });
});

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

Related Tutorials