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

Scatter Line Chart

  • Demo Configurator
Markers Styles
Line Styles
  • StyleNormal
  • Missing valuesInterpolate
  • DashTypeSolid
  • Spin UpSpin Down

The demo shows a Scatter Line series in RadHtmlChart, which is useful for displaying numerical data.

Spline (Smooth) and normal 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 LineStyle enumeration:

  • Normal — the default series appearance.
  • Smooth — the series items are connected with a fitted curve which represents a rough approximation of the missing data points.

Related Resources

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.HtmlChart.ChartTypes.ScatterLineChart.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-container size-wide">
        <telerik:RadHtmlChart runat="server" ID="ScatterLineChart" Width="800" Height="500" Skin="Silk">
            <PlotArea>
                <Series>
                    <telerik:ScatterLineSeries Name="0.8C">
                        <SeriesItems>
                            <telerik:ScatterSeriesItem X="10" Y="10"></telerik:ScatterSeriesItem>
                            <telerik:ScatterSeriesItem X="15" Y="20"></telerik:ScatterSeriesItem>
                            <telerik:ScatterSeriesItem />
                            <telerik:ScatterSeriesItem X="32" Y="40"></telerik:ScatterSeriesItem>
                            <telerik:ScatterSeriesItem X="43" Y="50"></telerik:ScatterSeriesItem>
                            <telerik:ScatterSeriesItem X="55" Y="60"></telerik:ScatterSeriesItem>
                            <telerik:ScatterSeriesItem X="60" Y="70"></telerik:ScatterSeriesItem>
                        </SeriesItems>
                        <LabelsAppearance DataFormatString="{1}% in {0} minutes" Position="Below"></LabelsAppearance>
                        <MarkersAppearance MarkersType="Square" BackgroundColor="#5cb8e3" Size="8" BorderColor="#5cb8e3" BorderWidth="2"></MarkersAppearance>
                        <TooltipsAppearance BackgroundColor="#5cb8e3" Color="White" DataFormatString="{1}% in {0} minutes"></TooltipsAppearance>
                    </telerik:ScatterLineSeries>
                    <telerik:ScatterLineSeries Name="1.6C">
                        <SeriesItems>
                            <telerik:ScatterSeriesItem X="10" Y="40"></telerik:ScatterSeriesItem>
                            <telerik:ScatterSeriesItem X="17" Y="50"></telerik:ScatterSeriesItem>
                            <telerik:ScatterSeriesItem X="18" Y="65"></telerik:ScatterSeriesItem>
                            <telerik:ScatterSeriesItem />
                            <telerik:ScatterSeriesItem X="35" Y="90"></telerik:ScatterSeriesItem>
                            <telerik:ScatterSeriesItem X="47" Y="95"></telerik:ScatterSeriesItem>
                            <telerik:ScatterSeriesItem X="60" Y="100"></telerik:ScatterSeriesItem>
                        </SeriesItems>
                        <LabelsAppearance DataFormatString="{1}% in {0} minutes" Position="Below"></LabelsAppearance>
                        <MarkersAppearance Size="8" BorderColor="#90b720" BorderWidth="2"></MarkersAppearance>
                        <TooltipsAppearance BackgroundColor="#90b720" Color="White" DataFormatString="{1}% in {0} minutes"></TooltipsAppearance>
                    </telerik:ScatterLineSeries>
                    <telerik:ScatterLineSeries Name="3.1C">
                        <SeriesItems>
                            <telerik:ScatterSeriesItem X="10" Y="70"></telerik:ScatterSeriesItem>
                            <telerik:ScatterSeriesItem X="13" Y="90"></telerik:ScatterSeriesItem>
                            <telerik:ScatterSeriesItem X="25" Y="100"></telerik:ScatterSeriesItem>
                        </SeriesItems>
                        <LabelsAppearance DataFormatString="{1}% in {0} minutes" Position="Below"></LabelsAppearance>
                        <MarkersAppearance MarkersType="Square" BackgroundColor="#eb6d17" Size="8" BorderColor="#eb6d17" BorderWidth="2"></MarkersAppearance>
                        <TooltipsAppearance BackgroundColor="#eb6d17" Color="White" DataFormatString="{1}% in {0} minutes"></TooltipsAppearance>
                    </telerik:ScatterLineSeries>
                </Series>
                <XAxis AxisCrossingValue="0" Color="#b3b3b3" MajorTickType="Outside" MinorTickType="Outside" MinValue="0" MaxValue="90" Step="10">
                    <LabelsAppearance DataFormatString="{0}m" RotationAngle="0"></LabelsAppearance>
                    <MajorGridLines Color="#EFEFEF"></MajorGridLines>
                    <MinorGridLines Color="#F7F7F7"></MinorGridLines>
                    <TitleAppearance Position="Center" Text="Time"></TitleAppearance>
                </XAxis>
                <YAxis Color="#b3b3b3" MajorTickSize="1" MajorTickType="Outside" MaxValue="100" MinorTickSize="1" MinorTickType="Outside" MinValue="0" Step="20">
                    <LabelsAppearance DataFormatString="{0}%" RotationAngle="0"></LabelsAppearance>
                    <MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines>
                    <MinorGridLines Color="#F7F7F7" Width="1"></MinorGridLines>
                    <TitleAppearance Position="Center" Text="Charge"></TitleAppearance>
                </YAxis>
            </PlotArea>
            <ChartTitle Text="Charge current vs. charge time"></ChartTitle>
            <Legend>
                <Appearance Position="Bottom"></Appearance>
            </Legend>
        </telerik:RadHtmlChart>
    </div>
    <telerik:RadAjaxManager runat="server" ID="theAjaxMaanger">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="demoConfigurator">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="demoConfigurator" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="ScatterLineChart" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" Skin="Silk">
    </telerik:RadAjaxLoadingPanel>
    <qsf:ConfiguratorPanel ID="demoConfigurator" 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="LineStyle" 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:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance