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

Spline and Step Line Chart

  • Demo Configurator
Spline Chart Settings
Step Line Chart Setting

The demo shows Spline and Step Line appearance in the ASP.NET AJAX Chart 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>
<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>

Support & Learning Resources

Find Assistance