Area series in React Chart component

16 May 202318 minutes to read

Area

To render a area series, use series type as Area and inject AreaSeries module into the services.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, AreaSeries } from '@syncfusion/ej2-react-charts';
function App() {
    const data = [
        { x: 1900, y: 4 }, { x: 1920, y: 3.0 }, { x: 1940, y: 3.8 },
        { x: 1960, y: 3.4 }, { x: 1980, y: 3.2 }, { x: 2000, y: 3.9 }
    ];
    const primaryxAxis = {
        title: 'Year', minimum: 1900, maximum: 2000, interval: 10,
        edgeLabelPlacement: 'Shift'
    };
    const primaryyAxis = { minimum: 2, maximum: 5, interval: 0.5, title: 'Sales Amount in Millions' };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Average Sales Comparison'>
      <Inject services={[AreaSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' name='Product A' fill='#69D2E7' opacity={0.6} type='Area'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
         Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, AreaSeries,  Selection}
from'@syncfusion/ej2-react-charts';

function App() {

  const data: any[] = [
    { x: 1900, y: 4 }, { x: 1920, y: 3.0 }, { x: 1940, y: 3.8 },
    { x: 1960, y: 3.4 }, { x: 1980, y: 3.2 }, { x: 2000, y: 3.9 }
  ];
  const primaryxAxis: AxisModel = {
    title: 'Year', minimum: 1900, maximum: 2000, interval: 10,
    edgeLabelPlacement: 'Shift'};
  const primaryyAxis: AxisModel = { minimum: 2, maximum: 5, interval: 0.5, title: 'Sales Amount in Millions' };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='Average Sales Comparison'>
      <Inject services={[AreaSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' name='Product A' fill='#69D2E7'
          opacity={0.6} type='Area'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

Multicolored area

To render a multicolored area series, use the series type as MultiColoredArea, and inject the MultiColoredAreaSeries module into the services. The required segments of the series can be customized using the value, color, and dashArray.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, MultiColoredAreaSeries, SegmentsDirective, Legend, StepAreaSeries, SegmentDirective } from '@syncfusion/ej2-react-charts';
function App() {
    const data = [{ x: 2005, y: 28 }, { x: 2006, y: 25 }, { x: 2007, y: 26 }, { x: 2008, y: 27 },
        { x: 2009, y: 32 }, { x: 2010, y: 35 }, { x: 2011, y: 25 }];
    return <ChartComponent id='charts'>
      <Inject services={[StepAreaSeries, Legend, MultiColoredAreaSeries]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' name='England' type='MultiColoredArea' segmentAxis='X'>
          <SegmentsDirective>
            <SegmentDirective value={2007} color='blue'></SegmentDirective>
            <SegmentDirective value={2009} color='green'></SegmentDirective>
            <SegmentDirective color='orange'></SegmentDirective>
          </SegmentsDirective>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, MultiColoredAreaSeries, SegmentsDirective,
         Legend, StepAreaSeries, SegmentDirective }
from'@syncfusion/ej2-react-charts';

function App() {

  const data: any[] = [{ x: 2005, y: 28 }, { x: 2006, y: 25 }, { x: 2007, y: 26 }, { x: 2008, y: 27 },
                        { x: 2009, y: 32 }, { x: 2010, y: 35 }, { x: 2011, y: 25 }]

  return <ChartComponent id='charts'>
      <Inject services={[StepAreaSeries, Legend, MultiColoredAreaSeries]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' name='England' type='MultiColoredArea' segmentAxis='X' >
          <SegmentsDirective>
            <SegmentDirective value={2007} color='blue'></SegmentDirective>
            <SegmentDirective value={2009} color='green'></SegmentDirective>
            <SegmentDirective color='orange'></SegmentDirective>
          </SegmentsDirective>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

Series customization

The following properties can be used to customize the area series.

  • fill – Specifies the color of the area series.
  • opacity – Specifies the opacity of fill.
  • dashArray – Specifies the dashes of series.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, AreaSeries } from '@syncfusion/ej2-react-charts';
import { areaData } from 'datasource.ts';
function App() {
    const primaryxAxis = {
        title: 'Year', minimum: 1900, maximum: 2000, interval: 10,
        edgeLabelPlacement: 'Shift'
    };
    const primaryyAxis = { minimum: 2, maximum: 5, interval: 0.5, title: 'Sales Amount in Millions' };
    const border = { color: 'red', width: 2 };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Average Sales Comparison'>
      <Inject services={[AreaSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={areaData} xName='x' yName='y' name='Product A' fill='green' width={2} dashArray='5,5' border={border} opacity={0.6} type='Area'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
         Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, AreaSeries,  Selection}
from'@syncfusion/ej2-react-charts';
import { areaData } from 'datasource.ts';

function App() {

  const primaryxAxis: AxisModel = {
    title: 'Year', minimum: 1900, maximum: 2000, interval: 10,
    edgeLabelPlacement: 'Shift'
  };
  const primaryyAxis: AxisModel = { minimum: 2, maximum: 5, interval: 0.5, title: 'Sales Amount in Millions' };
  const border = { color: 'red', width: 2 };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='Average Sales Comparison'>
      <Inject services={[AreaSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={areaData} xName='x' yName='y' name='Product A'
          fill='green' width={2} dashArray='5,5' border={border}
          opacity={0.6} type='Area'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

Area border

The following properties in the bordermodel can be used to customize the border of the Area Chart.

  • width - Specifies the width for the border of the Area Chart.
  • color - Specifies the Color for the border of the Area Chart.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, AreaSeries } from '@syncfusion/ej2-react-charts';
import { areaData } from 'datasource.ts';
function App() {
    const primaryxAxis = {
        title: 'Year', minimum: 1900, maximum: 2000, interval: 10,
        edgeLabelPlacement: 'Shift'
    };
    primaryyAxis: AxisModel = { minimum: 2, maximum: 5, interval: 0.5, title: 'Sales Amount in Millions' };
    border = { width: 2 };
    render();
    {
        return <ChartComponent id='charts' primaryXAxis={this.primaryxAxis} primaryYAxis={this.primaryyAxis} title='Average Sales Comparison'>
      <Inject services={[AreaSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={areaData} xName='x' yName='y' name='Product A' width={2} border={this.border} opacity={0.5} type='Area'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
    }
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
         Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, AreaSeries,  Selection}
from'@syncfusion/ej2-react-charts';
import { areaData } from 'datasource.ts';
function App() {
  const primaryxAxis: AxisModel = {
    title: 'Year', minimum: 1900, maximum: 2000, interval: 10,
    edgeLabelPlacement: 'Shift'
  };
  const primaryyAxis: AxisModel = { minimum: 2, maximum: 5, interval: 0.5, title: 'Sales Amount in Millions' };
  const border = { width: 2 };
  
    return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='Average Sales Comparison'>
      <Inject services={[AreaSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={areaData} xName='x' yName='y' name='Product A'
           width={2}  border={border}
          opacity={0.5} type='Area'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

See Also