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

    Area Chart

    Years200420052006200720082009201040070072042013001100450650006005509007000200400600800100012001400FinanceCompany performanceSalesExpenses


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

    This example demonstrates an ASP.NET AJAX Chart control, configured as an Area Chart (it uses AreaSeries), 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 since Q1 2014 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.AreaChart.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="AreaChart" Width="800" Height="500" Skin="Silk">
                <PlotArea>
                    <Series>
                        <telerik:AreaSeries 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:AreaSeries>
                        <telerik:AreaSeries 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:AreaSeries>
                    </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="AreaChart" />
                    </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