CODEWITHSUNDEEP
javascriptchartsgoogle-visualization
Adam Youngers
Adam Youngers

Reputation: 6749

Last slice color in google pie chart?

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.

Upvotes: 0

Views: 1726

Answers (2)

geraldcor
geraldcor

Reputation: 209

I believe you are looking for pieResidueSliceColor

See https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart#configuration-options

This is the color for the 'Other' category for the data meeting your specified threshold.

However, if you are not using the threshold other then to use Hann's option you could just figure out the index of your last data point array and use the slices:{idxYourFiguredOut:{fontColor:'red'}} but the api has something built in.

Upvotes: 0

Hann
Hann

Reputation: 713

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>

Upvotes: 1

Related Questions