HtmlChart - Chart Element Customization

Demo Configurator

  • Title
  • Color
    Pick Color(Current Color is #000000)
    Background
    Pick Color(Current Color is #FFFFFF)
  • General
  • Overlay GradientGlass
  • Color
    Pick Color(Current Color is #2A7A00)
    First Item 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
  • Title
  • Color
    Pick Color(Current Color is #000000)
    Spin UpSpin Down
  • Labels
  • Color
    Pick Color(Current Color is #000000)
  • Spin UpSpin Down
  • Title
  • Color
    Pick Color(Current Color is #000000)
    Spin UpSpin Down
  • Labels
  • Color
    Pick Color(Current Color is #000000)
  • Spin UpSpin Down
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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.

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 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>
    <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">
                        <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>
                    </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="First Item 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: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>
                            <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>
                            <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>
                            <qsf:NumericTextBox runat="server" ID="XAxisLabelsRotationAngle" AutoPostBack="true" Label="Rotation Angle" Size="Narrow">
                                <NumberFormat DecimalDigits="0" />
                            </qsf:NumericTextBox>
                        </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>
                            <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>
                            <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>
                            <qsf:NumericTextBox runat="server" ID="YAxisLabelsRotationAngle" AutoPostBack="true" Label="Rotation Angle" Size="Narrow">
                                <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?