Area Chart in React Chart

17 Aug 202624 minutes to read

An area chart is ideal for showing trends over time or across categories, with filled regions beneath the lines representing data points. The Area series is available in the Syncfusion EJ2 React Charts package.

Area

To render an area series, define the series type as Area and inject the AreaSeries module using <Inject services={[AreaSeries]}/> inside the ChartComponent. The basic configuration steps are:

  1. Set the series type: Define the series type as Area in your chart configuration.
  2. Inject the AreaSeries module: Inject the AreaSeries module using <Inject services={[AreaSeries]}/>. This makes the area-series rendering functionality available to the chart.
import * as React from "react";
import * as ReactDOM from "react-dom/client";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, 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]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' name='Product A' fill='#69D2E7' opacity={0.6} type='Area'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
};
export default App;
const root = ReactDOM.createRoot(document.getElementById('charts'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom/client";
import type { AxisModel } from "@syncfusion/ej2-react-charts";
import {
  ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, AreaSeries
}
  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]} />
    <SeriesCollectionDirective>
      <SeriesDirective dataSource={data} xName='x' yName='y' name='Product A' fill='#69D2E7'
        opacity={0.6} type='Area'>
      </SeriesDirective>
    </SeriesCollectionDirective>
  </ChartComponent>

};
export default App;
const root = ReactDOM.createRoot(document.getElementById('charts') as HTMLElement);
root.render(<App />);
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

Bind data to the chart by using the dataSource property on the series. Map the data fields to the chart series xName and yName properties so each point is plotted correctly.

import * as React from "react";
import * as ReactDOM from "react-dom/client";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, 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]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' name='Product A' fill='#69D2E7' opacity={0.6} type='Area'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
};
export default App;
const root = ReactDOM.createRoot(document.getElementById('charts'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom/client";
import type { AxisModel } from "@syncfusion/ej2-react-charts";
import {
  ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, AreaSeries
}
  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]} />
    <SeriesCollectionDirective>
      <SeriesDirective dataSource={data} xName='x' yName='y' name='Product A' fill='#69D2E7'
        opacity={0.6} type='Area'>
      </SeriesDirective>
    </SeriesCollectionDirective>
  </ChartComponent>

};
export default App;
const root = ReactDOM.createRoot(document.getElementById('charts') as HTMLElement);
root.render(<App />);
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.

Solid fill

The fill property determines the color applied to the series.

import * as React from "react";
import * as ReactDOM from "react-dom/client";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, 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]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={areaData} xName='x' yName='y' name='Product A' fill='green'  type='Area'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
};
export default App;
const root = ReactDOM.createRoot(document.getElementById('charts'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom/client";
import type { AxisModel } from "@syncfusion/ej2-react-charts";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, AreaSeries }
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' };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='Average Sales Comparison'>
      <Inject services={[AreaSeries]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={areaData} xName='x' yName='y' name='Product A'
          fill='green' type='Area'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
const root = ReactDOM.createRoot(document.getElementById('charts') as HTMLElement);
root.render(<App />);
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 }
];

Gradient fill

