HtmlChart - Spline and Step Line Chart

Demo Configurator

Spline Chart Settings
Step Line Chart Setting
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

The demo shows Spline and Step Line appearance in RadHtmlChart by setting the LineStyle property under the series LineAppearance tag like this:

< telerik:LineSeries >
< LineAppearance LineStyle = "Smooth" />
</ telerik:LineSeries >

The Spline appearance is configured with the Smooth option from LineStyle (or ExtendedLineStyle for Area and Line series) enumeration for the following series:

  • Area
  • Line
  • Radar Line
  • Radar Area
  • Polar Line
  • Polar Area
  • Scatter Line

The Step Line appearance could be used by setting the Step option from ExtendedLineStyle enumeration for the following series:

  • Area
  • Line

Related Resources

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" 
    Inherits="Telerik.Web.Examples.HtmlChart.ChartTypes.SplineAndStepLineChart.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>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-containers">
        <div class="demo-container size-medium">
            <telerik:RadHtmlChart runat="server" ID="SplineChart" Width="600" Skin="Silk">
                <ChartTitle Text="Spline Chart"></ChartTitle>
            </telerik:RadHtmlChart>
        </div>
        <div class="demo-container size-medium">
            <telerik:RadHtmlChart runat="server" ID="StepChart" Width="600" Skin="Silk">
                <ChartTitle Text="Step Line Chart"></ChartTitle>
            </telerik:RadHtmlChart>
        </div>
    </div>
    <telerik:RadAjaxManager runat="server" ID="theAjaxMaanger">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="splineConfig">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="splineConfig" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="SplineChart" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="stepConfig">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="stepConfig" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="StepChart" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" Skin="Default">
    </telerik:RadAjaxLoadingPanel>
    <qsf:ConfiguratorPanel ID="demoConfigurator" runat="server">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="splineConfig" runat="server" size="Medium" Title="Spline Chart Settings">
                    <qsf:ComboBox runat="server" ID="ComboBoxSplineSeries" AutoPostBack="true" Size="Medium" Label="Series Type"></qsf:ComboBox>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="stepConfig" runat="server" size="Medium" Title="Step Line Chart Setting">
                    <qsf:ComboBox runat="server" ID="ComboBoxStepLineSeries" AutoPostBack="true" Size="Medium" Label="Series Type"></qsf:ComboBox>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?