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

Vertical Line Chart



  • Week 1 Line Series Settings
Markers Styles
Line Styles
  • Spin UpSpin Down
Axis Setup
  • JustifiedNot set

This example demonstrates an ASP.NET AJAX Chart control; configured as a VerticalLine chart (it uses VerticalLineSeries), which can be used for displaying categorical data. You can easily modify the appearance of a RadHtmlChart and the data it displays using the attached configurator. It allows you to set a number of properties and then see the change in the chart above.

Spline (Smooth) and Step Line appearance of the series can be configured via the LineStyle property in the LineAppearance tag by choosing one of the options from the ExtendedLineStyle enumeration:

  • Normal — the default series appearance.
  • Step — the individual series items are connected with vertical and horizontal lines to form a step-like progression.
  • Smooth — the series items are connected with a fitted curve which represents a rough approximation of the missing data points.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.HtmlChart.ChartTypes.VerticalLineChart.DefaultCS" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-wide">
        <telerik:RadHtmlChart runat="server" ID="VerticalLineChart" Width="800" Height="500" Transitions="true" Skin="Silk">
            <Appearance>
                <FillStyle BackgroundColor="Transparent"></FillStyle>
            </Appearance>
            <ChartTitle Text="Server CPU Load By Days">
                <Appearance Align="Center" BackgroundColor="Transparent" Position="Top">
                </Appearance>
            </ChartTitle>
            <Legend>
                <Appearance BackgroundColor="Transparent" Position="Bottom">
                </Appearance>
            </Legend>
            <PlotArea>
                <Appearance>
                    <FillStyle BackgroundColor="Transparent"></FillStyle>
                </Appearance>
                <XAxis AxisCrossingValue="0" Color="black" MajorTickType="Outside" MinorTickType="Outside"
                    Reversed="false">
                    <Items>
                        <telerik:AxisItem LabelText="Monday"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="Tuesday"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="Wednesday"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="Thursday"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="Friday"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="Saturday"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="Sunday"></telerik:AxisItem>
                    </Items>
                    <LabelsAppearance DataFormatString="{0}" RotationAngle="0" Skip="0" Step="1">
                    </LabelsAppearance>
                    <TitleAppearance Position="Center" RotationAngle="0" Text="Days">
                    </TitleAppearance>
                </XAxis>
                <YAxis AxisCrossingValue="0" Color="black" MajorTickSize="1" MajorTickType="Outside"
                    MaxValue="100" MinorTickSize="1" MinorTickType="Outside" MinValue="0" Reversed="false"
                    Step="25">
                    <LabelsAppearance DataFormatString="{0}%" RotationAngle="0" Skip="0" Step="1">
                    </LabelsAppearance>
                    <TitleAppearance Position="Center" RotationAngle="0" Text="CPU Load">
                    </TitleAppearance>
                </YAxis>
                <Series>
                    <telerik:VerticalLineSeries Name="Week 1">
                        <Appearance>
                            <FillStyle BackgroundColor="#5ab7de"></FillStyle>
                        </Appearance>
                        <LabelsAppearance DataFormatString="{0}%" Position="Above">
                        </LabelsAppearance>
                        <LineAppearance Width="1" />
                        <MarkersAppearance MarkersType="Circle" BackgroundColor="White" Size="8" BorderColor="#5ab7de"
                            BorderWidth="2"></MarkersAppearance>
                        <TooltipsAppearance DataFormatString="{0}%"></TooltipsAppearance>
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="35"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="52"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="18"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="39"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="10"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="6"></telerik:CategorySeriesItem>
                        </SeriesItems>
                    </telerik:VerticalLineSeries>
                    <telerik:VerticalLineSeries Name="Week 2">
                        <Appearance>
                            <FillStyle BackgroundColor="#2d6b99"></FillStyle>
                        </Appearance>
                        <LabelsAppearance DataFormatString="{0}%" Position="Above">
                        </LabelsAppearance>
                        <LineAppearance Width="1" />
                        <MarkersAppearance MarkersType="Square" BackgroundColor="#2d6b99" Size="8" BorderColor="#2d6b99"
                            BorderWidth="2"></MarkersAppearance>
                        <TooltipsAppearance DataFormatString="{0}%"></TooltipsAppearance>
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="15"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="23"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="50"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="20"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="93"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="43"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="23"></telerik:CategorySeriesItem>
                        </SeriesItems>
                    </telerik:VerticalLineSeries>
                </Series>
            </PlotArea>
        </telerik:RadHtmlChart>
    </div>
    <br />
    <br />
    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" Skin="Silk">
    </telerik:RadAjaxLoadingPanel>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="Configuratorpanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="VerticalLineChart" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <qsf:ConfiguratorPanel ID="Configuratorpanel1" runat="server" Title="Week 1 Line Series Settings">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Medium" Title="Markers Styles">
                    <ul class="fb-group">
                        <li>
                            <qsf:ComboBox runat="server" ID="ComboBoxMarkersType" AutoPostBack="true" Label="Type"></qsf:ComboBox>
                        </li>
                        <li>
                            <qsf:ColorPicker runat="server" ID="MarkersBorderColor" AutoPostBack="true" Label="Border Color" CssClass="fb-sized"></qsf:ColorPicker>
                            <qsf:ColorPicker runat="server" ID="MarkersBackgroundColor" AutoPostBack="true" Label="Background Color" CssClass="fb-sized"></qsf:ColorPicker>
                        </li>
                        <li>
                            <qsf:NumericTextBox runat="server" ID="MarkersBorderWidth" AutoPostBack="true" Value="2" MinValue="2" MaxValue="8"
                                EmptyMessage="Enter a value" Label="Border Width" WrapperCssClass="fb-sized">
                                <NumberFormat DecimalDigits="0" />
                            </qsf:NumericTextBox>
                            <qsf:NumericTextBox runat="server" ID="MarkersSize" AutoPostBack="true" Label="Size" Value="6" MinValue="6" MaxValue="14"
                                EmptyMessage="Enter a value" WrapperCssClass="fb-sized">
                                <NumberFormat DecimalDigits="0" />
                            </qsf:NumericTextBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Medium" Title="Line Styles">
                    <ul class="fb-group">
                        <li>
                            <qsf:ComboBox runat="server" ID="ComboBoxLineStyle" AutoPostBack="true" Label="Style"></qsf:ComboBox>
                        </li>
                        <li>
                            <qsf:ComboBox runat="server" ID="MissingValues" AutoPostBack="true" Label="Missing values"></qsf:ComboBox>
                        </li>
                        <li>
                            <qsf:ComboBox runat="server" ID="LinesDashType" AutoPostBack="true" Label="DashType">
                            </qsf:ComboBox>
                        </li>
                        <li>
                            <qsf:NumericTextBox runat="server" ID="LineWidth" AutoPostBack="true" Label="Width" Value="1" MinValue="1" MaxValue="5"
                                EmptyMessage="Enter a value">
                                <NumberFormat DecimalDigits="0" />
                            </qsf:NumericTextBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn3" runat="server" Size="Medium" Title="Axis Setup">
                    <ul class="fb-group">
                        <li>
                            <qsf:DropDownList runat="server" ID="JustifiedAxis" AutoPostBack="true" Label="Justified">
                                <Items>
                                    <telerik:DropDownListItem Text="Not set" Value="" />
                                    <telerik:DropDownListItem Text="True" Value="true" />
                                    <telerik:DropDownListItem Text="False" Value="false" />
                                </Items>
                            </qsf:DropDownList>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance