How to apply color to a Pie Chart slice from Google Charts API
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.
Answer
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']
};