How to apply color to a Pie Chart slice from Google Charts API

Question

Hi I'm trying to apply color's in the slices of my pie chart. I'm using Google Charts API.

Here you got all the pie chart information: https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart

And here is is a shortcut about what I'm talking:

slices Array of objects, or object with nested objects {} An array of objects, each describing the format of the corresponding slice in the pie. To use default values for a slice, specify an empty object {}. If a slice or a value is not specified, the global value will be used. Each object supports the following properties:

color - The color to use for this slice. Specify a valid HTML color string. textStyle - Overrides the global pieSliceTextSlice for this slice. You can specify either an array of objects, each of which applies to the slice in the order given, or you can specify an object where each child has a numeric key indicating which slice it applies to. For example, the following two declarations are identical, and declare the first slice as black and the fourth as red:

slices: [{color: 'black', {}, {}, {color: 'red'}] slices: {0: {color: 'black'}, 3: {color: 'red'}}

Don't know where I should put this code, here's the playground: https://code.google.com/apis/ajax/playground/?type=visualization#pie_chart

This is my attemp(which does not work)

function drawVisualization() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day'],
    ['Work', 11],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 7]
  ]);

  // Create and draw the visualization.
  new google.visualization.PieChart(document.getElementById('visualization')).
      draw(data, {title:"So, how was your day?", slices: [{color: 'black', {color: 'blue'}, {color: 'green'}, {color: 'red'}, {color: 'white'}]});
}

Thanks for your time. ////////////////////////////////////////////////////////////////////////////////////////

EDIT:

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities',
          slices: {0: {color: '#006EFF'}, 1:{color: '#00FF08'}, 2:{color: 'blue'}, 3: {color: 'red'}, 4:{color: 'grey'}}
        };

        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Note: I used

slices: {0: {color: '#006EFF'}, 1:{color: '#00FF08'}, 2:{color: 'blue'}, 3: {color: 'red'}, 4:{color: 'grey'}}

instead

slices: [{color: 'black', {}, {}, {color: 'red'}]

See you.

Hi guys, I think that the problem is because the playground. I tested this code(see the edited post) in my VPS and it worked fine. — Jesus

amishra amishra · Accepted Answer · 2013-10-26T21:42:22

You can use following to change default color of pie chart slices:

var options = {
  width: 400,
  height: 240,
  title: 'Toppings I Like On My Pizza',
  colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6']
};

How to apply color to a Pie Chart slice from Google Charts API

1 Answers