Google Visualization - Set Pie Chart Slice Color

Question

I have a data table that is used for a pie chart and I need to set colors of slices based on a value in a row. For example, I have a table of car sales by type (e.g. lease, cash, finance) and I want to specify a color for each one. In the documentation, it seems possible to do this with bar charts, but I can't seem to do it with slices. I tried the following:

var pieChart = new google.visualization.ChartWrapper({
    options : {
        ...
        slices: [{color: 'black'}, {color: 'green'}, {color: 'red'}]
    }
});

The colors get rendered but I want to specify black for lease. Any ideas on how I can get this to work?

WhiteHat WhiteHat · Accepted Answer · 2017-09-08T11:30:45

the colors in the slices array should be in the same order as the rows in the data table

so, with the following rows...

data.addRows([
  ['Cash', 5],
  ['Finance', 20],
  ['Lease', 15]
]);

for 'Lease' to black, it should be the last color in the array

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

if the order of the rows is unknown, you could set the colors dynamically

use an object to create a map for the colors

// create color map
var colors = {
  'Cash': 'green',
  'Finance': 'red',
  'Lease': 'black'
};

then build the slices array based on the values in the data table

// build slices
var slices = [];
for (var i = 0; i < data.getNumberOfRows(); i++) {
  slices.push({
    color: colors[data.getValue(i, 0)]
  });
}

see following working snippet...

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'sales');
  data.addColumn('number', 'count');
  data.addRows([
    ['Cash', 5],
    ['Finance', 20],
    ['Lease', 15]
  ]);
  data.sort([{column: 1, desc: true}]);

  // create color map
  var colors = {
    'Cash': 'green',
    'Finance': 'red',
    'Lease': 'black'
  };

  // build slices
  var slices = [];
  for (var i = 0; i < data.getNumberOfRows(); i++) {
    slices.push({
      color: colors[data.getValue(i, 0)]
    });
  }

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.PieChart(container);
  chart.draw(data, {
    slices: slices
  });
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Google Visualization - Set Pie Chart Slice Color

1 Answers