ScatterLine Chart

The ScatterLine chart is very similar to the Scatter chart—it shows data as points defined by their items' values, but the points are connected by lines and thus it can account for missing values in a series. Its x-axis is numerical and does not require items.

You would usually use ScatterLine charts for showing the relation between different sets of data, for example scientific (experimental) results, or when you need to have two numerical axes on a line-type chart.

ScatterLine chart. Results from the first code snippet below

This article assumes you are familiar with the chart basics and data binding.

To create a scatter chart:

  1. add a ChartSeries to the ChartSeriesItems collection
  2. set its Type property to ChartSeriesType.ScatterLine
  3. provide a data collection to its Data property, which contains numerical data for the X and Y axes

A bubble chart that shows projected population change on a plot of life expectancy versus fertility rate

@* ScatterLine Series *@

    <ChartTitle Text="Charge current vs. charge time"></ChartTitle>
    <ChartLegend Visible="true"></ChartLegend>

        <ChartSeries Type="ChartSeriesType.ScatterLine"

        <ChartSeries Type="ChartSeriesType.ScatterLine"

        <ChartSeries Type="ChartSeriesType.ScatterLine"


        <ChartXAxis Max="100">
            <ChartXAxisTitle Text="Time"></ChartXAxisTitle>
            <ChartXAxisLabels Format="{0}m"></ChartXAxisLabels>

        <ChartYAxis Max="100">
            <ChartYAxisTitle Text="Charge"></ChartYAxisTitle>
            <ChartYAxisLabels Format="{0}%"></ChartYAxisLabels>


@code {
    public class ModelData
        public int X { get; set; }
        public int Y { get; set; }

    public List<ModelData> Series1Data = new List<ModelData>()
        new ModelData() { X = 10, Y = 10 },
        new ModelData() { X = 15, Y = 20 },
        new ModelData() { X = 20, Y = 25 },
        new ModelData() { X = 32, Y = 40 },
        new ModelData() { X = 43, Y = 50 },
        new ModelData() { X = 55, Y = 60 },
        new ModelData() { X = 60, Y = 70 },
        new ModelData() { X = 70, Y = 80 },
        new ModelData() { X = 90, Y = 100 },

    public List<ModelData> Series2Data = new List<ModelData>()
        new ModelData() { X = 10, Y = 40 },
        new ModelData() { X = 17, Y = 50 },
        new ModelData() { X = 18, Y = 70 },
        new ModelData() { X = 35, Y = 90 },
        new ModelData() { X = 47, Y = 95 },
        new ModelData() { X = 60, Y = 100 },

    public List<ModelData> Series3Data = new List<ModelData>()
        new ModelData() { X = 10, Y = 70 },
        new ModelData() { X = 13, Y = 90 },
        new ModelData() { X = 25, Y = 100 },

ScatterLine Chart Specific Appearance Settings


Each data item is denoted by a marker. You can control its settings through the child ChartSeriesMarkers tag of the series.

You can hide the markers by setting their Visible property to false.

The Size property is the size of the marker in pixels.

The Type property is a member of the Telerik.Blazor.ChartSeriesMarkersType enum:

  • Circle - the default
  • Cross
  • Square
  • Triangle

The Rotation property is the degrees with which the marker is rotated from its default orientation.


The color of the line and markers is controlled through the Color property that can take any valid CSS color (for example, #abcdef, #f00, or blue).

You can control the color of the markers by using the Background property of the nested ChartSeriesMarkers tag.


You can pass a ColorField to the chart as a part of the model, and the data points (markers) will use that color instead of the Color of the series or the Background of the markers settings.

Line Style

You can render the lines between the points with different styles. The supported styles can be set via the Style property that takes a member of Telerik.Blazor.ChartSeriesStyle enum:

  • Normal—This is the default style. It produces a straight line between data points.
  • Step—The style renders the connection between data points through vertical and horizontal lines. It is suitable for indicating that the value is constant between the changes.
  • Smooth—This style causes the Chart to display a fitted curve through data points. It is suitable when the data requires to be displayed with a curve, or when you wish to connect the points with smooth instead of straight lines.

Comparison between the line styles

See Also

In this article
Not finding the help you need? Improve this article