door
Sander
4-1-2011
Fun little task today of making every pie-part a different color, but still within the range of colors used in the style of our app (Provisior).
I was unable to find a simple example as to go about this so here is one for those in need of one. The sample code is used with a Telerik RadChart for ASP.NET AJAX.
The cause of the problem is the unknown number of pie-parts that the chart will render. I could just make them all the same color, but that isn’t very pretty to look at and the default color aren’t bad, but they look out of place in our app (see the Provisior website and you’ll know what I mean).
We use a lot of white and gray in our style sheet, but to add some life to all the white and gray, we use orange. That will be the color from which we start mixing up new colors ending with red.
That is looking a lot better 
Here is how this is done:
// The starting point of the G value in our RGB color
int baseG = 216;
// The amount we change the color for each item
int stepSize = baseG / uxChart.Series[0].Items.Count;
// Values for the G in our RGB colors
int mainG = baseG;
int secondG = 0;
foreach (var item in uxChart.Series[0].Items)
{
// Set each item to a slightly different color.
item.Appearance.FillStyle.MainColor =
Color.FromArgb(255, mainG, 0);
item.Appearance.FillStyle.SecondColor =
Color.FromArgb(255, secondG, 0);
mainG = mainG - stepSize; // Lower the main G value
secondG = secondG + stepSize; // Raise the secondary G value
// Don't let the colors error out due to an invalid value.
if (mainG <= 0)
{
mainG = 0;
}
if (secondG >= 255)
{
secondG = 255;
}
}
This code is executed right after the RadChart is databound using the .DataBind() method.
This is not perfect though, as you can see in the picture below. Having many parts in the Pie makes the changes to the colors very small which turns the Pie into one big gradient. The lines separating the parts add enough detail for me, so I’m fine with that.
So there you go