New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Conditional Item Colorization

Warnings
Errors
Warnings above 85
Errors above 85

All ASP.NET AJAX Chart series expose the ColorField property. It allows the developer to set a custom color for a given item in a data-bound chart. It colorizes the entire bar for BarSeries and ColumnSeries; PieSeries and DonutSeries have the feature from their inception and it changes the color for the corresponding sector. For other chart types like AreaSeries, LineSeries, ScatterLineSeries this property changes the color of their markers only.

The color shown in the default legend is the main color chosen for the series (Series.Appearance.FillStyle.BackgroundColor). The additional color present in the data source are not shown in the built-in legend. Therefore, this demo shows a custom legend designed to match the scenario.

To use the default color of the series the data source must have an empty string in the ColorField column.

When the number of errors and warnings per week exceeds 85, the respective bars of the chart will change their colors to bring the user's attention to them.

The data in the demo is generated randomly, if you do not see colorized bars, reload the page to get a new set of values.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • Styles.css
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.HtmlChart.Functionality.CustomBarColor.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-wide">
        <telerik:RadHtmlChart runat="server" ID="RadHtmlChart2" Height="400" Skin="Silk">
            <PlotArea>
                <Series>
                    <telerik:ColumnSeries Name="Warnings" DataFieldY="WarningsCount" ColorField="WarningsColor">
                        <Appearance>
                            <FillStyle BackgroundColor="#30abf2" />
                        </Appearance>
                        <TooltipsAppearance Color="White" />
                    </telerik:ColumnSeries>
                    <telerik:ColumnSeries Name="Errors" DataFieldY="ErrorsCount" ColorField="ErrorsColor">
                        <Appearance>
                            <FillStyle BackgroundColor="#006caa" />
                        </Appearance>
                        <TooltipsAppearance Color="White" />
                    </telerik:ColumnSeries>
                </Series>
                <XAxis DataLabelsField="Week" Color="#aaaaaa">
                    <MajorGridLines Color="#cccccc" />
                    <MinorGridLines Color="#eeeeee" />
                    <LabelsAppearance DataFormatString="Week {0}">
                        <TextStyle Color="#666666" />
                    </LabelsAppearance>
                </XAxis>
                <YAxis Color="#aaaaaa">
                    <LabelsAppearance>
                        <TextStyle Color="#666666" />
                    </LabelsAppearance>
                    <MajorGridLines Color="#cccccc" />
                    <MinorGridLines Color="#eeeeee" />
                    <TitleAppearance Text="Number of warnings / errors">
                        <TextStyle Color="#555555" />
                    </TitleAppearance>
                </YAxis>
            </PlotArea>
            <Legend>
                <Appearance Visible="false" />
            </Legend>
            <ChartTitle Text="Automated test results">
            </ChartTitle>
        </telerik:RadHtmlChart>
        <div class="customLegendWrapper">
            <div class="customLegend">
                <div class="warnings">
                    <div>
                    </div>
                    Warnings
                </div>
                <div class="errors">
                    <div>
                    </div>
                    Errors
                </div>
                <div class="warningsHigh">
                    <div>
                    </div>
                    Warnings above 85
                </div>
                <div class="errorsHigh">
                    <div>
                    </div>
                    Errors above 85
                </div>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance