Area series in React Chart component

14 Oct 202424 minutes to read

Area

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

To render an area series in your chart, you need to follow a few steps to configure it correctly. Here’s a concise guide on how to do this:

  1. Set the series type: Define the series type as Area in your chart configuration. This indicates that the data should be represented as an area chart, which is ideal for showing trends over time or across categories, with filled areas beneath the lines representing data points.

  2. Inject the AreaSeries module: Inject the AreaSeries module into the services. This step is essential, as it ensures that the necessary functionalities for rendering area series are available in your chart.

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 { data } from './datasource';
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' };
    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';
import { data } from './datasource';

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' };

  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"));
export let 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 }
];
export let data: Object[] = [
    { 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 }
];

Binding data with series

You can bind data to the chart using the dataSource property within the series configuration. This allows you to connect a JSON dataset or remote data to your chart. To display the data correctly, map the fields from the data to the chart series xName and yName properties.

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 { data } from './datasource';
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' };
    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';
import { data } from './datasource';

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' };

  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"));
export let 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 }
];
export let data: Object[] = [
    { 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 }
];

Series customization

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

Fill

The fill property determines the color applied to the 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'
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' };
    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'  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';

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' type='Area'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let areaData = [
    { 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 }
];
export let areaData: Object[] = [
    { 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 }
];

The fill property can be used to apply a gradient color to the area series. By configuring this property with gradient values, you can create a visually appealing effect in which the color transitions smoothly from one shade to another.

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'
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' };
    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='url(#gradient)' 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';

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='url(#gradient)' type='Area'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let areaData = [
    { 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 }
];
export let areaData: Object[] = [
    { 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 }
];

Opacity

The opacity property specifies the transparency level of the fill. Adjusting this property allows you to control how opaque or transparent the fill color of the series appears.

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'
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' };
    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' 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';

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'
          opacity={0.5} type='Area'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let areaData = [
    { 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 }
];
export let areaData: Object[] = [
    { 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 }
];

Dash array

The dashArray property determines the pattern of dashes and gaps in the 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'
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' };
    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' border= yName='y' name='Product A'
          dashArray='2,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';

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' border= yName='y' name='Product A'
          dashArray='2,5' type='Area'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let areaData = [
    { 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 }
];
export let areaData: Object[] = [
    { 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 }
];

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 { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, AreaSeries } from '@syncfusion/ej2-react-charts';
import { areaData } from './datasource';
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' border={border} yName='y' name='Product A'
          dashArray='2,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';
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' border={border} yName='y' name='Product A'
        dashArray='2,5' type='Area'>
      </SeriesDirective>
    </SeriesCollectionDirective>
  </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let areaData = [
    { 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 }
];
export let areaData: Object[] = [
    { 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 }
];

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';
import { data } from './datasource';
function App() {
    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';
import { data } from './datasource';

function App() {

  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"));
export let 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 }
];
export let data: Object[] = [
    { 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 }
];

Empty points

Data points with null or undefined values are considered empty. Empty data points are ignored and not plotted on the chart.

Mode

Use the mode property to define how empty or missing data points are handled in the series. The default mode for empty points is Gap.

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';
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 emptyPoint = { mode: 'Gap' };
  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"
          marker=
          dashArray="2,5"
          type="Area"
          emptyPointSettings={emptyPoint}
        ></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';
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 emptyPoint = { mode: 'Gap' };

  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"
      marker=
      dashArray="2,5"
      type="Area"
      emptyPointSettings={emptyPoint}
    ></SeriesDirective>
  </SeriesCollectionDirective>
</ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let areaData = [
    { x: 1900, y: 4 },
    { x: 1920, y: 3.0 },
    { x: 1940, y: null },
    { x: 1960, y: 3.4 },
    { x: 1980, y: 3.2 },
    { x: 2000, y: 3.9 },
  ];
export let areaData: Object[] = [
    { x: 1900, y: 4 },
    { x: 1920, y: 3.0 },
    { x: 1940, y: null },
    { x: 1960, y: 3.4 },
    { x: 1980, y: 3.2 },
    { x: 2000, y: 3.9 },
  ];

Fill

Use the fill property to customize the fill color of empty points in the 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';
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 emptyPoint = { mode: 'Average', fill: 'red' };
  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"
          marker=
          dashArray="2,5"
          type="Area"
          emptyPointSettings={emptyPoint}
        ></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';
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 emptyPoint = { mode: 'Average', fill: 'red' };

  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"
      marker=
      type="Area"
      emptyPointSettings={emptyPoint}
    ></SeriesDirective>
  </SeriesCollectionDirective>
</ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let areaData = [
    { x: 1900, y: 4 },
    { x: 1920, y: 3.0 },
    { x: 1940, y: null },
    { x: 1960, y: 3.4 },
    { x: 1980, y: 3.2 },
    { x: 2000, y: 3.9 },
  ];
export let areaData: Object[] = [
    { x: 1900, y: 4 },
    { x: 1920, y: 3.0 },
    { x: 1940, y: null },
    { x: 1960, y: 3.4 },
    { x: 1980, y: 3.2 },
    { x: 2000, y: 3.9 },
  ];

Border

Use the border property to customize the width and color of the border for empty points.

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';
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 emptyPoint = { mode: 'Average', fill: 'red', border: {width: 1.5, color: 'green'} };
  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"
          marker=
          dashArray="2,5"
          type="Area"
          emptyPointSettings={emptyPoint}
        ></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';
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 emptyPoint = { mode: 'Average', fill: 'red', border: {width: 1.5, color: 'green'}};

  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"
      marker=
      type="Area"
      emptyPointSettings={emptyPoint}
    ></SeriesDirective>
  </SeriesCollectionDirective>
</ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let areaData = [
    { x: 1900, y: 4 },
    { x: 1920, y: 3.0 },
    { x: 1940, y: null },
    { x: 1960, y: 3.4 },
    { x: 1980, y: 3.2 },
    { x: 2000, y: 3.9 },
  ];
export let areaData: Object[] = [
    { x: 1900, y: 4 },
    { x: 1920, y: 3.0 },
    { x: 1940, y: null },
    { x: 1960, y: 3.4 },
    { x: 1980, y: 3.2 },
    { x: 2000, y: 3.9 },
  ];

Events

Series render

The seriesRender event allows you to customize series properties, such as data, fill, and name, before they are rendered on the chart.

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';
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 seriesRender = (args) => {
    args.fill = '#ff6347';
  };
  return (
    <ChartComponent
      id="charts"
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title="Average Sales Comparison"
      seriesRender={seriesRender}
    >
      <Inject services={[AreaSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective
          dataSource={areaData}
          xName="x"
          yName="y"
          name="Product A"
          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, ISeriesRenderEventArgs
}
  from '@syncfusion/ej2-react-charts';
import { EmitType } from '@syncfusion/ej2-base';
import { areaData } from './datasource';
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 seriesRender: EmitType<ISeriesRenderEventArgs> = (args: ISeriesRenderEventArgs): void => {
      args.fill = '#ff6347';
  };

  return <ChartComponent
    id="charts"
    primaryXAxis={primaryxAxis}
    primaryYAxis={primaryyAxis}
    title="Average Sales Comparison"
    seriesRender={seriesRender}
  >
    <Inject services={[AreaSeries, Legend, Tooltip, DataLabel, Category]} />
    <SeriesCollectionDirective>
      <SeriesDirective
        dataSource={areaData}
        xName="x"
        yName="y"
        name="Product A"
        type="Area"
      ></SeriesDirective>
    </SeriesCollectionDirective>
  </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let areaData = [
    { x: 1900, y: 4 },
    { x: 1920, y: 3.0 },
    { x: 1940, y: 4 },
    { x: 1960, y: 3.4 },
    { x: 1980, y: 3.2 },
    { x: 2000, y: 3.9 },
  ];
export let areaData: Object[] = [
    { x: 1900, y: 4 },
    { x: 1920, y: 3.0 },
    { x: 1940, y: 4 },
    { x: 1960, y: 3.4 },
    { x: 1980, y: 3.2 },
    { x: 2000, y: 3.9 },
  ];

Point render

The pointRender event allows you to customize each data point before it is rendered on the chart.

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';
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 pointRender = (args) => {
    args.fill = '#ff6347';
  };
  return (
    <ChartComponent
      id="charts"
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title="Average Sales Comparison"
      pointRender={pointRender}
    >
      <Inject services={[AreaSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective
          dataSource={areaData}
          xName="x"
          yName="y"
          name="Product A"
          marker=
          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, IPointRenderEventArgs
}
  from '@syncfusion/ej2-react-charts';
import { EmitType } from '@syncfusion/ej2-base';
import { areaData } from './datasource';
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 pointRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs): void => {
    args.fill = '#ff6347';
  };

  return <ChartComponent
    id="charts"
    primaryXAxis={primaryxAxis}
    primaryYAxis={primaryyAxis}
    title="Average Sales Comparison"
    pointRender={pointRender}
  >
    <Inject services={[AreaSeries, Legend, Tooltip, DataLabel, Category]} />
    <SeriesCollectionDirective>
      <SeriesDirective
        dataSource={areaData}
        xName="x"
        yName="y"
        name="Product A"
        marker=
        type="Area"
      ></SeriesDirective>
    </SeriesCollectionDirective>
  </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let areaData = [
    { x: 1900, y: 4 },
    { x: 1920, y: 3.0 },
    { x: 1940, y: 4 },
    { x: 1960, y: 3.4 },
    { x: 1980, y: 3.2 },
    { x: 2000, y: 3.9 },
  ];
export let areaData: Object[] = [
    { x: 1900, y: 4 },
    { x: 1920, y: 3.0 },
    { x: 1940, y: 4 },
    { x: 1960, y: 3.4 },
    { x: 1980, y: 3.2 },
    { x: 2000, y: 3.9 },
  ];

See Also