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.