The fill property accepts an SVG gradient reference, allowing you to apply a smooth color transition to the area series. Define the gradient with a unique ID, and assign it to the fill property using the url(#gradientId) syntax. The area fill then transitions between the gradient stops.

import * as React from "react";
import * as ReactDOM from "react-dom/client";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, 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]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={areaData} xName='x' yName='y' name='Product A' fill='url(#gradient)' type='Area'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
};
export default App;
const root = ReactDOM.createRoot(document.getElementById('charts'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom/client";
import type { AxisModel } from "@syncfusion/ej2-react-charts";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, AreaSeries }
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' };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='Average Sales Comparison'>
      <Inject services={[AreaSeries]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={areaData} xName='x' yName='y' name='Product A'
          fill='url(#gradient)' type='Area'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
const root = ReactDOM.createRoot(document.getElementById('charts') as HTMLElement);
root.render(<App />);
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 controls the transparency of the fill and affects how the series blends with background or overlapping series.

import * as React from "react";
import * as ReactDOM from "react-dom/client";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, 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]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={areaData} xName='x' yName='y' name='Product A' opacity={0.5} type='Area'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
};
export default App;
const root = ReactDOM.createRoot(document.getElementById('charts'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom/client";
import type { AxisModel } from "@syncfusion/ej2-react-charts";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, AreaSeries }
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' };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='Average Sales Comparison'>
      <Inject services={[AreaSeries]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={areaData} xName='x' yName='y' name='Product A'
          opacity={0.5} type='Area'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
const root = ReactDOM.createRoot(document.getElementById('charts') as HTMLElement);
root.render(<App />);
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

Use the border property to configure the border width, color, and dashArray of the area series. Pass it as an object on the series, for example:

const border = { width: 2, color: '#962D18', dashArray: '5,5' };
import * as React from "react";
import * as ReactDOM from "react-dom/client";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, 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 = { width: 2, color: '#962D18', dashArray: '5,5' };

  return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Average Sales Comparison'>
    <Inject services={[AreaSeries]} />
    <SeriesCollectionDirective>
      <SeriesDirective dataSource={areaData} xName='x' yName='y' fill='#69D2E7' type='Area' border={border}>
      </SeriesDirective>
    </SeriesCollectionDirective>
  </ChartComponent>

};
export default App;
const root = ReactDOM.createRoot(document.getElementById('charts'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom/client";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, AxisModel, BorderModel, AreaSeries } 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: BorderModel = { width: 2, color: '#962D18', dashArray: '5,5' };

  return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Average Sales Comparison'>
    <Inject services={[AreaSeries]} />
    <SeriesCollectionDirective>
      <SeriesDirective dataSource={areaData} xName='x' yName='y' fill='#69D2E7' type='Area' border={border}>
      </SeriesDirective>
    </SeriesCollectionDirective>
  </ChartComponent>

};
export default App;
const root = ReactDOM.createRoot(document.getElementById('charts') as HTMLElement);
root.render(<App />);
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

Use a multicolored area when you want each segment of the area to use a different color—for example, to highlight threshold crossings or category changes. Set the series type to MultiColoredArea, inject the MultiColoredAreaSeries module, and configure the segments array on the series using value, color, and optional dashArray to mark the breakpoints. Set segmentAxis='X' to evaluate segment breakpoints along the X axis (use 'Y' for the Y axis). Each SegmentDirective entry has the shape:

<SegmentDirective value={2007} color='blue' />

where value is the breakpoint on the chosen axis and color is the segment fill.

import * as React from "react";
import * as ReactDOM from "react-dom/client";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, MultiColoredAreaSeries, SegmentsDirective, SegmentDirective } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
    return <ChartComponent id='charts'>
      <Inject services={[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;
const root = ReactDOM.createRoot(document.getElementById('charts'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom/client";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, MultiColoredAreaSeries, SegmentsDirective, SegmentDirective }
from'@syncfusion/ej2-react-charts';
import { data } from './datasource';

function App() {

  return <ChartComponent id='charts'>
      <Inject services={[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;
const root = ReactDOM.createRoot(document.getElementById('charts') as HTMLElement);
root.render(<App />);
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. Use the emptyPointSettings property to control how empty points are handled; the default mode is Gap, which leaves a break in the line at the empty point.

Mode

Use the mode property of emptyPointSettings to control how empty points are rendered. Available modes are Gap (leave a break, the default), Drop (Ignores the empty point during rendering), Zero (plot as zero), and Average (plot as the average of neighboring points).

import * as React from 'react';
import * as ReactDOM from 'react-dom/client';
import {
  ChartComponent,
  SeriesCollectionDirective,
  SeriesDirective,
  Inject,
  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]} />
      <SeriesCollectionDirective>
        <SeriesDirective
          dataSource={areaData}
          xName="x"
          yName="y"
          name="Product A"
          marker={{visible: true}}
          type="Area"
          emptyPointSettings={emptyPoint}
        ></SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  );
}
export default App;
const root = ReactDOM.createRoot(document.getElementById('charts'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom/client";
import type { AxisModel, EmptyPointSettingsModel } from "@syncfusion/ej2-react-charts";
import {
  ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, AreaSeries
}
  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 emptyPoint: EmptyPointSettingsModel = { mode: 'Gap' };

  return <ChartComponent
  id="charts"
  primaryXAxis={primaryxAxis}
  primaryYAxis={primaryyAxis}
  title="Average Sales Comparison"
>
  <Inject services={[AreaSeries]} />
  <SeriesCollectionDirective>
    <SeriesDirective
      dataSource={areaData}
      xName="x"
      yName="y"
      name="Product A"
      marker={{visible: true}}
      type="Area"
      emptyPointSettings={emptyPoint}
    ></SeriesDirective>
  </SeriesCollectionDirective>
</ChartComponent>

};
export default App;
const root = ReactDOM.createRoot(document.getElementById('charts') as HTMLElement);
root.render(<App />);
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 of emptyPointSettings to set the fill color for empty points.

import * as React from 'react';
import * as ReactDOM from 'react-dom/client';
import {
  ChartComponent,
  SeriesCollectionDirective,
  SeriesDirective,
  Inject,
  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]} />
      <SeriesCollectionDirective>
        <SeriesDirective
          dataSource={areaData}
          xName="x"
          yName="y"
          name="Product A"
          marker={{visible: true}}
          type="Area"
          emptyPointSettings={emptyPoint}
        ></SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  );
}
export default App;
const root = ReactDOM.createRoot(document.getElementById('charts'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom/client";
import type { AxisModel, EmptyPointSettingsModel } from "@syncfusion/ej2-react-charts";
import {
  ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, AreaSeries
}
  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 emptyPoint: EmptyPointSettingsModel = { mode: 'Average', fill: 'red' };

  return <ChartComponent
  id="charts"
  primaryXAxis={primaryxAxis}
  primaryYAxis={primaryyAxis}
  title="Average Sales Comparison"
>
  <Inject services={[AreaSeries]} />
  <SeriesCollectionDirective>
    <SeriesDirective
      dataSource={areaData}
      xName="x"
      yName="y"
      name="Product A"
      marker={{visible: true}}
      type="Area"
      emptyPointSettings={emptyPoint}
    ></SeriesDirective>
  </SeriesCollectionDirective>
</ChartComponent>

};
export default App;
const root = ReactDOM.createRoot(document.getElementById('charts') as HTMLElement);
root.render(<App />);
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 of emptyPointSettings to customize the border width and color for empty points.

import * as React from 'react';
import * as ReactDOM from 'react-dom/client';
import {
  ChartComponent,
  SeriesCollectionDirective,
  SeriesDirective,
  Inject,
  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]} />
      <SeriesCollectionDirective>
        <SeriesDirective
          dataSource={areaData}
          xName="x"
          yName="y"
          name="Product A"
          marker={{visible: true}}
          type="Area"
          emptyPointSettings={emptyPoint}
        ></SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  );
}
export default App;
const root = ReactDOM.createRoot(document.getElementById('charts'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom/client";
import type { AxisModel, EmptyPointSettingsModel } from "@syncfusion/ej2-react-charts";
import {
  ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, AreaSeries
}
  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 emptyPoint: EmptyPointSettingsModel = { 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]} />
  <SeriesCollectionDirective>
    <SeriesDirective
      dataSource={areaData}
      xName="x"
      yName="y"
      name="Product A"
      marker={{visible: true}}
      type="Area"
      emptyPointSettings={emptyPoint}
    ></SeriesDirective>
  </SeriesCollectionDirective>
</ChartComponent>

};
export default App;
const root = ReactDOM.createRoot(document.getElementById('charts') as HTMLElement);
root.render(<App />);
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 fires before each series is rendered. Use its event arguments to modify the series data, fill, or name dynamically before rendering.

import * as React from 'react';
import * as ReactDOM from 'react-dom/client';
import {
  ChartComponent,
  SeriesCollectionDirective,
  SeriesDirective,
  Inject,
  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]} />
      <SeriesCollectionDirective>
        <SeriesDirective
          dataSource={areaData}
          xName="x"
          yName="y"
          name="Product A"
          type="Area"
        ></SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  );
}
export default App;
const root = ReactDOM.createRoot(document.getElementById('charts'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom/client";
import type { AxisModel, ISeriesRenderEventArgs } from "@syncfusion/ej2-react-charts";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, AreaSeries } from '@syncfusion/ej2-react-charts';
import type { EmitType } from '@syncfusion/ej2-base';
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 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]} />
    <SeriesCollectionDirective>
      <SeriesDirective
        dataSource={areaData}
        xName="x"
        yName="y"
        name="Product A"
        type="Area"
      ></SeriesDirective>
    </SeriesCollectionDirective>
  </ChartComponent>

};
export default App;
const root = ReactDOM.createRoot(document.getElementById('charts') as HTMLElement);
root.render(<App />);
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 fires for each data point before it is drawn. Use its event arguments to customize the appearance of individual points before they are rendered.

import * as React from 'react';
import * as ReactDOM from 'react-dom/client';
import {
  ChartComponent,
  SeriesCollectionDirective,
  SeriesDirective,
  Inject,
  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]} />
      <SeriesCollectionDirective>
        <SeriesDirective
          dataSource={areaData}
          xName="x"
          yName="y"
          name="Product A"
          marker={{visible: true}}
          type="Area"
        ></SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  );
}
export default App;
const root = ReactDOM.createRoot(document.getElementById('charts'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom/client";
import type { AxisModel, IPointRenderEventArgs } from "@syncfusion/ej2-react-charts";
import {
  ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, AreaSeries, IPointRenderEventArgs
}
  from '@syncfusion/ej2-react-charts';
import type { EmitType } from '@syncfusion/ej2-base';
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 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]} />
    <SeriesCollectionDirective>
      <SeriesDirective
        dataSource={areaData}
        xName="x"
        yName="y"
        name="Product A"
        marker={{visible: true}}
        type="Area"
      ></SeriesDirective>
    </SeriesCollectionDirective>
  </ChartComponent>

};
export default App;
const root = ReactDOM.createRoot(document.getElementById('charts') as HTMLElement);
root.render(<App />);
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