React Area Chart

Area charts display quantitative data graphically, emphasizing the magnitude of change over time or categories by filling the area beneath the line connecting data points.

Overview

To visualize data as a area chart, set the type property to Area within the ChartSeries component.

Data label

To display data labels on the area chart, set the visible property to true within the ChartDataLabel component.

A Stacking Area Chart is used to display multiple data series stacked on top of each other, allowing you to visualize both individual series values and the cumulative total over time. To visualize data as Stacking area chart, set the type property to StackingArea within the ChartSeries component.

100% Stacking Area

A 100% Stacking Area Chart displays multiple data series stacked on top of each other, with each series representing a percentage of the total at each point in time. This chart type is ideal for emphasizing relative proportions and trends across categories, while ensuring the total always sums to 100%. To visualize data as Normalized area chart, set the type property to StackingArea100 within the ChartSeries component.

Skip missing points

Data points with values of null, undefined, or NaN are treated as empty points in the series. You can customize their appearance and behavior using the emptyPointSettings property in the ChartSeries component. This property supports various modes, including Gap, Zero, Average, and Drop, allowing you to control how empty points are rendered or connected in the chart.

Live point update

React Chart supports live data updates, ensuring your chart reflects the latest information in real time without requiring a page reload. Whenever the chart's data source changes, the chart automatically re-renders to display the updated values.

Inverted axes

To switch the X and Y axes in your chart, use the transposed property in the Chart component. When this property is enabled, the chart is rendered in a transposed format, which can enhance readability and data comparison, especially for horizontal area charts or when working with long category labels.

Negative data

Charts can display negative values to represent downward trends in performance, metrics, or other data over time. A negative spline series visually dips below the baseline (usually the X-axis), making it easy to identify declines or losses.

Series customization

You can customize the appearance of the area series in the ChartSeries component by setting the following properties:

fill – Sets the color of the line.
border – Defines the thickness and color of the line.
opacity – Controls the transparency level of the line.

Datasource update

We can dynamically replace the entire dataset in a Area chart when the underlying data changes significantly.

This is especially useful during:

Periodic refreshes (e.g., hourly or daily updates)
Batch processing of large datasets
Recalculated analytics or simulations