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

Plot Bands

  • Demo Configurator
X axis plot band settings
Y axis plot band settings

Plot Bands are colored ranges which are used to highlight certain areas in the ASP.NET AJAX Chart. You can create them by populating the PlotBands collection with <telerik:PlotBand /> items for both X and Y axis.

Each Plot Band could be configured independently by specifying the following properties:
  • From — the start of the plot band.
  • To — the end of the plot band.
  • FromDate — the end date of the plot band for a date axis.
  • ToDate — the end date of the plot band for a date axis.
  • Alpha — the opacity of the plot band.
  • Color — the color of the plot band.

The values of From and To properties refer to:

  • The index of the corresponding category for categorical chart types (e.g., Area, Bar, Column, etc.). Also applicable for a date axis.
  • The axis value for the numerical axis of a categorical chart (under <YAxis>).
  • The X or Y value for numerical chart types (e.g., Scatter, Scatter Line, Bubble).

The values of the FromDate and ToDate properties are DateTime objects for use on a date axis. These two properties are available as of R1 2019.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" 
    Inherits="Telerik.Web.Examples.HtmlChart.Functionality.PlotBands.DefaultCS" %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ 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>
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-containers">
        <div class="demo-container">
            <telerik:RadHtmlChart ID="categoricalChart" runat="server" Width="500px" Height="400px">
                <PlotArea>
                    <XAxis DataLabelsField="categories">
                        <PlotBands>
                            <telerik:PlotBand From="1" To="2" Color="#00CCFF" Alpha="190" />
                        </PlotBands>
                    </XAxis>
                    <YAxis>
                        <PlotBands>
                            <telerik:PlotBand From="10" To="20" Color="#CC0000" Alpha="190" />
                        </PlotBands>
                    </YAxis>
                    <Series>
                        <telerik:ColumnSeries Name="USA" DataFieldY="UsaData">
                        </telerik:ColumnSeries>
                        <telerik:ColumnSeries Name="Canada" DataFieldY="CanadaData">
                        </telerik:ColumnSeries>
                        <telerik:ColumnSeries Name="Australia" DataFieldY="AustraliaData">
                        </telerik:ColumnSeries>
                    </Series>
                </PlotArea>
                <ChartTitle Text="Trial downloads (categorical chart)"></ChartTitle>
                <Legend>
                    <Appearance Position="Bottom"></Appearance>
                </Legend>
            </telerik:RadHtmlChart>
        </div>

        <div class="demo-container">
            <telerik:RadHtmlChart ID="dateAxisChart" runat="server"  Width="500px" Height="400px">
                <PlotArea>
                    <XAxis DataLabelsField="dates" Type="Date" BaseUnit="Months">
                        <PlotBands>
                            <telerik:PlotBand FromDate="2018/2/1" ToDate="2018/3/1" Color="#00CCFF" Alpha="190" />
                        </PlotBands>
                        <LabelsAppearance DataFormatString="{0:MMMM}"></LabelsAppearance>
                    </XAxis>
                    <YAxis>
                        <PlotBands>
                            <telerik:PlotBand From="10" To="20" Color="#CC0000" Alpha="190" />
                        </PlotBands>
                    </YAxis>
                    <Series>
                        <telerik:ColumnSeries Name="USA" DataFieldY="UsaData">
                        </telerik:ColumnSeries>
                        <telerik:ColumnSeries Name="Canada" DataFieldY="CanadaData">
                        </telerik:ColumnSeries>
                        <telerik:ColumnSeries Name="Australia" DataFieldY="AustraliaData">
                        </telerik:ColumnSeries>
                    </Series>
                </PlotArea>
                <ChartTitle Text="Trial downloads (date axis chart)"></ChartTitle>
                <Legend>
                    <Appearance Position="Bottom"></Appearance>
                </Legend>
            </telerik:RadHtmlChart>
        </div>
    </div>

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ConfiguratorPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="categoricalChart" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="dateAxisChart" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1"></telerik:RadAjaxLoadingPanel>


    <qsf:ConfiguratorPanel runat="server" ID="ConfiguratorPanel1">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Medium" Title="X axis plot band settings">
                    <ul class="fb-group">
                        <li>
                            <qsf:NumericTextBox ID="XAxisPlotBandFrom" runat="server" AutoPostBack="true" Value="1"
                                MinValue="0" MaxValue="5" ShowSpinButtons="true" Size="Medium" Label="From">
                                <NumberFormat DecimalDigits="0" />
                            </qsf:NumericTextBox>

                            <qsf:NumericTextBox ID="XAxisPlotBandTo" runat="server" AutoPostBack="true" Value="2"
                                MinValue="0" MaxValue="5" ShowSpinButtons="true" Size="Medium" Label="To">
                                <NumberFormat DecimalDigits="0" />
                            </qsf:NumericTextBox>
                        </li>
                        <li>
                            <qsf:DatePicker runat="server" ID="DateAxisPlotBandFrom" Size="Medium" AutoPostBack="true"
                                MinDate="2018/1/1" MaxDate="2018/4/30" SelectedDate="2018/2/1" 
                                Label="From Date"></qsf:DatePicker>
                            <qsf:DatePicker runat="server" ID="DateAxisPlotBandTo" Size="Medium" AutoPostBack="true"
                                MinDate="2018/2/1" MaxDate="2018/6/30" SelectedDate="2018/3/1"
                                Label="To Date"></qsf:DatePicker>
                        </li>
                        <li>
                            <qsf:ColorPicker ID="XAxisPlotBandColor" runat="server" AutoPostBack="true"
                                ShowIcon="true" SelectedColor="#00CCFF" Label="Color" Size="Medium">
                            </qsf:ColorPicker>

                            <qsf:NumericTextBox ID="XAxisPlotBandAlpha" runat="server" AutoPostBack="true" MaxLength="3"
                                Value="190" MinValue="0" MaxValue="255" IncrementSettings-Step="20" ShowSpinButtons="true"
                                Label="Alpha" Size="Medium">
                                <NumberFormat DecimalDigits="0" />
                            </qsf:NumericTextBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>

                <qsf:ConfiguratorColumn ID="ConfiguratorColumn3" runat="server" Size="Medium" Title="Y axis plot band settings">
                    <ul class="fb-group">
                        <li>
                            <qsf:NumericTextBox ID="YAxisPlotBandFrom" runat="server" AutoPostBack="true" Value="10"
                                MinValue="0" MaxValue="30" ShowSpinButtons="true" Label="From" Size="Medium">
                                <NumberFormat DecimalDigits="0" />
                            </qsf:NumericTextBox>

                            <qsf:NumericTextBox ID="YAxisPlotBandTo" runat="server" AutoPostBack="true" Value="20" 
                                MinValue="0" MaxValue="30" ShowSpinButtons="true" Label="To" Size="Medium">
                                <NumberFormat DecimalDigits="0" />
                            </qsf:NumericTextBox>
                        </li>
                        <li style="height: 58px;"></li>
                        <li>
                            <qsf:ColorPicker ID="YAxisPlotBandColor" runat="server" AutoPostBack="true"
                                ShowIcon="true" SelectedColor="#cc0000" Size="Medium" Label="Color">
                            </qsf:ColorPicker>

                            <qsf:NumericTextBox ID="YAxisPlotBandAlpha" runat="server" AutoPostBack="true" MaxLength="3"
                                Value="190" MinValue="0" MaxValue="255" IncrementSettings-Step="20" ShowSpinButtons="true"
                                Label="Alpha" Size="Medium">
                                <NumberFormat DecimalDigits="0" />
                            </qsf:NumericTextBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance