Forums

I'm trying to change the fill colors of the pie chart depending on the data returned from the server. If there are no values, I create a data array with a "none" entry and would like to set the fill color to black, otherwise, I have a custom array of colors.

I created test code to simulate the data changing without making a server call. I started with "none" data and black fill and that works. But then when I set the data to actual values and custom colors, the data gets updated but all the wedges in the pie chart are all black. Is there another way to change the fill colors?

Here's my code:

HTML:
<div id="sandbox" style="height:100px;width:100px;">
</div>

JAVASCRIPT:
var colors = ["#FF6600", "#3366CC", "#707070"];
var black = ["#000000"];
var seriesCollection = [
{
categoryKey:"Type",
valueKey:"Value",
styles:{
fill:{
colors:black
}
}
}
];

var fullValues = [
{Type:"a", Value:1},
{Type:"b", Value:1},
{Type:"c", Value:1}
];
var noValues = [
{Type:"None", Value:1}
];

var pieGraph = new Y.Chart({
categoryKey:"Type",
seriesKeys:["Value"],
type:"pie"
});


seriesCollection[0].styles.fill.colors = black;
pieGraph.set('seriesCollection', seriesCollection);
pieGraph.set('dataProvider', noValues);

pieGraph.render('#sandbox');
alert('blah');

seriesCollection[0].styles.fill.colors = colors;
pieGraph.set('seriesCollection', seriesCollection);
pieGraph.set('dataProvider', fullValues);