Blazor Toolkit
Overview

A Stepline Chart displays data using horizontal and vertical segments instead of diagonal slopes, clearly highlighting discrete changes between consecutive values. In the Syncfusion Blazor Toolkit, a Stepline Chart is created by setting the Type property of the ChartSeries component to ChartSeriesType.Stepline. This Chart supports markers, data labels, tooltips, and full axis customization, making it ideal for visualizing year‑over‑year or stage‑based progressions.

Data Label

Data labels display the exact value of each data point directly on the Stepline, making changes between consecutive levels easy to interpret without relying on tooltips. In a Step Line Chart, data labels are enabled by setting the Visible property of the ChartDataLabel component to true inside the ChartMarker. This ensures that the value for each step is clearly displayed along the series.

Skip Missing Points

Step Line Charts can contain missing or null values, which are treated as empty points. You can control how the Stepline behaves when it encounters such gaps. The Syncfusion Blazor Toolkit supports multiple empty point modes through the ChartEmptyPointSettings component: Gap, Zero, Average, and Drop. Since the Toolkit does not provide a dropdown component, an interactive SfButtonGroup is used to switch between these modes.

Inverted Axes

An inverted or transposed Stepline Chart swaps the X‑axis and Y‑axis, displaying categories along the vertical axis and values along the horizontal axis. In the Syncfusion Blazor Toolkit, this layout is enabled by setting the IsTransposed property of the SfChart component to true. Transposed Stepline Charts are useful when working with dense category labels or when comparing multiple series across a vertical scale.

Step Position

Step position controls how horizontal and vertical segments are aligned between consecutive points in a Stepline Chart. The Syncfusion Blazor Toolkit supports three step positions: Left, Center, and Right. Since the Toolkit does not provide a dropdown component, the step position can be changed interactively using a SfButtonGroup, providing a clean and accessible alternative for selecting step alignment.

Series Customization

Series customization allows you to control the visual appearance of a Stepline, including line thickness, dash patterns, opacity, and step alignment. In the Syncfusion Blazor Toolkit, these options are configured using properties such as Width, DashArray, Opacity, and StepPosition on the ChartSeries component. This provides flexibility to highlight trends or differentiate a Stepline from other series.

Rejoining the server...

Rejoin failed... trying again in seconds.

Failed to rejoin.
Please retry or reload the page.

The session has been paused by the server.

Failed to resume the session.
Please retry or reload the page.