React Charts Range Area Chart

Overview

The React range area chart is used to display variations in data values over time. Similar to an area chart, it fills the space between the high and low ranges, providing a clear view of value fluctuations.

Data markers

Data points can be marked using built-in shapes: circles, rectangles, ellipses, vertical and horizontal lines, diamonds, triangles, pentagons, crosses, and plus signs. Custom images can also be used to enhance visual appeal.

Data labels

Data labels offer contextual information for each data point and can be rotated to a specified angle for better readability.

Missing data handling

React range area charts gracefully handle missing data through empty points, ensuring continuity in the visual.

Vertical range area chart

The chart can be transposed vertically to offer an alternative perspective on the data.

Styling options

Customize range area colors and borders using built-in APIs to match your design.

Zoom and pan

Zooming and panning features allow users to explore specific regions of large datasets for detailed analysis.

React range area chart code example

Get started with the React range area chart using a few lines of TSX code, as shown below. You can also explore this React range area chart example to learn how to render and customize the chart in a React application.

import { Chart, ChartPrimaryXAxis, ChartSeriesCollection, ChartSeries } from '@syncfusion/react-charts';

export default function App() {
    const series: object[] = [];
    let value: number = 35;
    let point: object;

    for (let i: number = 1; i < 360; i++) {
      if (Math.random() > .5) {
          value += Math.random();
      } else {
          value -= Math.random();
      }
      point = { high: value, low: value - 10, x: new Date(2015, 0, i) };
      series.push(point);
    }

    return (
        <Chart>
            <ChartPrimaryXAxis valueType='DateTime'>
            </ChartPrimaryXAxis>
            <ChartSeriesCollection>
              <ChartSeries dataSource={series} xField="x" high="high" low="low" type="RangeArea" />
            </ChartSeriesCollection>
        </Chart>
    )
}