Donut charts set different colors inner and outer data - Javascript highcharts

Javascript examples for highcharts:Donut Chart

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

Description

Donut charts set different colors inner and outer data

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <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">
$(function() {/* w  w w  .j  av a2  s .c  o m*/
  var innerColors = ["#FF0000", "#00FF00", "#0000FF"];
  var colors = Highcharts.getOptions().colors,
    categories = ['Mechanical', 'Electrical', 'Communication'],
    data = [{
      y: 20,
      color: colors[0],
      drilldown: {
        name: 'Mechanical Works',
        categories: ['New', 'Process', 'Completed'],
        data: [4, 6, 10],
        innerColor: innerColors[0]
      }
    }, {
      y: 30,
      color: colors[1],
      drilldown: {
        name: 'Electrical Works',
        categories: ['New', 'Process', 'Completed'],
        data: [5, 10, 15],
        innerColor: innerColors[1]
      }
    }, {
      y: 50,
      color: colors[2],
      drilldown: {
        name: 'Mechanical Works',
        categories: ['New', 'Process', 'Completed'],
        data: [10, 15, 25],
        innerColor: innerColors[2]
      }
    }],
    workData = [],
    versionsData = [],
    i,
    j,
    dataLen = data.length,
    drillDataLen,
    brightness;

  for (i = 0; i < dataLen; i += 1) {

    workData.push({
      name: categories[i],
      y: data[i].y,
      color: data[i].color
    });
    // add version data
    drillDataLen = data[i].drilldown.data.length;
    for (j = 0; j < drillDataLen; j += 1) {
      brightness = 0.2 - (j / drillDataLen) / 5;
      versionsData.push({
        name: data[i].drilldown.categories[j],
        y: data[i].drilldown.data[j],
        color: innerColors[j]
      });
    }
  }
  // Create the chart
  $('#container').highcharts({
    chart: {
      type: 'pie'
    },
    title: {
      text: 'Department wise workflow'
    },
    subtitle: {
      text: 'Source: <a href="#">example.com</a>'
    },
    yAxis: {
      title: {
        text: 'Total percent work share'
      }
    },
    plotOptions: {
      pie: {
        shadow: false,
        center: ['50%', '50%']
      }
    },
    tooltip: {
      valueSuffix: '%'
    },
    series: [{
      name: 'Departments',
      data: workData,
      size: '60%',
      dataLabels: {
        formatter: function() {
          return this.y > 5 ? this.point.name : null;
        },
        color: '#ffffff',
        distance: -30
      }
    }, {
      name: 'Versions',
      data: versionsData,
      size: '80%',
      innerSize: '60%',
      dataLabels: {
        formatter: function() {
          // display only if larger than 1
          return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + '%' : null;
        }
      }
    }]
  });
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container" style="width: 600px; height: 400px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials