Line Chart

The Blazor Line chart displays data as continuous lines that pass through points defined by the values of their items. It is useful for rendering a trend over time and comparing several sets of similar data.

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

To create a line chart:

1. add a ChartSeries to the ChartSeriesItems collection
2. set its Type property to ChartSeriesType.Line
3. provide a data collection to its Data property
4. optionally, provide data for the x-axis Categories

A line chart that shows product revenues

Line series

<TelerikChart>
    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Line" Name="Product 1" Data="@series1Data">
        </ChartSeries>
        <ChartSeries Type="ChartSeriesType.Line" Name="Product 2" Data="@series2Data">
        </ChartSeries>
    </ChartSeriesItems>

    <ChartCategoryAxes>
        <ChartCategoryAxis Categories="@xAxisItems"></ChartCategoryAxis>
    </ChartCategoryAxes>

    <ChartTitle Text="Quarterly revenue per product"></ChartTitle>

    <ChartLegend Position="ChartLegendPosition.Right">
    </ChartLegend>
</TelerikChart>

@code {
    public List<object> series1Data = new List<object>() { 10, 2, 5, 6 };
    public List<object> series2Data = new List<object>() { 5, 8, 2, 7 };
    public string[] xAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" };
}

Line Chart Specific Appearance Settings

Markers

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.

Color

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.

ColorField

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.

Missing Values

If some values are missing from the series data (they are null), you can have the chart work around this by setting the MissingValues property of the series to the desired behavior (member of the Telerik.Blazor.ChartSeriesMissingValues enum):

• Zero - the default behavior. The line goes to the 0 value mark.
• Interpolate - the line will go through the interpolated value of the missing data points and connect to the next data point with a value.
• Gap - there will be no line for the category that misses a value.

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. Supported for categorical types of Line charts only, but not for scatter charts.

• 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. Not supported with stacked series with missing values.

Customize Chart Elements - Nested Tags Settings

When configuring nested properties and child elements in your chart, the inner tags will contain their parent tag name and add specifics to its end. In general the structure of such nested tags will be <Chart*Category**Specifics*> where the Category can be one of the following:

• CategoryAxis
• ChartArea
• Legend
• PlotArea
• SeriesItems
• Title
• Tooltip
• ValueAxis
• XAxes
• YAxes
• and others

To customize the chart, look for nested tags and their properties - the inner tags will contain their parent tag name and add specifics to its end. For example, the ChartSeries tag has a ChartSeriesLabels tag that exposes configuration options and more child tags.

An example of this is the rotation the Labels of a categorical chart. You can use the

ChartCategoryAxes > ChartCategoryAxis > ChartCategoryAxisLabels > ChartCategoryAxisLabelsRotation tag

and set the Angle property to the desired value in degrees (they might be negative or positive numbers). By using similar approach you can take control over ChartCategoryAxisLabelsMargin (add margin for top, bottom, left and right), ChartCategoryAxisLabelsPadding (add padding for top, bottom, left and right) and others.

This approach is not limited only to the Labels - it can be used with all tags that are applicable for the chart type, for example the Chart Title ChartTitle > ChartTitleMargin.

A line chart that shows how to rotate the labels

@* Change the rotation angle of the Labels *@

<TelerikChart>
    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Line" Name="Product 1" Data="@series1Data">
        </ChartSeries>
        <ChartSeries Type="ChartSeriesType.Line" Name="Product 2" Data="@series2Data">
        </ChartSeries>
    </ChartSeriesItems>

    <ChartCategoryAxes>
        <ChartCategoryAxis Categories="@xAxisItems">
            <ChartCategoryAxisLabels>
                <ChartCategoryAxisLabelsRotation Angle="-45" />
            </ChartCategoryAxisLabels>
        </ChartCategoryAxis>
    </ChartCategoryAxes>

    <ChartTitle Text="Quarterly revenue per product"></ChartTitle>

    <ChartLegend Position="ChartLegendPosition.Right">
    </ChartLegend>
</TelerikChart>

@code {
    public List<object> series1Data = new List<object>() { 10, 2, 5, 6 };
    public List<object> series2Data = new List<object>() { 5, 8, 2, 7 };
    public string[] xAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" };
}

See Also

• Live Demo: Line Chart