Blazor Toolkit
Overview

The Area Chart visually represents quantitative data by shading the area between the line and the axis. It is ideal for showing trends over time and emphasizing the magnitude of change. This is achieved by setting the Type property of ChartSeries to ChartSeriesType.Area.

Data Labels

Data labels provide direct information about data points, making it easier for users to read exact values without referring to the axes. You can enable them by setting the Visible property to true in ChartDataLabel within the ChartMarker.

Stacking Area

Stacking Area Charts allow multiple series to be stacked on top of each other, showing the cumulative total of the data points. This is configured by setting the Type property of ChartSeries to ChartSeriesType.StackingArea.

100% Stacking Area

The 100% Stacking Area Chart shows the relative percentage of multiple data series, where the total area always sums to 100%. Set the Type property of ChartSeries to ChartSeriesType.StackingArea100 to enable this feature.

Multi-Colored Area

Visualize data trends with varying colors for different segments or data points, allowing for clear distinction between market phases or categories. You can achieve this by setting the Type property of ChartSeries to ChartSeriesType.MultiColoredArea and mapping colors using the PointColorMapping property.

Skip Missing Points

Handle null or missing data points gracefully using ChartEmptyPointSettings. You can control the behavior of empty points using the Mode property, with options like Gap, Zero, Drop, and Average.

Live Point Update

The Chart component supports dynamic data updates, allowing you to visualize real-time data streams efficiently. The Chart automatically re-renders when data points are added or removed from the data source bound to the DataSource property.

Inverted Axes

Transpose the Chart axes to swap the X and Y positions using the IsTransposed property in the SfChart component. This is useful for displaying data that is easier to read horizontally.

Negative Data

Area Charts can effectively display data points with negative values, useful for representing losses, decreases, or sub-zero measurements. The area is filled downwards from the zero line for negative values mapped to the YName property.

Series Customization

Fine-tune the appearance of the Chart series with properties like Width, custom Fill colors, and Opacity in the ChartSeries. You can also customize the series border using the Border property.

DataSource Update

The Chart automatically re-renders when the bound data source is updated, providing a seamless user experience. Smooth transitions between data updates are handled automatically by setting the Enable property to true in ChartSeriesAnimation.

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.