Overview

React Area Chart is like line chart to represent time-dependent data and to show the trends at equal intervals, but it fills the area below the line. The area chart uses numeric, category, date-time, or logarithmic axes to plot data.

Multiple series

The area chart allows you to plot multiple series in a single chart to compare different data sets. Enabling legend and tooltip gives more information about the individual series.

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.

Multiple axes

Use multiple axes to plot different data sets that widely vary from one other.

Zoom and pan

Enable zooming and panning support when dealing with large amount of data to visualize the data point in any region.

Empty/null data point

Handle missing data with empty points support.

Vertical chart

The area chart can be transposed vertically to view the data in a different perspective.

Customization

Customize the color and border of the area chart using built-in APIs.

React Area Chart Code Example

Get started with React Area Chart using the HTML and JS code example demonstrated below. Also explore our React Area Chart Example that shows you how to render and configure the chart.

html
js

<!DOCTYPE html>
<html>

<body> 
     <div id="charts"></div>
</body>

</html>

import {AreaSeries, AxisModel, Category, ChartComponent, Inject, SeriesCollectionDirective, SeriesDirective} from'@syncfusion/ej2-react-charts';
import * as React from 'react';
import * as ReactDOM from 'react-dom'; 
class App extends React.Component<{}, {}> {
  public primaryXAxis: AxisModel = { valueType: 'Category'};
  public data1 : any[]= [{ x: 'CHN', y: 12, },
  { x: 'GER', y: 15, },
  { x: 'RUS', y: 30 },
  { x: 'BRZ', y: 6.4 },
  { x: 'IND', y: 14 }];


  public render() {
    return <ChartComponent id='charts' primaryXAxis={this.primaryXAxis}>
      <Inject services={[AreaSeries, Category]} />
      <SeriesCollectionDirective>
      <SeriesDirective dataSource={this.data1} xName='x' yName='y' type='Area'/>
      </SeriesCollectionDirective>
    </ChartComponent>
  }
};
ReactDOM.render(
  <App />,
  document.getElementById('charts') as HTMLElement
);