Overview
React Range Area Chart show variations in data values over time. The space between high and low ranges is filled, making changes across a range easier to visualize.
Marker
Markers support built-in shapes such as circles, rectangles, ellipses, lines, diamonds, triangles, pentagons, crosses, and pluses. Images can also be used as marker symbols for customized presentations.
Data label
Data labels display information about data points. Templates support custom label content using HTML elements such as images, divs, and spans. Labels can also be rotated to a specified angle.
Empty/null data point
The Range Area Chart handles missing data with empty points support.
Vertical chart
The React Range Area Chart can be transposed vertically to view the data from a different perspective.
Customization
Customize the color and border of the Range Area Chart using built-in APIs.
Zoom and pan
Enable zooming and panning when dealing with large amounts of data to focus on particular ranges.
React Range Area Chart code example
Get started with the React Range Area Chart using a few simple lines of JavaScript code, as demonstrated below. Also explore demo to learn how to render and configure the component.
import {AxisModel,ChartComponent, DateTime, Inject, RangeAreaSeries, SeriesCollectionDirective, SeriesDirective} from'@syncfusion/ej2-react-charts';
import * as React from 'react';
let series1: object[] = [];
let value: number = 35;
let point1: object;
for (let i: number = 1; i < 360; i++) {
if (Math.random() > .5) {
value += Math.random();
} else {
value -= Math.random();
}
point1 = {
high: value, low: value - 10,x: new Date(2015, 0, i),
};
series1.push(point1);
}
class App extends React.Component<{}, {}> {
public primaryXAxis: AxisModel = { valueType: 'DateTime'};
public render() {
return <ChartComponent id='charts' primaryXAxis={this.primaryXAxis}>
<Inject services={[DateTime,RangeAreaSeries]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={series1} xName='x' high='high' low='low' type='RangeArea'/>
</SeriesCollectionDirective>
</ChartComponent>
}
};
ReactDOM.render(
<App />,
document.getElementById('charts') as HTMLElement
);<!DOCTYPE html>
<html>
<body>
<div id="charts"></div>
</body>
</html>Learning resources
Explore all Syncfusion React components
Explore over 140+ React UI components featuring established, and production-ready controls built for modern web app development.
- SMART COMPONENTSDATA VISUALIZATIONDROPDOWNSFILE VIEWERS & EDITORSBUTTONSINTERACTIVE CHATINPUTSNAVIGATIONNOTIFICATIONS
