HtmlChart - Plot Bands

Demo Configurator

X axis plot band settings
Y axis plot band settings
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

Plot Bands are colored ranges which are used to highlight certain areas in RadHtmlChart. 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.
  • Alpha — the opacity of the plot band.
  • Color — the color of the plot band.
Note: The value of From and To properties refer to:
  • The index of the corresponding category for categorical chart types (e.g., Area, Bar, Column, etc.).
  • The X value for numerical chart types (e.g., Scatter, Scatter Line, Bubble).
  • 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 PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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-container size-wide">
        <telerik:RadHtmlChart ID="Chart" runat="server" Skin="Silk">
            <PlotArea>
                <XAxis>
                    <PlotBands>
                        <telerik:PlotBand From="1" To="2" Color="#00CCFF" Alpha="190" />
                    </PlotBands>
                    <Items>
                        <telerik:AxisItem LabelText="January" />
                        <telerik:AxisItem LabelText="February" />
                        <telerik:AxisItem LabelText="March" />
                        <telerik:AxisItem LabelText="April" />
                        <telerik:AxisItem LabelText="May" />
                    </Items>
                </XAxis>
                <YAxis>
                    <PlotBands>
                        <telerik:PlotBand From="10" To="20" Color="#CC0000" Alpha="190" />
                    </PlotBands>
                </YAxis>
                <Series>
                    <telerik:ColumnSeries Name="USA">
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="19" />
                            <telerik:CategorySeriesItem Y="16" />
                            <telerik:CategorySeriesItem Y="23" />
                            <telerik:CategorySeriesItem Y="18" />
                            <telerik:CategorySeriesItem Y="28" />
                        </SeriesItems>
                    </telerik:ColumnSeries>
                    <telerik:ColumnSeries Name="Canada">
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="15" />
                            <telerik:CategorySeriesItem Y="18" />
                            <telerik:CategorySeriesItem Y="18" />
                            <telerik:CategorySeriesItem Y="16" />
                            <telerik:CategorySeriesItem Y="25" />
                        </SeriesItems>
                    </telerik:ColumnSeries>
                    <telerik:ColumnSeries Name="Australia">
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="11" />
                            <telerik:CategorySeriesItem Y="14" />
                            <telerik:CategorySeriesItem Y="19" />
                            <telerik:CategorySeriesItem Y="15" />
                            <telerik:CategorySeriesItem Y="23" />
                        </SeriesItems>
                    </telerik:ColumnSeries>
                </Series>
            </PlotArea>
            <ChartTitle Text="Trial downloads"></ChartTitle>
            <Legend>
                <Appearance Position="Bottom"></Appearance>
            </Legend>
        </telerik:RadHtmlChart>
    </div>

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

    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" Skin="Silk"></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" WrapperCssClass="fb-sized" Label="From">
                                <NumberFormat DecimalDigits="0" />
                            </qsf:NumericTextBox>

                            <qsf:NumericTextBox ID="XAxisPlotBandTo" runat="server" AutoPostBack="true" Value="2"
                                MinValue="0" MaxValue="5" ShowSpinButtons="true" WrapperCssClass="fb-sized" Label="To">
                                <NumberFormat DecimalDigits="0" />
                            </qsf:NumericTextBox>
                        </li>
                        <li>
                            <qsf:ColorPicker ID="XAxisPlotBandColor" runat="server" AutoPostBack="true"
                                ShowIcon="true" SelectedColor="#00CCFF" Label="Color" CssClass="fb-sized">
                            </qsf:ColorPicker>

                            <qsf:NumericTextBox ID="XAxisPlotBandAlpha" runat="server" AutoPostBack="true" MaxLength="3"
                                Value="190" MinValue="0" MaxValue="255" ShowSpinButtons="true" Label="Alpha" WrapperCssClass="fb-sized">
                                <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" WrapperCssClass="fb-sized">
                                <NumberFormat DecimalDigits="0" />
                            </qsf:NumericTextBox>

                            <qsf:NumericTextBox ID="YAxisPlotBandTo" runat="server" AutoPostBack="true" Value="20" M
                                inValue="0" MaxValue="30" ShowSpinButtons="true" Label="To" WrapperCssClass="fb-sized">
                                <NumberFormat DecimalDigits="0" />
                            </qsf:NumericTextBox>
                        </li>
                        <li>
                            <qsf:ColorPicker ID="YAxisPlotBandColor" runat="server" AutoPostBack="true"
                                ShowIcon="true" SelectedColor="#cc0000" CssClass="fb-sized" Label="Color">
                            </qsf:ColorPicker>

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

Find Assistance

Help Us Improve

Was this example helpful?