Meaningful Dashboard-Level Coloring, Color Binding, and Cross-Platform Palette (Coming soon in v14.2)

DevExpress Data Blog
26 November 2014

Color is such an important element when conveying information in any data visualization. Color can be used as an effective means to compare/contrast data at almost every level of a visualization. Colors also convey meaning in and of themselves (red – stop, green – go). Our analysis components (charts, grids, etc) have always had state-of-the art conditional formatting and custom appearance settings. Our newly minted dashboard component (at the time) benefitted from these features but only on a per-element basis. We realized that we needed a better approach to using colors at a macro level inside of a dashboard. In this release we are delivering on the promise of being a premier vendor for analysis tools by adding several features that deal with coloring.

Improved Automatic Coloring

Colors for individual values displayed within a dashboard are now automatically assigned at the dashboard level. This means that any dashboard element that is added will share the same coloring.

Automatic Dashboard Coloring

This is done automatically. Previously the same colors did not transfer across elements – this was something we have always had a desire to correct. We are not in the business of correcting things however, we aim to innovate. This automatic coloring is very customizable! You can choose the dimension whose values should be colored:

Coloring by Dimension

Customize the granularity of the coloring:

Dashboard Coloring Granularity

Or even color the data points by measure names:

Coloring by Measure

Color is now automatically an additional tool in your arsenal of data visualization techniques thanks to this fantastic update.

Binding Colors to Data

We realize that the default color setting will not always convey what you need. If you need to go beyond the automatic coloring we have provided, you can manually assign colors by selecting the colors yourself through a predefined palette:

Binding Colors

You can also select colors that better reflects the meaning of a particular value:

Advanced Color Chooser

The resulting changes can make for a more meaningful visualization. In the case below we changed the default color assigned to “Critical” to red. Red is a better color in this instance given the inherent meaning we attach to it: “Stop and look!”

Cross-Platform Palette

The best part (and this goes without saying) is that these colors will work for both the web and client dashboards:

Final Thoughts

The amount of value we are providing with this component alone is seriously worth the price of admission. This is rapidly becoming the most versatile tool for creating analysis applications your end-users will enjoy using.

As always, if there are any comments and/or questions, feel free to get a hold of me!

Seth Juarez
Twitter: @SethJuarez

Showcase Your Apps on

Highlight your business app and share your development experiences with the DevExpress community. To include your app in our upcoming App Showcase, please forward an application screenshot to and tell us which DevExpress products you currently use within your organization.
Jonatas Hudler
Jonatas Hudler

Nice one. But what about colors in gauges?

26 November 2014
Paul P (DevExpress)
Paul P (DevExpress)

@Jonatas: What type of coloring do you mean? Looks like this task corresponds to the following ticket:

28 November 2014
Jonatas Hudler
Jonatas Hudler

@Paul: Exactly, this is the Ticket! Gauge widgets are usually used to display ranges, and not a simple target (cards are better for that).

I've just left a comment on this ticket to explain better my expectations.

28 November 2014
Paul P (DevExpress)
Paul P (DevExpress)

@Jonatas: Thank you for your feedback. It looks like your suggestion is related to this thread

Please take a look at it.

1 December 2014

Please login or register to post comments.