HtmlChart - Area Chart



Demo Configurator

Markers Styles
Line Styles
  • StyleNormal
  • Missing valuesZero
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

This example demonstrates a RadHtmlChart 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 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>
</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: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:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?