Last slice color in google pie chart?

Question

I'm looking for a way to consistently color the last slice in a google pie chart. The last slice is titled other and I won't always know how many other slices are showing. I set up the following bin...

http://jsbin.com/sugere/1/

<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],
      ['Other',    7]
    ]);

    var options = {
      title: 'My Daily Activities'
    };

    var chart = new    google.visualization.PieChart(document.getElementById('piechart'));

    chart.draw(data, options);
  }

  google.setOnLoadCallback(drawChart2);
  function drawChart2() {

    var data = google.visualization.arrayToDataTable([
      ['Task', 'Hours per Day'],
      ['Work',     11],
      ['Eat',      2],
      ['Commute',  2],
      ['Other', 2]
    ]);

    var options = {
      title: 'My Daily Activities 2'
    };

    var chart = new google.visualization.PieChart(document.getElementById('piechart2'));

    chart.draw(data, options);
  }
</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
<div id="piechart2" style="width: 900px; height: 500px;"></div>
</body>
</html>

I considered making Other the first item that comes back which would allow me to target the first item's color, but then I would need some way of rotating the pie chart back. As far as I can tell you can only do that by percentage and not by number of slices.

Hann Hann · Accepted Answer · 2015-02-24T16:40:51

If you want to change color of the slice you have an option on this chart.

Link

https://developers.google.com/chart/interactive/docs/gallery/piechart

Example

slices: [{color: 'black', {}, {}, {color: 'red'}] // order of the slice
slices: {0: {color: 'black'}, 3: {color: 'red'}} // number of the slice

Your code modified

I am taking the liberty to change all color on the first chart and just change the last slice.

    <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],
      ['Other',    7]
    ]);

    var options = {
      title: 'My Daily Activities',
       slices: {
            0: { color: 'blue' },
            1: { color: 'red' },
             2: { color: 'orange' },
             3: { color: 'grey' },
             4: { color: 'black' }  

          }
    };

    var chart = new    google.visualization.PieChart(document.getElementById('piechart'));

    chart.draw(data, options);
  }

  google.setOnLoadCallback(drawChart2);
  function drawChart2() {

    var data = google.visualization.arrayToDataTable([
      ['Task', 'Hours per Day'],
      ['Work',     11],
      ['Eat',      2],
      ['Commute',  2],
      ['Other', 2]
    ]);

    var options = {
      title: 'My Daily Activities 2',
       slices: {
             3: { color: 'black' }  

          }
    };

    var chart = new google.visualization.PieChart(document.getElementById('piechart2'));

    chart.draw(data, options);
  }
</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
<div id="piechart2" style="width: 900px; height: 500px;"></div>
</body>
</html>

Last slice color in google pie chart?

2 Answers

Link

Example

Your code modified