Using Custom Colors in Charts

At times it can be nice to define you own colors in charts. You may need to use a specific a corporate color scheme, make it easier to tell certain items apart or simply make the chart easier for the user to understand quickly.

It has always puzzled me how they chose the colors for some of the out-of-the-box system charts in Microsoft Dynamics CRM 2011.

Take the “Cases by Priority” chart for example.

At first glace this chart seems alright. Except when you look at how the series are colored, cases with “Normal” priority are red. In a chart like this red stands out more and most users would associate the red color with some kind of warning sign. On the other hand, the cases with priority high has the less alarming color blue.

Before we get into changing this specific chart, let’s look at some of our options for changing and modifying specific colors.

See this post for changing the complete Palette of a chart.

Export the charts xml file, open it and find the PaletteCustomColors property.

All the colors are listed as RGB colors, separated by a semicolon.

While Dynamics CRM add RGB colors to its custom palette it should be noted that Dynamics CRM accepts

  • RGB Decimal (example: 97,142,206)
  • RGB HEX (example: #4169E1)
  • Named colors (example: Blue)
  • ARGB (127,97,142,206)

The named colors could prove a lot easier to work with.

So instead of PaletteCustomColors=”97,142,206; 209,98,96; 168,203,104; etc.
we could write PaletteCustomColors=”Blue; Red; Green; etc.

Using the color names also makes it a lot easier to check if you have added them in the correct order.

This page contains an overview of the named colors available to use in charts.
http://msdn.microsoft.com/en-us/library/aa358800.aspx
Bonus: There’s one color missing from this list and that is “Transparent”. Transparent could prove very useful when you need to add data to a chart, but actually don’t want to show it. For example you may only want to display the value on a chart, but not have the bar or column visible.

Back to the example where we wanted to change the color scheme so High Priority Cases are red and Normal Priority Cases are Blue.
Since Dynamics CRM lists the series in reverse order (right to left) we know that Blue is the first color and therefore goes to the series for High Priority.

We want to change the the order of the colors so Red gets the first High Priority series. Then Blue and then Green.

To achieve that we need to edit the xml files so the first the colors of the PaletteCustomColors look like this.

Importing it back into Dynamics CRM we will get this result for the Cases By Priority Chart.

Now the High priority cases are appropriately Red and the Normal and Low priority cases have less alarming colors.

On some charts it is also possible to add specific colors to specific series, but I’ll save that for a later blog post.

Bonus: ARGB

Charts also support ARGB, which is similar to RGB, but there’s four values instead of three. The first value indicates the color’s Alpha transparency. 0 equals completely transparent. 255 is no transparency. 127 is 50% transparent etc.

Alpha transparency values are normally a percentage, but it has to be written in the RGB format which is a value between 0 and 255.

Advertisements

, , , , , , , ,

  1. #1 by J New Guy on March 20, 2013 - 1:48 pm

    I’m new to using CRM and I have what may be an easy question for you. I have a bar chart that displays individual salespeople and their total revenue. What I would like to do is change the color of each individual bar so that the lowest value displays Red and the highest displays Green. The rest should fill in like a gradient would. I’ve come close by making each bar have a gradient, but I want the gradient to spread across the entire bar chart field so that the whole bottom bar is one color and the top is another.I don’t know if this can be done, but any help would be greatly appreciated.

    • #2 by CRM Chart Guy on March 23, 2013 - 8:40 am

      Hi J New Guy
      Thanks for reading.
      Good question. I am actually not sure if it is possible.
      If I understand it correctly; if a sales person have a low score they only see the red section, and if they have a high score they see the bar go from red, all the way to green depending on how high the score is.
      I can tell you that there is no setting that’ll allow you to do that directly, but it MIGHT be possible if you combine some bar charts and stacked bar charts, one with the full gradient from red to green, and then another covering the parts you don’t want, or making the section transparent, or something. Don’t want to send you off on a wild goose chase here, so be aware that I’m certainly not sure. However, I know it’s something people ask for, so if I figure out how, I’ll be sure to blog about it. So follow me on Twitter or signup on the email list 
      You can see examples of combined charts in my posts “Advanced Goal Charts” and “Add Aggregate Total to Bar and Column charts”.

    • #3 by Håkan Ribbershed on August 20, 2014 - 1:57 am

      Hi J, could you tell me a little bit how you did this. In my search for answers i want the bars to change colour depending if they have reached their monthly goal = green but if they are below 50% of goal then it should be red.

  1. Add insight to your pipeline with Advanced Goal Charts | crmchartguy
  2. Specify Exact Colors for Each Priority in the Microsoft Dynamics CRM 2011 Case Chart | crm chart guy
  3. Everything ScaleBreak in MS CRM 2011 Charts | crm chart guy
  4. Advanced Campaign Performance Chart in MS CRM | crm chart guy
  5. Design options for bar charts and Top X bar charts | crm chart guy
  6. All things Pie Chart in Dynamics CRM | crm chart guy
  7. Annotations in MS CRM Charts | crm chart guy
  8. Funnel Charts Suck and You Shouldn’t Use Them | crm chart guy
  9. Custom Date Formats in Charts in MS Dynamics CRM | crm chart guy

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: