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

Vertical Area Chart



  • Demo Configurator
Markers Styles
Line Styles
  • StyleNormal
  • Missing valuesZero
  • DashTypeSolid
  • Spin UpSpin Down
Axis Setup
  • JustifiedNot set

This example demonstrates an ASP.NET AJAX Chart control, configured as a Vertical Area Chart (it uses VerticalAreaSeries), which can be used for displaying categorical data.

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.VerticalAreaChart.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="VerticalAreaChart" Width="800" Height="500" Skin="Silk">
            <PlotArea>
                <Series>
                    <telerik:VerticalAreaSeries Name="Sales">
                        <Appearance>
                            <FillStyle BackgroundColor="Blue"></FillStyle>
                        </Appearance>
                        <LabelsAppearance Position="Above"></LabelsAppearance>
                        <LineAppearance Width="1"></LineAppearance>
                        <MarkersAppearance MarkersType="Circle" BackgroundColor="White" Size="6" BorderColor="Blue"
                            BorderWidth="2"></MarkersAppearance>
                        <TooltipsAppearance Color="White"></TooltipsAppearance>
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="400"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="720"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="1300"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="450"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem />
                            <telerik:CategorySeriesItem Y="600"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="900"></telerik:CategorySeriesItem>
                        </SeriesItems>
                    </telerik:VerticalAreaSeries>
                    <telerik:VerticalAreaSeries Name="Expenses">
                        <Appearance>
                            <FillStyle BackgroundColor="Red"></FillStyle>
                        </Appearance>
                        <LabelsAppearance Position="Above"></LabelsAppearance>
                        <LineAppearance Width="1"></LineAppearance>
                        <MarkersAppearance MarkersType="Circle" BackgroundColor="White" Size="6" BorderColor="Red"
                            BorderWidth="2"></MarkersAppearance>
                        <TooltipsAppearance Color="White"></TooltipsAppearance>
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="700"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="420"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="1100"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="650"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem />
                            <telerik:CategorySeriesItem Y="550"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="700"></telerik:CategorySeriesItem>
                        </SeriesItems>
                    </telerik:VerticalAreaSeries>
                </Series>
                <Appearance>
                    <FillStyle BackgroundColor="Transparent"></FillStyle>
                </Appearance>
                <XAxis AxisCrossingValue="0" Color="black" MajorTickType="Outside" MinorTickType="Outside" Reversed="false">
                    <Items>
                        <telerik:AxisItem LabelText="2004"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="2005"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="2006"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="2007"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="2008"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="2009"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="2010"></telerik:AxisItem>
                    </Items>
                    <TitleAppearance Position="Center" RotationAngle="0" Text="Years"></TitleAppearance>
                    <LabelsAppearance DataFormatString="{0}" RotationAngle="0" Skip="0" Step="1">
                    </LabelsAppearance>
                </XAxis>
                <YAxis AxisCrossingValue="0" Color="black" MajorTickSize="4" MajorTickType="Outside"
                    MaxValue="1400" MinorTickType="None" MinValue="0" Reversed="false"
                    Step="200">
                    <LabelsAppearance DataFormatString="{0}" RotationAngle="0" Skip="0" Step="1">
                    </LabelsAppearance>
                    <TitleAppearance RotationAngle="0" Position="Center" Text="Finance"></TitleAppearance>
                </YAxis>
            </PlotArea>
            <Appearance>
                <FillStyle BackgroundColor="Transparent"></FillStyle>
            </Appearance>
            <ChartTitle Text="Company performance">
                <Appearance Align="Center" BackgroundColor="Transparent" Position="Top">
                </Appearance>
            </ChartTitle>
            <Legend>
                <Appearance BackgroundColor="Transparent" Position="Bottom">
                </Appearance>
            </Legend>
        </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="VerticalAreaChart" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <qsf:ConfiguratorPanel ID="Configuratorpanel1" runat="server">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Medium" Title="Markers Styles">
                    <ul class="fb-group">
                        <li>
                            <qsf:DropDownList runat="server" ID="MarkersType" AutoPostBack="true" Label="Type" />
                        </li>
                        <li>
                            <qsf:ColorPicker runat="server" ID="MarkersBorderColor" AutoPostBack="true" Label="Border color" CssClass="fb-sized" />
                            <qsf:ColorPicker runat="server" ID="MarkersBackgroundColor" AutoPostBack="true" Label="Background color" CssClass="fb-sized" />
                        </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:DropDownList runat="server" ID="ComboBoxLineStyle" AutoPostBack="true" Label="Style" />
                        </li>
                        <li>
                            <qsf:DropDownList runat="server" ID="MissingValues" AutoPostBack="true" Label="Missing values" />
                        </li>
                        <li>
                            <qsf:DropDownList runat="server" ID="LinesDashType" AutoPostBack="true" Label="DashType">
                            </qsf:DropDownList>
                        </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