Setting a Custom Color Palette on Chart Web Parts

The Chart Web Part is a SharePoint 2010 component that lets users generate charts from SharePoint lists or from BDC data.  This chart is great for providing simple data visualization that is embedded in SharePoint web part pages.  I had to do a project using this web part so I had to dig a little deeper into how to use the web part effectively.

The chart web part seems to just be an extension of the Microsoft .NET Chart class that allows you to specify the properties of the class via XML that is embedded in your SharePoint Web Part Page.  There are wizards and an advanced interface available on the web part pages to configure this underlying XML, but there are more options available to  you if you are willing to dig in and edit your page via SharePoint Designer.  Using SharePoint designer I was able to overcome what seems like a simple problem, how do I use a custom color palette on my chart?

I am going to outline the steps you need to take in order to add custom colors to a chart.  You can skip some of these steps and go straight to editing the XML, but I find that by completing my charts first and then editing the XML there is a lower chance of me accidentally blowing away my custom settings by going through a wizard.

1. Add a chart web part to your page.
2. Connect the chart to your data source using the data connection wizard. 
3. Start the chart customization wizard to format  your chart.
4. Select your chart type (type doesn't matter for custom palettes)
5. On the Appearance Themes tab:
1. Set the Theme to "Custom"
2. Set the Transparency to "Custom"
6. Finish the wizard setting any values other than the two above.
7.  Launch SharePoint Designer and open the source of your page.
8. Search for the String "PaletteCustomColors" this will take you to the embedded XML element for the custom palette.
9. The palette is ten semicolon(;) delimited values that you can set to whatever colors you want.  For how to specify color values in this section see the paragraph below. 
10. Save your page source and refresh the page, you should now see your custom colors!

There is a little trick to defining custom colors through this method and it will become appearant as soon as you open the file.  All colors have a four number format ex. (204, 255, 227, 130) this really threw me for a loop at first because everyone knows that colors are usually specified with three numbers in an RGB format.  It seems that Microsoft is starting to encourage the use of a four digit color specification where the extra number (the first in this case) is the transparency of the object.  Transparency is based on the percentage equal to the first number divided by 255, so 0 would be transparent and 255 would be solid.  In this situation a solid red would be 255, 255, 0, 0 and a half transparent blue would be 127, 0, 0 255.

Now that you know how to define colors you can go in and set your own palette of ten colors for use on your chart!  The chart web part will assign colors to your series based on when the values occur so the first series value will map to the first color and the next to the second, etc...

You must be careful when you use this editing XML method for changing charts because if you later use the wizards to edit your charts they may remove your customized values.  I have found that color is pretty stable and your settings will not be deleted unless you go into the wizard and change the color palette, transparency, or chart type.  But if you use this method to edit other values they may be wiped out by using the wizard.

For reference you can find the documentation for the chart class here:  http://technet.microsoft.com/en-us/system.web.ui.datavisualization.charting this documentation will show you the properties that are available on the chart class and that may be usable via the editing XML method. 

Good luck and happy charting!