React Range Area Chart
Range area charts visualize the variation between two values across time or categories by shading the area between the minimum and maximum data points. They are ideal for showing value ranges, such as temperature highs and lows, emphasizing both the spread and trend over time.
Overview
To visualize data as a range area chart, set the type property to RangeArea within the ChartSeries component. Bind the high and low values from your data source so the given data shown in area between confined ranges.
Multiple Series
Multiple range area series can be displayed in a single chart, allowing different datasets to be combined for comparison. This approach is useful for analyzing variations and trends among multiple groups simultaneously.
Spline Range Area
Spline range area charts are similar to range area charts but use smooth spline curves to connect data points. To visualize data as a spline range area chart, set the type property to SplineRangeArea within the ChartSeries component. They are ideal for visualizing gradual changes and smooth transitions between high and low values, providing a clear representation of data variation. Common applications include temperature ranges, stock high–low bands, and confidence intervals.
Combination Chart
This chart combines an Range Area series with a line series: the range area illustrates the daily temperature range, while the line highlights the average temperature.
Data Label
To display data labels on the range area chart, set the visible property to true within the ChartDataLabel 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.
By using Average mode, we can connect the missing points with auto-interpolated data. It will fill the series with most appropriate data for non-available points.
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.
Series Customization
You can customize the appearance of the range area series in the ChartSeries component by setting the following properties: