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

Data Navigation

  • Demo Configurator
  • Date Format YearsDefault
  • Date Format MonthsDefault
  • Date Format WeeksDefault
  • Date Format DaysDefault

The Stock chart layout of RadHtmlChart is designed to visualize financial data over time and it also offers zooming and scrolling functionality, which is exposed by the Navigator pane, located below the main chart.

The Stock chart can be configured as follows:

  • Set the Layout property of the main chart to "Stock".
  • Bind the chart to a data source that contains DateTime values.
  • Set XAxis’ DataLabelsField property to get data from the DateTime field.
  • Configure the Navigator by choosing a proper series type and applying custom settings to the RangeSelector and the SelectionHint.

The allowed series types in the stock chart and the Navigator are:

Since Q1 2014, DateFormats allow you to set a date format for a particular BaseUnit (e.g., Years, Months, Days, etc.) of the X-axis. You can set a format like this:

< XAxis >
     < LabelsAppearance >
         < DateFormats YearsFormat = "yyyy" />
         < DateFormats MonthsFormat = "MMM-yy" />
         < DateFormats DaysFormat = "M/d" />
     </ LabelsAppearance >
</ XAxis >

As the BaseUnit scale is automatically calculated when you navigate in the chart data, one of the following DateFormats will be applied:

  • SecondsFormat
  • MinutesFormat
  • HoursFormat
  • DaysFormat
  • WeeksFormat
  • MonthsFormat
  • YearsFormat
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
  • AlcoaData.xml
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.HtmlChart.Functionality.DataNavigation.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>
    <link rel="Stylesheet" href="styles.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="CandlestickChart" DataSourceID="Xmldatasource1"
            Layout="Stock" Width="800" Height="400" Transitions="true" Skin="Silk">
            <ChartTitle Text="Alcoa Inc. (AA :NYSE)">
            </ChartTitle>
            <Legend>
                <Appearance Visible="false">
                </Appearance>
            </Legend>
            <PlotArea>
                <XAxis AxisCrossingValue="0" Color="#aaaaaa" MajorTickType="Outside" MinorTickType="None"
                    DataLabelsField="Date" Type="Date" Reversed="false">
                    <LabelsAppearance RotationAngle="0" Skip="0">
                        <TextStyle Color="#666666" />
                    </LabelsAppearance>
                    <MajorGridLines Visible="false"></MajorGridLines>
                    <MinorGridLines Visible="false"></MinorGridLines>
                    <TitleAppearance Position="Center" RotationAngle="0" Text="Date">
                        <TextStyle Color="#555555" />
                    </TitleAppearance>
                </XAxis>
                <YAxis AxisCrossingValue="0" Color="#aaaaaa" MajorTickType="Outside" MajorTickSize="4"
                    MinorTickType="None" MinorTickSize="0" Reversed="false">
                    <LabelsAppearance DataFormatString="{0:C}" Skip="0" Step="1">
                        <TextStyle Color="#666666" />
                    </LabelsAppearance>
                    <MajorGridLines Visible="true" Color="#efefef" Width="1"></MajorGridLines>
                    <MinorGridLines Visible="true" Width="0"></MinorGridLines>
                    <TitleAppearance Position="Center" RotationAngle="0" Text="Price">
                        <TextStyle Color="#555555" />
                    </TitleAppearance>
                </YAxis>
                <Series>
                    <telerik:CandlestickSeries Name="Alcoa" DownColor="#828282" DataOpenField="Open"
                        DataHighField="High" DataLowField="Low" DataCloseField="Close">
                        <Appearance>
                            <FillStyle BackgroundColor="#00ABA9"></FillStyle>
                        </Appearance>
                        <TooltipsAppearance Color="White">
                        </TooltipsAppearance>
                    </telerik:CandlestickSeries>
                </Series>
            </PlotArea>
            <Navigator Visible="true">
                <RangeSelector From="2010/01/01" To="2011/12/31" />
                <SelectionHint Visible="true" />
                <Series>
                    <telerik:AreaSeries DataFieldY="Close">
                        <Appearance FillStyle-BackgroundColor="#00aba9">
                        </Appearance>
                    </telerik:AreaSeries>
                </Series>
                <XAxis>
                    <LabelsAppearance>
                        <TextStyle Color="#666666" />
                    </LabelsAppearance>
                </XAxis>
            </Navigator>
        </telerik:RadHtmlChart>
    </div>
    <asp:XmlDataSource ID="Xmldatasource1" runat="server" DataFile="~/HtmlChart/Examples/Functionality/DataNavigation/AlcoaData.xml" />
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ConfiguratorPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="CandlestickChart" 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">
                    <ul class="fb-group">
                        <li>
                            <qsf:DropDownList runat="server" ID="DropDownListDateFormatsYears" Label="Date Format Years"
                                AutoPostBack="true">
                            </qsf:DropDownList>
                        </li>
                        <li>
                            <qsf:DropDownList runat="server" ID="DropDownListDateFormatsMonths" Label="Date Format Months"
                                AutoPostBack="true">
                            </qsf:DropDownList>
                        </li>
                        <li>
                            <qsf:DropDownList runat="server" ID="DropDownListDateFormatsWeeks" Label="Date Format Weeks"
                                AutoPostBack="true">
                            </qsf:DropDownList>
                        </li>
                        <li>
                            <qsf:DropDownList runat="server" ID="DropDownListDateFormatsDays" Label="Date Format Days"
                                AutoPostBack="true">
                            </qsf:DropDownList>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li><span class="label">Selector From:</span>
                            <qsf:DatePicker ID="DatePickerNavigatorRangeSelectorFrom" runat="server" MinDate="2000-01-03"
                                MaxDate="2012-12-31" SelectedDate="2010-01-01" ToolTip="Enter date between 01/03/2000 and 12/31/2012"
                                AutoPostBack="true">
                                <Calendar ID="Calendar1" RangeMinDate="2000-01-03" RangeMaxDate="2012-12-31" runat="server"
                                    FastNavigationStep="12">
                                </Calendar>
                                <DateInput ID="DateInput1" runat="server">
                                </DateInput>
                            </qsf:DatePicker>
                            <div class="errorMessage" style="color: Red">
                            </div>
                        </li>
                        <li><span class="label">Selector To:</span>
                            <qsf:DatePicker ID="DatePickerNavigatorRangeSelectorTo" runat="server" MinDate="2000-01-03"
                                MaxDate="2012-12-31" SelectedDate="2011-12-31" ToolTip="Enter date between 01/03/2000 and 12/31/2012"
                                AutoPostBack="true">
                                <Calendar ID="Calendar2" RangeMinDate="2000-01-03" RangeMaxDate="2012-12-31" runat="server"
                                    FastNavigationStep="12">
                                </Calendar>
                                <DateInput ID="DateInput2" runat="server">
                                </DateInput>
                            </qsf:DatePicker>
                            <div class="errorMessage" style="color: Red">
                            </div>
                        </li>
                        <li>
                            <qsf:CheckBoxList runat="server" AutoPostBack="true">
                                <asp:ListItem ID="CheckBoxNavigatorSelectionHintVisible" runat="server" Selected="true"
                                    Text="Selection Hint Visible"></asp:ListItem>
                            </qsf:CheckBoxList>
                        </li>
                        <li>
                            <qsf:ColorPicker runat="server" ID="ColorPickerAreaSeriesBackgroundColor" ShowIcon="true"
                                Label="AreaSeries Background Color" SelectedColor="#00ABA9" AutoPostBack="true">
                            </qsf:ColorPicker>
                        </li>
                        <li>
                            <qsf:DropDownList ID="DropDownListNavigatorLabelsDataFormatString" runat="server"
                                Label="Labels Data Format" AutoPostBack="true">
                            </qsf:DropDownList>
                        </li>
                        <li>
                            <qsf:NumericTextBox runat="server" ID="NumericTextBoxNavigatorLabelsRotationAngle"
                                Value="0" Label="Labels Rotation Angle" AutoPostBack="true">
                            </qsf:NumericTextBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance