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.