Set custom color for pie chart - Javascript highcharts

Javascript examples for highcharts:Pie Chart

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

Description

Set custom color 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"> 
      <style id="compiled-css" type="text/css">

@import 'https://code.highcharts.com/css/highcharts.css';
#container {//ww w. j a va 2 s . c om
   height: 400px;
   max-width: 800px;
   min-width: 320px;
   margin: 0 auto;
}
.highcharts-tooltip {
   stroke: gray;
}
.highcharts-pie-series .highcharts-point {
   stroke: #EDE;
   stroke-width: 2px;
}
.highcharts-pie-series .highcharts-data-label-connector {
   stroke: silver;
   stroke-dasharray: 2, 2;
   stroke-width: 2px;
}
.highcharts-pie-series .highcharts-point.custom-style,
.highcharts-pie-series .highcharts-data-label-connector.custom-style,
.highcharts-halo.custom-style {
   stroke: lightgray !important;
   stroke-dasharray: white;
   stroke-width: 1px;
   fill: lightgray !important;
}


      </style> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/js/highcharts.js"></script> 
      <div id="container"></div> 
      <script type="text/javascript">
Highcharts.chart('container', {
  chart: {
    events: {
      load: function() {
        var points = this.series[0];
        console.log(points);
      }
    }
  },
  plotOptions: {
    series: {
      point: {
        events: {
          mouseOver: function() {
            var point = this,
              className = point.className;
            if (className) {
              point.series.halo.attr({
                class: 'highcharts-halo custom-style'
              });
            }
          }
        }
      }
    }
  },
  title: {
    text: 'Pie point CSS'
  },
  tooltip: {
    pointFormat: '<b>{point.percentage:.1f}%</b>'
  },
  series: [{
    type: 'pie',
    keys: ['name', 'y', 'className'],
    data: [
      ['Point1', 29.9, ],
      ['Point2', 14.5],
      ['Point3', 11.5],
      ['Point4', 54.5, 'custom-style'],
    ],
  }]
});

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

Related Tutorials