Blazor Toolkit
Overview

The Spline Area Chart represents data using a curved line connecting data points, with the area below the line shaded. It provides a smoother aesthetic than a standard Area Chart. This is achieved by setting the Type property of ChartSeries to ChartSeriesType.SplineArea.

Data Labels

Enable data labels to display the exact values of data points directly within the Spline Area Chart. You can enable them by setting the Visible property to true in the ChartDataLabel within the ChartMarker. Position the labels appropriately using the Position property.

Spline Type Variations

Use different spline types like Natural, Monotonic, Cardinal, or Clamped to achieve the desired curve smoothness for your data visualization. This is configured using the SplineType property of the ChartSeries component.

Skip Missing Points

Manage incomplete data point sets by specifying how the Chart should handle null values using the ChartEmptyPointSettings component. You can control the behavior using the Mode property, with options like Gap, Zero, Drop, and Average.

Inverted Axes

The Spline Area Chart supports transposition, swapping the horizontal and vertical axes for different perspectives. Transpose the Chart axes by setting the IsTransposed property to true in the SfChart component.

Negative Data

Gracefully handle and visualize negative values within the curved area series. The area is filled downwards from the zero line for negative values mapped to the YName property. Significant data thresholds can be highlighted using the ChartStripline component in the axis.

Series Customization

Apply custom colors and opacity levels to match your application's design guidelines. You can fine-tune the appearance using properties like Fill, Opacity, Width, and DashArray in the ChartSeries, and customize borders using the ChartSeriesBorder component.

DataSource Update

Observe the Spline Area Chart smoothly animate as its data source bound to the DataSource property is continuously updated at regular intervals. Smooth transitions between data updates are handled automatically by configuring the ChartSeriesAnimation component.

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.