Obtaining the perfect Custom Color Scheme in Xcelsius
Many dashboard enthusiasts have read the book entitled Information Dashboard Design by Stephen Few. In Stephen’s book, he comprehensively covers each component of a dashboard to discuss effective and efficient design. I was naturally curious how I could create reusable design objects using some of these best practices in Xcelsius 2008
With the advent of the color scheme and the ability to export to XML, my initial hope was to be able to create a set of ‘perfect palettes’ that blend differentiation and medium intensity colors, yet is readable on multiple mediums, printable, and easier on color blind users. I could then share that work with everyone by posting the XML. As I quickly found out, Xcelsius did not let me reach my ultimate destination, but did give me the ability to get part way there.
First, let’s review the color scheme. On the themes toolbar, you will see a button called Colors, this allows you to select, toggle, create and edit the color schemes. When selecting either create or edit, the custom color scheme screen is displayed as seen below.
Right away, it’s apparent that there are only 10 colors available to customize. This limitation really handcuffs the amount of reusable customizations that can be done. You have to think of these 10 colors as the only colors that can be use for data and non-date elements. If your entire dashboard design requires more than 10 colors, you will have to customize each dashboard component separately to add the 11+ color(s).
Second, the standard non-data elements in the existing themes consume a majority of the 10 available colors. I found that most of the themes use the first four colors and last color. These colors help create non-data elements such as backgrounds, text, buttons, mouse overs, etc. These colors are not used to differentiate the data as I am looking to accomplish. You could think of these colors as being used in a CSS (Cascading Style Sheet) fashion, and you would most likely customize these colors to fit with your company’s palette. I later found more information here about these colors.
For the data within the dashboard objects, colors 5 – 9 are used by default on charts and graphs for differentiation. This leaves us with 5 colors that will be automatically defaulted to when we create our dashboard items. You might be asking, ‘What happens to the colors if I create a chart or graph that has 6+ components?’ The answer is that Xcelsius cycles through the colors again in a repeating fashion.
Unfortunately, there is no way (that I know of) to default colors 6 – 10 to show up as something else. To modify these, you must go into the properties of the chart and manually adjust the color under the appearance tab.
Now that we understand the limitations and how the color scheme works, let’s use some principles of effective dashboard design to create some good color schemes. Using the ColorBrewer2, I created two palettes based on 5 qualitative or categorical groupings. I choose to select a Paired palette, which is closer to medium bodied, and a more intense palette called Set 1.
Going back to the color scheme, these palettes affect colors 5 – 9, which means Colors 1-4 and 10 need to be set to something. In my case, I choose to borrow the setting associated with the Grayscale color scheme for these colors. My reasoning is that this can be applied anywhere and grayscale is both printable and readable for color blind users. The final result is the following two color schemes:
Grayscale Base + 5 Categorical Colors using Paired Palette
Grayscale Base + 5 Categorical Colors using Set1 Palette
The result, a line chart using Set1
Stacked bar chart using Paired
In conclusion, the color scheme has potential, but it is very limited right now in terms of product scope. Only 10 colors, encompassing both data and non-data, is not enough. The ability to export the configuration to XML is fantastic. As far a wish list for further development:
- Ability to decouple the data and non-data color schemes.
- Allow different color schemes per dashboard object and not limiting 1 color scheme per dashboard.
- Incorporate ColorBrewer schemes as standard in next releases. Examples should include qualitative, sequential, and diverging.
As far as the XML files, I dont think I can attach them here, so email me if you are interetsed in the ones I just built. They can be found in the directory \Xcelsius\assets\themes\custom folder of where you installed Xcelsius.