Skip to main content

Customize Dashboard Colors

  • 3 minutes to read

The Web Dashboard provides the capability to manage the coloring of dashboard item elements in the Designer mode. To learn more, see Coloring.

The ASPxClientDashboard allows you to color specified dashboard item elements (for instance, chart series points, pie segments or scatter chart points) at runtime by handling the ASPxClientDashboard.ItemElementCustomColor event. For instance, this can be used to color specified elements based on their values. The image below illustrates the Chart dashboard item whose bars are colored based on the their values: values that exceed 200k are colored in green, values below 100k are colored in red, and values that fall into the range between 100k and 200k are colored in gray.


The ASPxClientDashboardItemElementCustomColorEventArgs class exposes the following members that allow you to color the required element.


By default, the Chart dashboard item colors lines (or fills areas) for the Line/Area series types using the color of the first series point. For these lines/areas, the ASPxClientDashboardItemElementCustomColorEventArgs.GetTargetElement method returns a tuple that does not contain the ASPxClientDashboardItemDataAxisPoint on the DashboardDataAxisNames.ChartArgumentAxis.


The following example demonstrates how to color dashboard item elements using the ASPxClientDashboard.ItemElementCustomColor event.

In this example, chart series points, whose values exceed specified thresholds, are colored in green. Chart series points, whose values fall below specified thresholds, are colored in red.Pie segments, whose contributions in total fall below the specified threshold, are colored in orange.

View Example

function setColors(args) {
// ...
    if (args.ItemName == "chartDashboardItem1") {
        var country = currentElement.GetAxisPoint(DashboardDataAxisNames.ChartSeriesAxis).GetValue();
        var value = chartClientData.GetSlice(currentElement.GetAxisPoint(argumentAxis)).
        if (country == "UK" && value > 50000 || country == "USA" && value > 100000)
    // ...