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

Series Notes

  • Demo Configurator

Notes Appearance

Position
Bottom

In this ASP.NET AJAX Chart demo, you can see how to add Notes for the Min and Max values of LineSeries. To do that you need to set the Series -> DataNoteTextField to a valid field of the chart series. Within the NotesApperance inner tag you can specify the Note's Icon, Line and Label apperance.

Sample declaration:

<NotesAppearance Position="Bottom">
    <Icon Type="Circle" Size="8" BackgroundColor="Transparent" Visible="true">
        <Border Width="1" Color="Black" />
    </Icon>
    <Label Position="Outside" DataFormatString="{0} titles">
        <Border DashType="Solid" Color="Black" Width="1" />
        <TextStyle Bold="false" Italic="false" FontSize="12" />
    </Label>
    <Line DashType="Solid" Length="10" Width="1" Color="Black" />
</NotesAppearance>

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.HtmlChart.Functionality.SeriesNotes.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>
</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="RadHtmlChart1" OnDataBinding="RadHtmlChart1_DataBinding">
            <ChartTitle Text="Roger Federer Grand Slam tournament performance"></ChartTitle>
            <Legend>
                <Appearance Position="Bottom"></Appearance>
            </Legend>
            <PlotArea>
                <Series>
                    <telerik:LineSeries Name="Wins" DataFieldY="Win" DataNoteTextField="Extremum">
                        <NotesAppearance Position="Bottom">
                            <Icon Type="Circle" Size="8">
                                <Border Width="1" />
                            </Icon>
                            <Label Position="Outside"></Label>
                            <Line DashType="Solid" Length="10" Width="1" />
                        </NotesAppearance>
                        <Appearance>
                            <FillStyle BackgroundColor="Red" />
                        </Appearance>
                    </telerik:LineSeries>
                    <telerik:LineSeries Name="Losses" DataFieldY="Loss">
                        <Appearance>
                            <FillStyle BackgroundColor="Orange" />
                        </Appearance>
                    </telerik:LineSeries>
                </Series>
                <XAxis DataLabelsField="Year">
                    <MajorGridLines Visible="false" />
                    <MinorGridLines Visible="false" />
                </XAxis>
                <YAxis Width="0">
                    <MinorGridLines Visible="false" />
                </YAxis>
            </PlotArea>
        </telerik:RadHtmlChart>
    </div>

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ConfiguratorPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadHtmlChart1" />
                    <telerik:AjaxUpdatedControl ControlID="ConfiguratorPanel1" />
                </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">
                    <div class="fb-sized">
                        <h4>Notes Appearance</h4>
                        <span class="label">Position</span>
                        <qsf:DropDownList runat="server" ID="ddlNotesPosition" AutoPostBack="true" SelectedText="Bottom"></qsf:DropDownList>
                    </div>
                    <ul class="fb-group">
                        <li>
                            <h4>Notes Icon Appearance</h4>
                        </li>
                        <li>
                            <span class="label">Type</span>
                            <qsf:DropDownList runat="server" ID="ddlNotesIconType" AutoPostBack="true" SelectedText="Circle"></qsf:DropDownList>
                        </li>
                        <li>
                            <div class="fb-sized">
                                <qsf:NumericTextBox runat="server" ID="NotesIconSize" AutoPostBack="true" Label="Size" Value="8" MinValue="0" Size="Narrow">
                                    <NumberFormat DecimalDigits="0" />
                                </qsf:NumericTextBox>
                                <qsf:NumericTextBox runat="server" ID="NotesIconBorderWidth" AutoPostBack="true" Label="Border Width" Value="1" MinValue="0" Size="Narrow" LabelWidth="100">
                                    <NumberFormat DecimalDigits="0" />
                                </qsf:NumericTextBox>
                            </div>
                        </li>
                        <li>
                            <div class="fb-sized">
                                <qsf:ColorPicker runat="server" ID="NotesIconBorderColor" ShowIcon="true" AutoPostBack="true" Label="Border Color" Size="Narrow">
                                </qsf:ColorPicker>
                                <qsf:ColorPicker runat="server" ID="NotesIconBackground" ShowIcon="true" AutoPostBack="true" Label="Background Color" Size="Narrow">
                                </qsf:ColorPicker>
                            </div>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn3" runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <h4>Notes Line Appearance</h4>
                        </li>
                        <li>
                            <span class="label">DashType</span>
                            <qsf:DropDownList runat="server" ID="ddlNotesLineDashType" AutoPostBack="true" SelectedText="Solid"></qsf:DropDownList>
                        </li>
                        <li>
                            <div class="fb-sized">
                                <qsf:NumericTextBox runat="server" ID="NotesLineWidth" AutoPostBack="true" Label="Width" Value="1" MinValue="0" Size="Narrow">
                                    <NumberFormat DecimalDigits="0" />
                                </qsf:NumericTextBox>
                                <qsf:NumericTextBox runat="server" ID="NotesLineLength" AutoPostBack="true" Label="Length" Value="10" MinValue="0" Size="Narrow">
                                    <NumberFormat DecimalDigits="0" />
                                </qsf:NumericTextBox>
                                <qsf:ColorPicker runat="server" ID="NotesLineColor" ShowIcon="true" AutoPostBack="true" Label="Color" Size="Narrow">
                                </qsf:ColorPicker>
                            </div>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn4" runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <h4>Notes Label Appearance</h4>
                        </li>
                        <li>
                            <span class="label">Position</span>
                            <qsf:DropDownList runat="server" ID="ddlNoteLabelPosition" AutoPostBack="true" SelectedText="Outside"></qsf:DropDownList>
                        </li>
                        <li>
                            <div class="fb-sized">
                                <qsf:NumericTextBox runat="server" ID="NoteLabelRotation" AutoPostBack="true" Label="Rotation" Value="0" Size="Narrow">
                                    <NumberFormat DecimalDigits="0" PositivePattern="n&#176;" NegativePattern="-n&#176;" />
                                </qsf:NumericTextBox>
                            </div>
                        </li>
                        <li>
                            <div class="fb-sized">
                                <qsf:ColorPicker runat="server" ID="NoteLabelColor" ShowIcon="true" AutoPostBack="true" Label="Color" Size="Narrow">
                                </qsf:ColorPicker>
                                <qsf:ColorPicker runat="server" ID="NoteLabelBackColor" ShowIcon="true" AutoPostBack="true" Label="Background Color" Size="Narrow">
                                </qsf:ColorPicker>
                            </div>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance