A Spline Chart displays smooth, curved lines between data points, making it ideal for visualizing gradual changes or continuous trends over time. In the Syncfusion Blazor Toolkit, a spline Chart is created by setting the Type property of the ChartSeries component to ChartSeriesType.Spline. To plot data, assign a data collection to the DataSource property and map the fields using XName and YName. It supports multiple series, shared tooltips by enabling the Shared property in ChartTooltipSettings, markers via ChartMarker, and axis formatting using ChartPrimaryXAxis and ChartPrimaryYAxis for comparing related datasets such as minimum, average, and maximum values.

Data labels display the value of each data point directly on the spline, reducing the need to rely on tooltips or axis values. In a Spline Chart, data labels are enabled by setting the Visible property of the ChartDataLabel component to true. The ChartDataLabel component is added inside the ChartMarker component. This helps improve readability when comparing values across multiple series.

The spline type determines how curves are interpolated between data points, affecting the smoothness and shape of the spline line. The Syncfusion Blazor Toolkit supports multiple spline interpolation options via the SplineType property of ChartSeries. Supported modes include SplineType.Natural, SplineType.Monotonic, SplineType.Cardinal, and SplineType.Clamped. A SfButtonGroup is used here to allow interactive switching between these spline types.

Spline Charts can contain missing or null values that create gaps in the data. These are treated as empty points and can be rendered in different ways depending on the selected mode. In the Syncfusion Blazor Toolkit, empty point behavior is controlled using the Mode property of the ChartEmptyPointSettings component inside the ChartSeries. Supported modes include EmptyPointMode.Gap, EmptyPointMode.Zero, EmptyPointMode.Average, and EmptyPointMode.Drop. An interactive SfButtonGroup is used to switch between modes.

Live point update demonstrates how a Spline Chart can be updated in real time as new data arrives. This is commonly used for monitoring scenarios such as sensor readings, live metrics, or streaming data. In the Syncfusion Blazor Toolkit, live updates are achieved by modifying the Chart’s bound data source (e.g., an ObservableCollection) at regular intervals. As the collection changes, the Chart automatically refreshes, and the ChartSeriesAnimation component provides smooth animated transitions between points using its Duration property.

An inverted (transposed) Spline Chart swaps the X‑axis and Y‑axis, placing category values along the vertical axis and numeric 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. This format is useful for improving readability when category labels are lengthy or when comparing values across a vertical scale.

Spline Charts can visualize both positive and negative values, making them useful for analyzing growth and decline around a baseline. In the Syncfusion Blazor Toolkit, negative values are rendered naturally below the horizontal axis. Reference lines can be added using the ChartStriplines collection and the ChartStripline component to highlight significant positive or negative thresholds, helping users quickly identify peaks and drops in the data. You can customize the strip lines using properties like Start, End, Color, and DashArray.

Series customization allows you to modify the visual appearance of a spline line, including its opacity, dash pattern, border style, and markers. In the Syncfusion Blazor Toolkit, these properties are configured using the Opacity, DashArray, and Fill properties on the ChartSeries component. You can also customize the border using the ChartSeriesBorder component. This helps emphasize specific trends or visually distinguish a spline from other series.

DataSource update demonstrates how a Spline Chart can be refreshed by replacing the entire data collection at regular intervals. Unlike live point updates that add or remove individual points, this approach regenerates all data values and rebinds the series using an ObservableCollection. The Chart automatically animates the transition using the ChartSeriesAnimation component by enabling it via the Enable property, making it useful for scenarios such as simulated data feeds, polling-based updates, or periodic recalculations.