React Charts Spline Range Area Chart

Overview

The React spline range area chart is designed to visualize continuous data using smooth curves (splines) that represent variations between high and low values across time intervals and different categories.

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 spline range area charts gracefully handle missing data by supporting empty points, ensuring continuity in the visual.

Vertical chart

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

Styling options

Customize spline range area colors, and border 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 spline range area chart code example

Get started with the React spline range area chart using a few lines of TSX code, as shown below. You can also explore this React spline 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="SplineRangeArea" />
            </ChartSeriesCollection>
        </Chart>
    )
}