Google Visualization - Set Pie Chart Slice Color - charts

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?

Answer 1

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>