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

Chart Element Customization

  • Demo Configurator
  • General Chart Settings
  • Series Settings
  • X Axis
  • Y Axis
  • Title
  • Color
    Pick Color(Current Color is #000000)
    Background
    Pick Color(Current Color is #FFFFFF)
  • Spin UpSpin Down
  • Spin UpSpin Down
    Spin UpSpin Down
  • General
  • Overlay GradientGlass
  • Color
    Pick Color(Current Color is #2A7A00)
    FirstItem Color
    Pick Color(Current Color is #FF0000)
  • ToolTips
  • Background
    Pick Color(Current Color is blank)
  • Labels
  • Color
    Pick Color(Current Color is #000000)
  • Spin UpSpin Down
  • Spin UpSpin Down
    Spin UpSpin Down
  • Spin UpSpin Down
  • Borders
  • Spin UpSpin Down
    Spin UpSpin Down
  • Color
    Pick Color(Current Color is #226200)
  • Hightlight Appearance
  • Spin UpSpin Down
  • Title
  • Spin UpSpin Down
  • Color
    Pick Color(Current Color is #000000)
    Spin UpSpin Down
  • Spin UpSpin Down
    Spin UpSpin Down
  • Labels
  • Color
    Pick Color(Current Color is #000000)
  • Spin UpSpin Down
  • Spin UpSpin Down
    Spin UpSpin Down
  • Spin UpSpin Down
  • Title
  • Spin UpSpin Down
  • Color
    Pick Color(Current Color is #000000)
    Spin UpSpin Down
  • Spin UpSpin Down
    Spin UpSpin Down
  • Labels
  • Color
    Pick Color(Current Color is #000000)
  • Spin UpSpin Down
  • Spin UpSpin Down
    Spin UpSpin Down
  • Spin UpSpin Down

This example demonstrates the various options for configuring the appearance of the RadHtmlChart control. You can easily test them via the configurator, provided below.

By default every configuration panel is collapsed, to change a particular setting choose the according category and expand it via the arrow button.

Since the Q1 2016 release you can control the visibility of the series in the legend through the VisibleInLegend property.

As of R2 2022 release you can change the opacity of Inactive Series by setting the InactiveOpacity property within the HighlightAppearance element.

Note: All numerical values should be set in pixels. The Label Margin and Padding will take effect only if Labels Position is not Center.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.HtmlChart.Appearance.ConfiguringAppearance.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>
    <style>
        /*YAxis.NarrowRange checkbox alignment fix in Chrome*/
        @media screen and (-webkit-min-device-pixel-ratio:0) {
            html form .checkbox {
                margin-right: 8px;
            }
        }
    </style>
</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 no-bg">
        <telerik:RadHtmlChart runat="server" ID="ColumnChart" Width="800" Height="500" Transitions="true" Skin="Silk">
            <Appearance>
                <FillStyle BackgroundColor="White"></FillStyle>
            </Appearance>
            <ChartTitle Text="GDP for Transport and Communication">
                <Appearance Align="Center" BackgroundColor="White" Position="Top">
                    <TextStyle Bold="false" FontFamily="Helvetica" Italic="false" Color="Black" FontSize="16"
                        Margin="8" Padding="8" />
                </Appearance>
            </ChartTitle>
            <Legend>
                <Appearance BackgroundColor="White" Position="Bottom" Align="Center" Orientation="Horizontal" Width="0" Height="0" OffsetX="0" OffsetY="0">
                    <TextStyle Bold="false" FontFamily="Helvetica" Italic="false" Color="Black" FontSize="12"
                        Margin="0" Padding="0" />
                </Appearance>
            </Legend>
            <PlotArea>
                <Appearance>
                    <TextStyle Margin="0 0 0 0" />
                    <FillStyle BackgroundColor="White"></FillStyle>
                </Appearance>
                <CommonTooltipsAppearance Color="White">
                    <SharedTemplate><div>GDP in #= category #</div># for (var i = 0; i < points.length; i++) { # <div>#: points[i].series.name#: #: points[i].value #</div># } #</SharedTemplate>
                </CommonTooltipsAppearance>
                <XAxis AxisCrossingValue="0" Color="#b3b3b3" MajorTickType="Outside" MinorTickType="Outside"
                    Reversed="false">
                    <Items>
                        <telerik:AxisItem LabelText="1999"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="2000"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="2001"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="2002"></telerik:AxisItem>
                    </Items>
                    <LabelsAppearance DataFormatString="{0}" RotationAngle="0" Mirror="false">
                        <TextStyle Bold="false" FontFamily="Helvetica" Color="Black" FontSize="12" Italic="false"
                            Margin="0" Padding="0" />
                    </LabelsAppearance>
                    <MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines>
                    <MinorGridLines Color="#F7F7F7" Width="1"></MinorGridLines>
                    <TitleAppearance Position="Center" RotationAngle="0" Text="Years">
                        <TextStyle Bold="false" FontFamily="Helvetica" Color="Black" FontSize="16" Italic="false"
                            Margin="2" Padding="2" />
                    </TitleAppearance>
                </XAxis>
                <YAxis AxisCrossingValue="0" Color="#b3b3b3" MajorTickSize="4" MajorTickType="Outside" NarrowRange="false"
                    MaxValue="50000" MinorTickSize="1" MinorTickType="Outside" Reversed="false"
                    Step="5000">
                    <LabelsAppearance DataFormatString="{0}" RotationAngle="0" Mirror="false">
                        <TextStyle Bold="false" FontFamily="Helvetica" Color="Black" FontSize="12" Italic="false"
                            Margin="0" Padding="0" />
                    </LabelsAppearance>
                    <MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines>
                    <MinorGridLines Color="#F7F7F7" Width="1"></MinorGridLines>
                    <TitleAppearance Position="Center" RotationAngle="0" Text="GDP">
                        <TextStyle Bold="false" FontFamily="Helvetica" Color="Black" FontSize="16" Italic="false"
                            Margin="2" Padding="2" />
                    </TitleAppearance>
                </YAxis>
                <Series>
                    <telerik:ColumnSeries Name="Transport" Stacked="false" Visible="true" VisibleInLegend="true">
                        <BorderAppearance Width="1" Color="#226200" />
                        <Appearance>
                            <FillStyle BackgroundColor="#2A7A00"></FillStyle>
                        </Appearance>
                        <LabelsAppearance DataFormatString="{0}" Position="OutsideEnd">
                            <TextStyle Bold="false" Color="Black" FontFamily="Helvetica" FontSize="12" Italic="false"
                                Margin="6" Padding="6"></TextStyle>
                        </LabelsAppearance>
                        <TooltipsAppearance Color="White" DataFormatString="{0}"></TooltipsAppearance>
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="32735.7" BackgroundColor="Red"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="37911.3"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="39462.8"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="32234.5"></telerik:CategorySeriesItem>
                        </SeriesItems>
                    </telerik:ColumnSeries>
                    <telerik:ColumnSeries Name="Community">
                        <Appearance>
                            <FillStyle BackgroundColor="#B8D936"></FillStyle>
                        </Appearance>
                        <LabelsAppearance DataFormatString="{0}" Position="OutsideEnd">
                            <TextStyle Bold="false" Color="Black" FontFamily="Helvetica" FontSize="12" Italic="false"
                                Margin="6" Padding="6"></TextStyle>
                        </LabelsAppearance>
                        <TooltipsAppearance Color="Black" DataFormatString="{0}"></TooltipsAppearance>
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="22453.9"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="24394.3"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="26333.1"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="35109"></telerik:CategorySeriesItem>
                        </SeriesItems>
                    </telerik:ColumnSeries>
                </Series>
            </PlotArea>
        </telerik:RadHtmlChart>
    </div>

    <qsf:ConfiguratorPanel ID="ConfigurationPanel1" runat="server">
        <Views>
            <qsf:View Title="General Chart Settings">
                <qsf:ConfiguratorColumn runat="server" Title="" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <h5>Background Colors</h5>
                        </li>
                        <li>
                            <qsf:ColorPicker runat="server" ID="ChartBackgroundColor" ShowIcon="true"
                                CssClass="fb-sized" AutoPostBack="true" Label="Main">
                            </qsf:ColorPicker>
                            <qsf:ColorPicker runat="server" ID="PlotAreaBackgroundColor" ShowIcon="true"
                                CssClass="fb-sized" AutoPostBack="true" Label="Plot Area">
                            </qsf:ColorPicker>
                        </li>
                        <li>
                            <h5>PlotArea Margins</h5>
                        </li>
                        <li>
                            <div class="fb-sized">
                                <qsf:NumericTextBox ID="topPlotMargin" AutoPostBack="true" runat="server" Label="Top:" ShowSpinButtons="true" MaxLength="3">
                                    <NumberFormat DecimalDigits="0" />
                                </qsf:NumericTextBox>
                            </div>
                            <div class="fb-sized">
                                <qsf:NumericTextBox ID="bottomPlotMargin" AutoPostBack="true" runat="server" Label="Bottom:" ShowSpinButtons="true" MaxLength="3">
                                    <NumberFormat DecimalDigits="0" />
                                </qsf:NumericTextBox>
                            </div>
                        </li>
                        <li>
                            <div class="fb-sized">
                                <qsf:NumericTextBox ID="leftPlotMargin" AutoPostBack="true" runat="server" Label="Left:" ShowSpinButtons="true" MaxLength="3">
                                    <NumberFormat DecimalDigits="0" />
                                </qsf:NumericTextBox>
                            </div>
                            <div class="fb-sized">
                                <qsf:NumericTextBox ID="rightPlotMargin" AutoPostBack="true" runat="server" Label="Right:" ShowSpinButtons="true" MaxLength="3">
                                    <NumberFormat DecimalDigits="0" />
                                </qsf:NumericTextBox>
                            </div>
                        </li>
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox ID="UsesTransition" Checked="true" runat="server" AutoPostBack="true" Text="Uses Transition"></asp:CheckBox></span>
                        </li>
                        <li>
                            <h5>Shared Tooltip</h5>
                        </li>
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox ID="CheckBoxShared" runat="server" AutoPostBack="true" Text="Enabled" /></span>
                        </li>
                        <li>
                            <qsf:ComboBox runat="server" ID="SharedTemplateCombo" Label="Template" AutoPostBack="true" Size="Wide"></qsf:ComboBox>
                        </li>
                        <li>
                            <qsf:ColorPicker runat="server" ID="SharedTooltipBackgroundColor" ShowIcon="true"
                                Label="Background Color" AutoPostBack="true">
                            </qsf:ColorPicker>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <h5>Title</h5>
                        </li>
                        <li>
                            <qsf:TextBox ID="ChartTitle" runat="server" AutoPostBack="true" Label="Text" Size="Auto"></qsf:TextBox></li>
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox ID="IsTitleBold" runat="server" AutoPostBack="true" Text="Bold"></asp:CheckBox></span>
                            <span class="checkbox">
                                <asp:CheckBox ID="IsTitleItalic" runat="server" AutoPostBack="true" Text="Italic"></asp:CheckBox></span>
                        </li>
                        <li>
                            <qsf:ColorPicker runat="server" ID="TitleColor" ShowIcon="true"
                                CssClass="fb-sized" AutoPostBack="true" Label="Color">
                            </qsf:ColorPicker>
                            <qsf:ColorPicker runat="server" ID="TitleBackgroundColor" ShowIcon="true"
                                CssClass="fb-sized" AutoPostBack="true" Label="Background">
                            </qsf:ColorPicker>
                        </li>
                        <li>
                            <qsf:ComboBox runat="server" ID="TitleFontFamily" AutoPostBack="true" Label="FontFamily" Size="Wide">
                            </qsf:ComboBox>
                            <qsf:NumericTextBox runat="server" ID="TitleFontSize" MinValue="1"
                                MaxValue="32" AutoPostBack="true" Label="FontSize" Size="Narrow">
                                <NumberFormat DecimalDigits="0" />
                            </qsf:NumericTextBox>
                        </li>
                        <li>
                            <qsf:ComboBox runat="server" ID="TitleAlign" AutoPostBack="true" Label="Alignment" Size="Medium"></qsf:ComboBox>
                            <qsf:ComboBox runat="server" ID="TitlePosition" AutoPostBack="true" Label="Position" Size="Medium"></qsf:ComboBox>
                        </li>
                        <li>
                            <div class="fb-sized">
                                <qsf:NumericTextBox runat="server" ID="TitleMargin" AutoPostBack="true" Label="Margin">
                                    <NumberFormat DecimalDigits="0" />
                                </qsf:NumericTextBox>
                            </div>
                            <div class="fb-sized">
                                <qsf:NumericTextBox runat="server" ID="TitlePadding" AutoPostBack="true" Label="Padding">
                                    <NumberFormat DecimalDigits="0" />
                                </qsf:NumericTextBox>
                            </div>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <h5>Legend</h5>
                        </li>

                        <li>
                            <div class="fb-sized">
                                <qsf:ComboBox runat="server" ID="LegendOrientation" AutoPostBack="true" Label="Orientation" Width="112px">
                                </qsf:ComboBox>
                            </div>
                            <div class="fb-sized">
                                <qsf:NumericTextBox runat="server" ID="LegendTextWidth" AutoPostBack="true" Label="Width">
                                    <NumberFormat DecimalDigits="0" />
                                </qsf:NumericTextBox>
                            </div>
                            <div class="fb-sized">
                                <qsf:NumericTextBox runat="server" ID="LegendTextHeight" AutoPostBack="true" Label="Height">
                                    <NumberFormat DecimalDigits="0" />
                                </qsf:NumericTextBox>
                            </div>
                        </li>
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox ID="IsLegendTextBold" runat="server" AutoPostBack="true" Text="Bold"></asp:CheckBox></span>
                            <span class="checkbox">
                                <asp:CheckBox ID="IsLegendTextItalic" runat="server" AutoPostBack="true" Text="Italic"></asp:CheckBox></span>
                        </li>
                        <li>
                            <qsf:ColorPicker runat="server" ID="LegendTextColor" ShowIcon="true"
                                CssClass="fb-sized" AutoPostBack="true" Label="Color">
                            </qsf:ColorPicker>
                            <qsf:ColorPicker runat="server" ID="LegendBackgroundColor" ShowIcon="true"
                                CssClass="fb-sized" AutoPostBack="true" Label="Background">
                            </qsf:ColorPicker>
                        </li>
                        <li>
                            <qsf:ComboBox runat="server" ID="LegendTextFontFamily" AutoPostBack="true" Label="FontFamily" Size="Wide">
                            </qsf:ComboBox>
                            <qsf:NumericTextBox runat="server" ID="LegendTextFontSize" MinValue="1"
                                MaxValue="32" AutoPostBack="true" Label="FontSize" Size="Narrow">
                                <NumberFormat DecimalDigits="0" />
                            </qsf:NumericTextBox>
                        </li>
                        <li>
                            <qsf:ComboBox runat="server" ID="LegendAlignment" AutoPostBack="true" Label="Alignment" Size="Medium">
                            </qsf:ComboBox>
                            <qsf:ComboBox runat="server" ID="LegendPosition" AutoPostBack="true" Label="Position" Size="Medium">
                            </qsf:ComboBox>
                        </li>
                        <li>
                            <div class="fb-sized">
                                <qsf:NumericTextBox runat="server" ID="LegendTextOffsetX" AutoPostBack="true" Label="OffsetX">
                                    <NumberFormat DecimalDigits="0" />
                                </qsf:NumericTextBox>
                            </div>
                            <div class="fb-sized">
                                <qsf:NumericTextBox runat="server" ID="LegendTextOffsetY" AutoPostBack="true" Label="OffsetY">
                                    <NumberFormat DecimalDigits="0" />
                                </qsf:NumericTextBox>
                            </div>
                        </li>
                        <li>
                            <div class="fb-sized">
                                <qsf:NumericTextBox runat="server" ID="LegendTextMargin" AutoPostBack="true" Label="Margin">
                                    <NumberFormat DecimalDigits="0" />
                                </qsf:NumericTextBox>
                            </div>
                            <div class="fb-sized">
                                <qsf:NumericTextBox runat="server" ID="LegendTextPadding" AutoPostBack="true" Label="Padding">
                                    <NumberFormat DecimalDigits="0" />
                                </qsf:NumericTextBox>
                            </div>
                        </li>
                        <li>
                            <qsf:Button ID="IsLegendReversed" runat="server" ToggleType="CheckBox" ButtonType="LinkButton" OnClick="IsLegendReversed_Click">
                                <ToggleStates>
                                    <telerik:RadButtonToggleState Text="Reverse Items" />
                                </ToggleStates>
                            </qsf:Button>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
            <qsf:View Title="Series Settings">
                <qsf:ConfiguratorColumn runat="server" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <h5>General</h5>
                        </li>
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox ID="IsVisible" runat="server" AutoPostBack="true" Text="Visible"></asp:CheckBox></span>
                            <span class="checkbox">
                                <asp:CheckBox ID="IsStacked" runat="server" AutoPostBack="true" Text="Stacked"></asp:CheckBox></span>
                        </li>
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox ID="IsVisibleInLegend" runat="server" AutoPostBack="true" Text="VisibleInLegend"></asp:CheckBox></span>
                        </li>

                        <li>
                            <qsf:DropDownList ID="OverlayGradientDDL" runat="server" AutoPostBack="true" Label="Overlay Gradient" Size="Wide" />
                        </li>
                        <li>
                            <qsf:ColorPicker runat="server" ID="columnsBackgroundColorChooser" ShowIcon="true"
                                CssClass="fb-sized" AutoPostBack="true" Label="Color">
                            </qsf:ColorPicker>
                            <qsf:ColorPicker runat="server" ID="firstColumnBackgroundColorChooser" ShowIcon="true"
                                CssClass="fb-sized" AutoPostBack="true" Label="FirstItem Color">
                            </qsf:ColorPicker>
                        </li>

                        <li>
                            <h5>ToolTips</h5>
                        </li>
                        <li>
                            <qsf:TextBox ID="TooltipsDataFormatString" runat="server" AutoPostBack="true" Label="Data Format String" Size="Wide"></qsf:TextBox></li>
                        <li>
                            <qsf:ColorPicker runat="server" ID="tooltipBackgroundColorChooser" ShowIcon="true"
                                CssClass="fb-sized" AutoPostBack="true" Label="Background">
                            </qsf:ColorPicker>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <h5>Labels</h5>
                        </li>
                        <li>
                            <qsf:TextBox ID="LabelsDataFormatString" runat="server" AutoPostBack="true" Label="Data Format String"></qsf:TextBox></li>
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox ID="IsLabelBold" runat="server" AutoPostBack="true" Text="Bold"></asp:CheckBox></span>
                            <span class="checkbox">
                                <asp:CheckBox ID="IsLabelItalic" runat="server" AutoPostBack="true" Text="Italic"></asp:CheckBox></span>
                        </li>
                        <li>
                            <qsf:ColorPicker runat="server" ID="LabelsColor" ShowIcon="true"
                                CssClass="fb-sized" AutoPostBack="true" Label="Color">
                            </qsf:ColorPicker>
                        </li>
                        <li>
                            <qsf:ComboBox runat="server" ID="LabelsFontFamily" AutoPostBack="true" Label="FontFamily" Size="Wide">
                            </qsf:ComboBox>
                            <qsf:NumericTextBox runat="server" ID="LabelsFontSize" MinValue="1"
                                MaxValue="32" AutoPostBack="true" Label="FontSize" Size="Narrow">
                                <NumberFormat DecimalDigits="0" />
                            </qsf:NumericTextBox>
                        </li>
                        <li>
                            <div class="fb-sized">
                                <qsf:NumericTextBox runat="server" ID="LabelsMargin" AutoPostBack="true" Label="Margin" Size="Narrow">
                                    <NumberFormat DecimalDigits="0" />
                                </qsf:NumericTextBox>
                            </div>
                            <div class="fb-sized">
                                <qsf:NumericTextBox runat="server" ID="LabelsPadding" AutoPostBack="true" Label="Padding" Size="Narrow">
                                    <NumberFormat DecimalDigits="0" />
                                </qsf:NumericTextBox>
                            </div>
                        </li>
                        <li>
                            <qsf:ComboBox runat="server" ID="LabelsPosition" AutoPostBack="true" Label="Position" Size="Wide">
                            </qsf:ComboBox>
                            <qsf:NumericTextBox runat="server" ID="LabelsRotationAngle" AutoPostBack="true" Label="Rotation Angle" Size="Narrow">
                                <NumberFormat DecimalDigits="0" />
                            </qsf:NumericTextBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <h5>Borders</h5>
                        </li>
                        <li>
                            <qsf:ComboBox runat="server" ID="SeriesBorderDashType" Label="DashType" Size="Wide" AutoPostBack="true">
                            </qsf:ComboBox>
                        </li>
                        <li>
                            <div class="fb-sized">
                                <qsf:NumericTextBox runat="server" ID="SeriesBorderWidth" AutoPostBack="true" Label="Width" Size="Narrow"
                                    MinValue="0" MaxValue="10">
                                    <NumberFormat DecimalDigits="0" />
                                </qsf:NumericTextBox>
                                <qsf:NumericTextBox runat="server" ID="SeriesBorderOpacity" AutoPostBack="true" Label="Opacity" Size="Narrow" IncrementSettings-Step="0.1"
                                    MinValue="0" MaxValue="1">
                                    <NumberFormat DecimalDigits="1" />
                                </qsf:NumericTextBox>
                            </div>

                        </li>
                        <li>
                            <div class="fb-sized">
                                <qsf:ColorPicker runat="server" ID="SeriesBorderColor" ShowIcon="true"
                                    CssClass="fb-sized" AutoPostBack="true" Label="Color" Size="Narrow">
                                </qsf:ColorPicker>
                            </div>
                        </li>
                        <li>
                            <h5>Hightlight Appearance</h5>
                        </li>
                        <li>
                            <telerik:RadRadioButtonList ID="seriesHighlight" runat="server" CssClass="radio" Direction="Horizontal" AutoPostBack="true">
                                <Items>
                                    <telerik:ButtonListItem Text="Enabled" Value="true" />
                                    <telerik:ButtonListItem Text="Disabled" Value="false" />
                                </Items>
                            </telerik:RadRadioButtonList>
                           </li>
                        <li>
                            <telerik:RadLabel ID="RadLabel1" runat="server" AssociatedControlID="seriesInactiveOpacity" Text="Inactive Series Opacity" CssClass="qsf-new custom-position">
                            </telerik:RadLabel>
                            <qsf:NumericTextBox ID="seriesInactiveOpacity" runat="server" Value="1" Width="120px" MaxValue="1" MinValue="0.1" AutoPostBack="true">
                                <NumberFormat DecimalDigits="1" />
                                <IncrementSettings Step="0.1" />
                            </qsf:NumericTextBox>

                            <style>
                                .configurator .qsf-new.custom-position:before {
                                    margin-left: 179px;
                                }
                            </style>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
            <qsf:View Title="X Axis">
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <h5>General</h5>
                        </li>
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox ID="xAxisIsReversed" runat="server" AutoPostBack="true" Text="Reverse"></asp:CheckBox></span>
                        </li>
                        <li>
                            <qsf:ColorPicker runat="server" ID="XAxisColor" ShowIcon="true"
                                CssClass="fb-sized" AutoPostBack="true" Label="Color">
                            </qsf:ColorPicker>
                            <div class="fb-sized">
                                <qsf:NumericTextBox runat="server" ID="XAxisCrossingValue" Value="8" AutoPostBack="true" Label="Crossing Value">
                                    <NumberFormat DecimalDigits="0" />
                                </qsf:NumericTextBox>
                            </div>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn3" runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <h5>Title</h5>
                        </li>
                        <li>
                            <qsf:TextBox ID="XAxisTitle" runat="server" Text="Year" AutoPostBack="true" Label="Title"></qsf:TextBox>
                        </li>
                        <li>
                            <qsf:ComboBox runat="server" ID="XAxisTitlePosition" AutoPostBack="true" Label="Position">
                            </qsf:ComboBox>
                        </li>
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox ID="IsXAxisTitleBold" runat="server" AutoPostBack="true" Text="Bold"></asp:CheckBox></span>
                            <span class="checkbox">
                                <asp:CheckBox ID="IsXAxisTitleItalic" runat="server" AutoPostBack="true" Text="Italic"></asp:CheckBox></span>
                        </li>
                        <li>
                            <qsf:ComboBox runat="server" ID="XAxisTitleFontFamily" AutoPostBack="true" Label="FontFamily" Size="Wide">
                            </qsf:ComboBox>
                            <qsf:NumericTextBox runat="server" ID="XAxisTitleFontSize" MinValue="1"
                                MaxValue="32" AutoPostBack="true" Label="FontSize" Size="Narrow">
                                <NumberFormat DecimalDigits="0" />
                            </qsf:NumericTextBox>
                        </li>
                        <li>
                            <qsf:ColorPicker runat="server" ID="XAxisTitleColor" ShowIcon="true"
                                CssClass="fb-sized" AutoPostBack="true" Label="Color">
                            </qsf:ColorPicker>
                            <div class="fb-sized">
                                <qsf:NumericTextBox runat="server" ID="XAxisTitleRotationAngle" AutoPostBack="true" Label="Rotation Angle">
                                    <NumberFormat DecimalDigits="0" />
                                </qsf:NumericTextBox>
                            </div>
                        </li>
                        <li>
                            <div class="fb-sized">
                                <qsf:NumericTextBox runat="server" ID="XAxisTitleMargin" AutoPostBack="true" Label="Margin">
                                    <NumberFormat DecimalDigits="0" />
                                </qsf:NumericTextBox>
                            </div>
                            <div class="fb-sized">
                                <qsf:NumericTextBox runat="server" ID="XAxisTitlePadding" AutoPostBack="true" Label="Padding">
                                    <NumberFormat DecimalDigits="0" />
                                </qsf:NumericTextBox>
                            </div>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn4" runat="server" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <h5>Major Grid Lines</h5>
                        </li>
                        <li>
                            <qsf:ColorPicker runat="server" ID="XAxisMajorGridLinesColor" ShowIcon="true"
                                CssClass="fb-sized" AutoPostBack="true" Label="Color">
                            </qsf:ColorPicker>
                            <div class="fb-sized">
                                <qsf:NumericTextBox runat="server" ID="XAxisMajorGridLinesWidth" AutoPostBack="true" Label="Width">
                                    <NumberFormat DecimalDigits="0" />
                                </qsf:NumericTextBox>
                            </div>
                        </li>
                        <li>
                            <qsf:ComboBox runat="server" ID="XAxisMajorGridLinesDashType" Label="DashType" Size="Wide" AutoPostBack="true">
                            </qsf:ComboBox>
                        </li>
                        <li>
                            <h5>Minor Grid Lines</h5>
                        </li>
                        <li>
                            <qsf:ColorPicker runat="server" ID="XAxisMinorGridLinesColor" ShowIcon="true"
                                CssClass="fb-sized" AutoPostBack="true" Label="Color">
                            </qsf:ColorPicker>
                            <div class="fb-sized">
                                <qsf:NumericTextBox runat="server" ID="XAxisMinorGridLinesWidth" AutoPostBack="true" Label="Width">
                                    <NumberFormat DecimalDigits="0" />
                                </qsf:NumericTextBox>
                            </div>
                        </li>
                        <li>
                            <qsf:ComboBox runat="server" ID="XAxisMinorGridLinesDashType" Label="DashType" Size="Wide" AutoPostBack="true">
                            </qsf:ComboBox>
                        </li>
                        <li>
                            <h5>Major Ticks</h5>
                        </li>
                        <li>
                            <qsf:ComboBox runat="server" ID="XAxisMajorTickType" AutoPostBack="true" Label="Type" Size="Narrow">
                            </qsf:ComboBox>
                            <qsf:NumericTextBox runat="server" ID="XAxisMajorTickSize" AutoPostBack="true" Label="Size" Size="Narrow">
                            </qsf:NumericTextBox>
                        </li>
                        <li>
                            <h5>Minor Ticks</h5>
                        </li>
                        <li>
                            <qsf:ComboBox runat="server" ID="XAxisMinorTickType" AutoPostBack="true" Label="Type" Size="Narrow">
                            </qsf:ComboBox>
                            <qsf:NumericTextBox runat="server" ID="XAxisMinorTickSize" AutoPostBack="true" Label="Size" Size="Narrow">
                            </qsf:NumericTextBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn5" runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <h5>Labels</h5>
                        </li>
                        <li>
                            <qsf:TextBox ID="XAxisLabelsDataFormatString" runat="server" AutoPostBack="true" Label="Data Format String"></qsf:TextBox></li>
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox ID="IsXAxisLabelBold" runat="server" AutoPostBack="true" Text="Bold"></asp:CheckBox></span>
                            <span class="checkbox">
                                <asp:CheckBox ID="IsXAxisLabelItalic" runat="server" AutoPostBack="true" Text="Italic"></asp:CheckBox></span>
                            <span class="checkbox">
                                <asp:CheckBox ID="CheckBoxXAxisMirror" runat="server" AutoPostBack="true" Text="Mirrored"></asp:CheckBox></span>
                        </li>
                        <li>
                            <qsf:ColorPicker runat="server" ID="XAxisLabelsColor" ShowIcon="true"
                                CssClass="fb-sized" AutoPostBack="true" Label="Color">
                            </qsf:ColorPicker>
                        </li>
                        <li>
                            <qsf:ComboBox runat="server" ID="XAxisLabelsFontFamily" AutoPostBack="true" Label="FontFamily" Size="Wide">
                            </qsf:ComboBox>
                            <qsf:NumericTextBox runat="server" ID="XAxisLabelsFontSize" MinValue="1"
                                MaxValue="32" AutoPostBack="true" Label="FontSize" Size="Narrow">
                                <NumberFormat DecimalDigits="0" />
                            </qsf:NumericTextBox>
                        </li>
                        <li>
                            <div class="fb-sized">
                                <qsf:NumericTextBox runat="server" ID="XAxisLabelsMargin" AutoPostBack="true" Label="Margin" Size="Narrow">
                                    <NumberFormat DecimalDigits="0" />
                                </qsf:NumericTextBox>
                            </div>
                            <div class="fb-sized">
                                <qsf:NumericTextBox runat="server" ID="XAxisLabelsPadding" AutoPostBack="true" Label="Padding" Size="Narrow">
                                    <NumberFormat DecimalDigits="0" />
                                </qsf:NumericTextBox>
                            </div>
                        </li>
                        <li>
                            <div class="fb-sized">
                                <qsf:NumericTextBox runat="server" ID="XAxisLabelsRotationAngle" AutoPostBack="true" Label="Rotation Angle" Size="Narrow">
                                    <NumberFormat DecimalDigits="0" />
                                </qsf:NumericTextBox>
                            </div>
                            <div class="fb-sized">
                                <qsf:ComboBox runat="server" ID="XAxisLabelsPosition" AutoPostBack="true" Label="Position" Size="Narrow">
                                </qsf:ComboBox>
                            </div>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
            <qsf:View Title="Y Axis">
                <qsf:ConfiguratorColumn runat="server" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <h5>General</h5>
                        </li>
                        <li>
                            <qsf:ColorPicker runat="server" ID="YAxisColor" ShowIcon="true"
                                CssClass="fb-sized" AutoPostBack="true" Label="Color">
                            </qsf:ColorPicker>
                        </li>
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox ID="YAxisIsReversed" runat="server" AutoPostBack="true" Text="Reverse"></asp:CheckBox></span>
                            <span class="checkbox">
                                <asp:CheckBox ID="YAxisNarrowRange" runat="server" AutoPostBack="true" Text="NarrowRange"></asp:CheckBox></span>
                        </li>
                        <li>
                            <div class="fb-sized">
                                <qsf:NumericTextBox runat="server" ID="YAxisMinimumValue" AutoPostBack="true" Label="Min Value">
                                    <NumberFormat DecimalDigits="0" />
                                </qsf:NumericTextBox>
                            </div>
                            <div class="fb-sized">
                                <qsf:NumericTextBox runat="server" ID="YAxisMaximumValue" AutoPostBack="true" Label="Max Value">
                                    <NumberFormat DecimalDigits="0" />
                                </qsf:NumericTextBox>
                            </div>
                        </li>
                        <li>
                            <div class="fb-sized">
                                <qsf:NumericTextBox runat="server" ID="YAxisStep" AutoPostBack="true" Label="Step">
                                    <NumberFormat DecimalDigits="0" />
                                </qsf:NumericTextBox>
                            </div>
                            <div class="fb-sized">
                                <qsf:NumericTextBox runat="server" ID="YAxisCrossingValue" AutoPostBack="true" Label="Crossing Value">
                                    <NumberFormat DecimalDigits="0" />
                                </qsf:NumericTextBox>
                            </div>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <h5>Title</h5>
                        </li>
                        <li>
                            <qsf:TextBox ID="YAxisTitle" runat="server" AutoPostBack="true" Label="Title"></qsf:TextBox>
                        </li>
                        <li>
                            <qsf:ComboBox runat="server" ID="YAxisTitlePosition" AutoPostBack="true" Label="Position">
                            </qsf:ComboBox>
                        </li>
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox ID="IsYAxisTitleBold" runat="server" AutoPostBack="true" Text="Bold"></asp:CheckBox></span>
                            <span class="checkbox">
                                <asp:CheckBox ID="IsYAxisTitleItalic" runat="server" AutoPostBack="true" Text="Italic"></asp:CheckBox></span>
                        </li>
                        <li>
                            <qsf:ComboBox runat="server" ID="YAxisTitleFontFamily" AutoPostBack="true" Label="FontFamily" Size="Wide">
                            </qsf:ComboBox>
                            <qsf:NumericTextBox runat="server" ID="YAxisTitleFontSize" MinValue="1"
                                MaxValue="32" AutoPostBack="true" Label="FontSize" Size="Narrow">
                                <NumberFormat DecimalDigits="0" />
                            </qsf:NumericTextBox>
                        </li>
                        <li>
                            <qsf:ColorPicker runat="server" ID="YAxisTitleColor" ShowIcon="true"
                                CssClass="fb-sized" AutoPostBack="true" Label="Color">
                            </qsf:ColorPicker>
                            <div class="fb-sized">
                                <qsf:NumericTextBox runat="server" ID="YAxisTitleRotationAngle" AutoPostBack="true" Label="Rotation Angle">
                                    <NumberFormat DecimalDigits="0" />
                                </qsf:NumericTextBox>
                            </div>
                        </li>
                        <li>
                            <div class="fb-sized">
                                <qsf:NumericTextBox runat="server" ID="YAxisTitleMargin" AutoPostBack="true" Label="Margin">
                                    <NumberFormat DecimalDigits="0" />
                                </qsf:NumericTextBox>
                            </div>
                            <div class="fb-sized">
                                <qsf:NumericTextBox runat="server" ID="YAxisTitlePadding" AutoPostBack="true" Label="Padding">
                                    <NumberFormat DecimalDigits="0" />
                                </qsf:NumericTextBox>
                            </div>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <h5>Major Grid Lines</h5>
                        </li>
                        <li>
                            <qsf:ColorPicker runat="server" ID="YAxisMajorGridLinesColor" ShowIcon="true"
                                CssClass="fb-sized" AutoPostBack="true" Label="Color">
                            </qsf:ColorPicker>
                            <div class="fb-sized">
                                <qsf:NumericTextBox runat="server" ID="YAxisMajorGridLinesWidth" AutoPostBack="true" Label="Width">
                                    <NumberFormat DecimalDigits="0" />
                                </qsf:NumericTextBox>
                            </div>
                        </li>
                        <li>
                            <qsf:ComboBox runat="server" ID="YAxisMajorGridLinesDashType" Label="DashType" Size="Wide" AutoPostBack="true">
                            </qsf:ComboBox>
                        </li>
                        <li>
                            <h5>Minor Grid Lines</h5>
                        </li>
                        <li>
                            <qsf:ColorPicker runat="server" ID="YAxisMinorGridLinesColor" ShowIcon="true"
                                CssClass="fb-sized" AutoPostBack="true" Label="Color">
                            </qsf:ColorPicker>
                            <div class="fb-sized">
                                <qsf:NumericTextBox runat="server" ID="YAxisMinorGridLinesWidth" AutoPostBack="true" Label="Width">
                                    <NumberFormat DecimalDigits="0" />
                                </qsf:NumericTextBox>
                            </div>
                        </li>
                        <li>
                            <qsf:ComboBox runat="server" ID="YAxisMinorGridLinesDashType" Label="DashType" Size="Wide" AutoPostBack="true">
                            </qsf:ComboBox>
                        </li>
                        <li>
                            <h5>Major Ticks</h5>
                        </li>
                        <li>
                            <qsf:ComboBox runat="server" ID="YAxisMajorTickType" AutoPostBack="true" Label="Type" Size="Narrow">
                            </qsf:ComboBox>
                            <qsf:NumericTextBox runat="server" ID="YAxisMajorTickSize" AutoPostBack="true" Label="Size" Size="Narrow">
                            </qsf:NumericTextBox>
                        </li>
                        <li>
                            <h5>Minor Ticks</h5>
                        </li>
                        <li>
                            <qsf:ComboBox runat="server" ID="YAxisMinorTickType" AutoPostBack="true" Label="Type" Size="Narrow">
                            </qsf:ComboBox>
                            <qsf:NumericTextBox runat="server" ID="YAxisMinorTickSize" AutoPostBack="true" Label="Size" Size="Narrow">
                            </qsf:NumericTextBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <h5>Labels</h5>
                        </li>
                        <li>
                            <qsf:TextBox ID="YAxisLabelsDataFormatString" runat="server" AutoPostBack="true" Label="Data Format String"></qsf:TextBox></li>
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox ID="IsYAxisLabelBold" runat="server" AutoPostBack="true" Text="Bold"></asp:CheckBox></span>
                            <span class="checkbox">
                                <asp:CheckBox ID="IsYAxisLabelItalic" runat="server" AutoPostBack="true" Text="Italic"></asp:CheckBox></span>
                            <span class="checkbox">
                                <asp:CheckBox ID="CheckBoxYAxisMirror" runat="server" AutoPostBack="true" Text="Mirrored"></asp:CheckBox></span>
                        </li>
                        <li>
                            <qsf:ColorPicker runat="server" ID="YAxisLabelsColor" ShowIcon="true"
                                CssClass="fb-sized" AutoPostBack="true" Label="Color">
                            </qsf:ColorPicker>
                        </li>
                        <li>
                            <qsf:ComboBox runat="server" ID="YAxisLabelsFontFamily" AutoPostBack="true" Label="FontFamily" Size="Wide">
                            </qsf:ComboBox>
                            <qsf:NumericTextBox runat="server" ID="YAxisLabelsFontSize" MinValue="1"
                                MaxValue="32" AutoPostBack="true" Label="FontSize" Size="Narrow">
                                <NumberFormat DecimalDigits="0" />
                            </qsf:NumericTextBox>
                        </li>
                        <li>
                            <div class="fb-sized">
                                <qsf:NumericTextBox runat="server" ID="YAxisLabelsMargin" AutoPostBack="true" Label="Margin" Size="Narrow">
                                    <NumberFormat DecimalDigits="0" />
                                </qsf:NumericTextBox>
                            </div>
                            <div class="fb-sized">
                                <qsf:NumericTextBox runat="server" ID="YAxisLabelsPadding" AutoPostBack="true" Label="Padding" Size="Narrow">
                                    <NumberFormat DecimalDigits="0" />
                                </qsf:NumericTextBox>
                            </div>
                        </li>
                        <li>
                            <div class="fb-sized">
                                <qsf:NumericTextBox runat="server" ID="YAxisLabelsRotationAngle" AutoPostBack="true" Label="Rotation Angle" Size="Narrow">
                                    <NumberFormat DecimalDigits="0" />
                                </qsf:NumericTextBox>
                            </div>
                            <div class="fb-sized">
                                <qsf:ComboBox runat="server" ID="YAxisLabelsPosition" AutoPostBack="true" Label="Position" Size="Narrow">
                                </qsf:ComboBox>
                            </div>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance