Range Area Chart in React Chart

17 Aug 202624 minutes to read

Range area

Follow these steps to render a range area series, which fills the area between an upper and lower bound for each data point. Use it to visualize data with a value range, such as temperature or stock prices.

  1. Set the series type: Set the series type to RangeArea in the series configuration.

  2. Inject the RangeAreaSeries module: Add RangeAreaSeries to the services array of the Inject component inside ChartComponent. This registers the functionality required to render a range area series.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, RangeAreaSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
    const marker = { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } };
    return <ChartComponent id='charts'>
      <Inject services={[RangeAreaSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' high='high' low='low' width={3} name='India' type='RangeArea' marker={marker}>
        </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,
         Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, RangeAreaSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { data } from './datasource';

function App() {

  const marker = { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } };

  return <ChartComponent id='charts'>
      <Inject services={[RangeAreaSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' high='high' low='low' width={3}
          name='India' type='RangeArea'
          marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let data = [
    { x: 2005, y: 28, high: 18, low: 44 },
    { x: 2006, y: 25, high: 20, low: 40 },
    { x: 2007, y: 26, high: 22, low: 36 },
    { x: 2008, y: 27, high: 24, low: 32 },
    { x: 2009, y: 32, high: 26, low: 28 },
    { x: 2010, y: 35, high: 28, low: 24 },
    { x: 2011, y: 30, high: 30, low: 20 }
];
export let data: Object[] = [
    { x: 2005, y: 28, high: 18, low: 44 },
    { x: 2006, y: 25, high: 20, low: 40 },
    { x: 2007, y: 26, high: 22, low: 36 },
    { x: 2008, y: 27, high: 24, low: 32 },
    { x: 2009, y: 32, high: 26, low: 28 },
    { x: 2010, y: 35, high: 28, low: 24 },
    { x: 2011, y: 30, high: 30, low: 20 }
];

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, high, and low properties. The RangeArea series requires two y-values per point: high defines the upper bound and low the lower bound of the filled area. Each data point should also have an xName value for the x-axis category.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, RangeAreaSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
    const marker = { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } };
    return <ChartComponent id='charts'>
      <Inject services={[RangeAreaSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' high='high' low='low' width={3} name='India' type='RangeArea' marker={marker}>
        </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,
         Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, RangeAreaSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { data } from './datasource';

function App() {

  const marker = { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } };

  return <ChartComponent id='charts'>
      <Inject services={[RangeAreaSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' high='high' low='low' width={3}
          name='India' type='RangeArea'
          marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let data = [
    { x: 2005, y: 28, high: 18, low: 44 },
    { x: 2006, y: 25, high: 20, low: 40 },
    { x: 2007, y: 26, high: 22, low: 36 },
    { x: 2008, y: 27, high: 24, low: 32 },
    { x: 2009, y: 32, high: 26, low: 28 },
    { x: 2010, y: 35, high: 28, low: 24 },
    { x: 2011, y: 30, high: 30, low: 20 }
];
export let data: Object[] = [
    { x: 2005, y: 28, high: 18, low: 44 },
    { x: 2006, y: 25, high: 20, low: 40 },
    { x: 2007, y: 26, high: 22, low: 36 },
    { x: 2008, y: 27, high: 24, low: 32 },
    { x: 2009, y: 32, high: 26, low: 28 },
    { x: 2010, y: 35, high: 28, low: 24 },
    { x: 2011, y: 30, high: 30, low: 20 }
];

Series customization

Customize the range area’s appearance with the following properties. Defaults are taken from the standard Series model.

Property Type Default Description
fill string null Color applied to the area. Accepts a CSS color or a gradient model.
opacity number 1 Transparency of the fill (0 to 1).
border BorderModel null Border settings: width, color, and dashArray (e.g., '5 5').

Solid fill

The fill property determines the color applied to the area.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, RangeAreaSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
    return <ChartComponent id='charts'>
       <Inject services={[RangeAreaSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' high='low' low='high' fill='yellow'
          type='RangeArea'>
        </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,
         Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, RangeAreaSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { data } from './datasource';

function App() {
  return <ChartComponent id='charts'>
      <Inject services={[RangeAreaSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' high='low' low='high' fill='yellow'
          type='RangeArea'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let data = [
    { x: 2005, y: 28, high: 18, low: 44 },
    { x: 2006, y: 25, high: 20, low: 40 },
    { x: 2007, y: 26, high: 22, low: 36 },
    { x: 2008, y: 27, high: 24, low: 32 },
    { x: 2009, y: 32, high: 26, low: 28 },
    { x: 2010, y: 35, high: 28, low: 24 },
    { x: 2011, y: 30, high: 30, low: 20 }
];
export let data: Object[] = [
    { x: 2005, y: 28, high: 18, low: 44 },
    { x: 2006, y: 25, high: 20, low: 40 },
    { x: 2007, y: 26, high: 22, low: 36 },
    { x: 2008, y: 27, high: 24, low: 32 },
    { x: 2009, y: 32, high: 26, low: 28 },
    { x: 2010, y: 35, high: 28, low: 24 },
    { x: 2011, y: 30, high: 30, low: 20 }
];

Gradient fill

The fill property can be set to a CSS gradient reference such as url(#gradient) to apply a gradient color that transitions smoothly across the area. Define the gradient in an SVG <defs> block and reference it from the fill prop.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, RangeAreaSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
    return <ChartComponent id='charts'>
       <Inject services={[RangeAreaSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' high='low' low='high' fill='url(#gradient)'
          type='RangeArea'>
        </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,
         Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, RangeAreaSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { data } from './datasource';

function App() {
  return <ChartComponent id='charts'>
      <Inject services={[RangeAreaSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' high='low' low='high' fill='url(#gradient)'
          type='RangeArea'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let data = [
    { x: 2005, y: 28, high: 18, low: 44 },
    { x: 2006, y: 25, high: 20, low: 40 },
    { x: 2007, y: 26, high: 22, low: 36 },
    { x: 2008, y: 27, high: 24, low: 32 },
    { x: 2009, y: 32, high: 26, low: 28 },
    { x: 2010, y: 35, high: 28, low: 24 },
    { x: 2011, y: 30, high: 30, low: 20 }
];
export let data: Object[] = [
    { x: 2005, y: 28, high: 18, low: 44 },
    { x: 2006, y: 25, high: 20, low: 40 },
    { x: 2007, y: 26, high: 22, low: 36 },
    { x: 2008, y: 27, high: 24, low: 32 },
    { x: 2009, y: 32, high: 26, low: 28 },
    { x: 2010, y: 35, high: 28, low: 24 },
    { x: 2011, y: 30, high: 30, low: 20 }
];

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";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, RangeAreaSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
    return <ChartComponent id='charts'>
       <Inject services={[RangeAreaSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' high='low' low='high' opacity={0.5}
          type='RangeArea'>
        </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,
         Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, RangeAreaSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { data } from './datasource';

function App() {
  return <ChartComponent id='charts'>
      <Inject services={[RangeAreaSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' high='low' low='high' opacity={0.5}
          type='RangeArea'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let data = [
    { x: 2005, y: 28, high: 18, low: 44 },
    { x: 2006, y: 25, high: 20, low: 40 },
    { x: 2007, y: 26, high: 22, low: 36 },
    { x: 2008, y: 27, high: 24, low: 32 },
    { x: 2009, y: 32, high: 26, low: 28 },
    { x: 2010, y: 35, high: 28, low: 24 },
    { x: 2011, y: 30, high: 30, low: 20 }
];
export let data: Object[] = [
    { x: 2005, y: 28, high: 18, low: 44 },
    { x: 2006, y: 25, high: 20, low: 40 },
    { x: 2007, y: 26, high: 22, low: 36 },
    { x: 2008, y: 27, high: 24, low: 32 },
    { x: 2009, y: 32, high: 26, low: 28 },
    { x: 2010, y: 35, high: 28, low: 24 },
    { x: 2011, y: 30, high: 30, low: 20 }
];

Border

Use the border property to configure the border width, color, and dashArray of the range area series.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Category, RangeAreaSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';

function App() {
  const border = { width: 2, color: 'red', dashArray: '5,5' };
  const primaryXAxis = {
    valueType: 'Category',
    title: 'Month',
    edgeLabelPlacement: 'Shift',
    majorGridLines: { width: 0 }
  };
  const primaryYAxis = {
    title: 'Temperature',
    labelFormat: '{value}ËšC',
    lineStyle: { width: 0 },
    minimum: 0,
    maximum: 30,
    majorTickLines: { width: 0 }
  };

  return <ChartComponent id='charts' primaryXAxis={primaryXAxis} primaryYAxis={primaryYAxis} title='Monthly Temperature Range'>
    <Inject services={[RangeAreaSeries, Category]} />
    <SeriesCollectionDirective>
      <SeriesDirective dataSource={data} xName='x' high='low' low='high' type='RangeArea' border={border}>
      </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, AxisModel, BorderModel, Category, RangeAreaSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';

function App() {
  const border: BorderModel = { width: 2, color: 'red', dashArray: '5,5' };
  const primaryXAxis: AxisModel = {
    valueType: 'Category',
    title: 'Month',
    edgeLabelPlacement: 'Shift',
    majorGridLines: { width: 0 }
  };
  const primaryYAxis: AxisModel = {
    title: 'Temperature',
    labelFormat: '{value}ËšC',
    lineStyle: { width: 0 },
    minimum: 0,
    maximum: 30,
    majorTickLines: { width: 0 }
  };

  return <ChartComponent id='charts' primaryXAxis={primaryXAxis} primaryYAxis={primaryYAxis} title='Monthly Temperature Range'>
    <Inject services={[RangeAreaSeries, Category]} />
    <SeriesCollectionDirective>
      <SeriesDirective dataSource={data} xName='x' high='low' low='high' type='RangeArea' border={border}>
      </SeriesDirective>
    </SeriesCollectionDirective>
  </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let data = [
    { x: 'Jan', high: 14, low: 4 },
    { x: 'Feb', high: 17, low: 7 },
    { x: 'Mar', high: 20, low: 10 },
    { x: 'Apr', high: 22, low: 12 },
    { x: 'May', high: 20, low: 10 },
    { x: 'Jun', high: 17, low: 7 },
    { x: 'Jul', high: 15, low: 5 },
    { x: 'Aug', high: 17, low: 7 },
    { x: 'Sep', high: 20, low: 10 },
    { x: 'Oct', high: 22, low: 12 },
    { x: 'Nov', high: 20, low: 10 },
    { x: 'Dec', high: 17, low: 7 }
];
export let data: Object[] = [
    { x: 'Jan', high: 14, low: 4 },
    { x: 'Feb', high: 17, low: 7 },
    { x: 'Mar', high: 20, low: 10 },
    { x: 'Apr', high: 22, low: 12 },
    { x: 'May', high: 20, low: 10 },
    { x: 'Jun', high: 17, low: 7 },
    { x: 'Jul', high: 15, low: 5 },
    { x: 'Aug', high: 17, low: 7 },
    { x: 'Sep', high: 20, low: 10 },
    { x: 'Oct', high: 22, low: 12 },
    { x: 'Nov', high: 20, low: 10 },
    { x: 'Dec', high: 17, low: 7 }
];

Empty points

Data points with null or undefined values are considered empty. By default (mode: 'Gap'), empty points leave a gap in the area; the mode property lets you change how they are handled.

Mode

Use the mode property to control handling of empty points. Available modes: Gap, Drop, Zero, Average. The default mode is Gap.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, RangeAreaSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
  const emptyPoint = { mode: 'Gap' };
    return <ChartComponent id='charts'>
       <Inject services={[RangeAreaSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' high='low' low='high' emptyPointSettings={emptyPoint}
          type='RangeArea'>
        </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,
         Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, RangeAreaSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { data } from './datasource';

function App() {
  const emptyPoint: object = { mode: 'Gap' };
  return <ChartComponent id='charts'>
      <Inject services={[RangeAreaSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' high='low' low='high' emptyPointSettings={emptyPoint}
          type='RangeArea'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let data = [
    { x: 2005, y: 28, high: 18, low: 44 },
    { x: 2006, y: 25, high: 20, low: 40 },
    { x: 2007, y: 26, high: 22, low: 36 },
    { x: 2008, y: 27, high: 24, low: null },
    { x: 2009, y: 32, high: 26, low: 28 },
    { x: 2010, y: 35, high: 28, low: 24 },
    { x: 2011, y: 30, high: 30, low: 20 },
];
export let data: Object[] = [
    { x: 2005, y: 28, high: 18, low: 44 },
    { x: 2006, y: 25, high: 20, low: 40 },
    { x: 2007, y: 26, high: 22, low: 36 },
    { x: 2008, y: 27, high: 24, low: null },
    { x: 2009, y: 32, high: 26, low: 28 },
    { x: 2010, y: 35, high: 28, low: 24 },
    { x: 2011, y: 30, high: 30, low: 20 },
];

Fill

Use the fill property to set the fill color for empty points.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, RangeAreaSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
  const emptyPoint = { mode: 'Average', fill: 'red' };
  const marker = { visible: true };
    return <ChartComponent id='charts'>
       <Inject services={[RangeAreaSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' high='low' low='high' emptyPointSettings={emptyPoint} marker={marker}
          type='RangeArea'>
        </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,
         Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, RangeAreaSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { data } from './datasource';

function App() {
  const emptyPoint: object = { mode: 'Average', fill: 'red' };
  const marker: object = { visible: true };
  return <ChartComponent id='charts'>
      <Inject services={[RangeAreaSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' high='low' low='high' emptyPointSettings={emptyPoint} marker={marker}
          type='RangeArea'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let data = [
    { x: 2005, y: 28, high: 18, low: 44 },
    { x: 2006, y: 25, high: 20, low: 40 },
    { x: 2007, y: 26, high: 22, low: 36 },
    { x: 2008, y: 27, high: 24, low: null },
    { x: 2009, y: 32, high: 26, low: 28 },
    { x: 2010, y: 35, high: 28, low: 24 },
    { x: 2011, y: 30, high: 30, low: 20 },
];
export let data: Object[] = [
    { x: 2005, y: 28, high: 18, low: 44 },
    { x: 2006, y: 25, high: 20, low: 40 },
    { x: 2007, y: 26, high: 22, low: 36 },
    { x: 2008, y: 27, high: 24, low: null },
    { x: 2009, y: 32, high: 26, low: 28 },
    { x: 2010, y: 35, high: 28, low: 24 },
    { x: 2011, y: 30, high: 30, low: 20 },
];

Border

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

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, RangeAreaSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
  const emptyPoint = { mode: 'Average', fill: 'red', border: { width: 1.5, fill: 'green' } };
  const marker = { visible: true };
    return <ChartComponent id='charts'>
       <Inject services={[RangeAreaSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' high='low' low='high' emptyPointSettings={emptyPoint} marker={marker}
          type='RangeArea'>
        </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,
         Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, RangeAreaSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { data } from './datasource';

function App() {
  const emptyPoint: object = { mode: 'Average', fill: 'red', border: { width: 1.5, fill: 'green' } };
  const marker: object = { visible: true };
  return <ChartComponent id='charts'>
      <Inject services={[RangeAreaSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' high='low' low='high' emptyPointSettings={emptyPoint} marker={marker}
          type='RangeArea'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let data = [
    { x: 2005, y: 28, high: 18, low: 44 },
    { x: 2006, y: 25, high: 20, low: 40 },
    { x: 2007, y: 26, high: 22, low: 36 },
    { x: 2008, y: 27, high: 24, low: null },
    { x: 2009, y: 32, high: 26, low: 28 },
    { x: 2010, y: 35, high: 28, low: 24 },
    { x: 2011, y: 30, high: 30, low: 20 },
];
export let data: Object[] = [
    { x: 2005, y: 28, high: 18, low: 44 },
    { x: 2006, y: 25, high: 20, low: 40 },
    { x: 2007, y: 26, high: 22, low: 36 },
    { x: 2008, y: 27, high: 24, low: null },
    { x: 2009, y: 32, high: 26, low: 28 },
    { x: 2010, y: 35, high: 28, low: 24 },
    { x: 2011, y: 30, high: 30, low: 20 },
];

Events

Series render

The seriesRender event fires before each series is rendered and lets you modify series properties such as data, fill, or name. For a range area series, use it to change the area color or to swap data sources on the fly.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, RangeAreaSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
  const seriesRender = (args) => {
    args.fill = '#ff6347';
  }
    return <ChartComponent id='charts' seriesRender={seriesRender}>
       <Inject services={[RangeAreaSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' high='low' low='high'
          type='RangeArea'>
        </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,
         Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, RangeAreaSeries, ISeriesRenderEventArgs}
from'@syncfusion/ej2-react-charts';
import { data } from './datasource';

function App() {
  const seriesRender = (args: ISeriesRenderEventArgs) => {
    args.fill = '#ff6347';
  }
  
  return <ChartComponent id='charts' seriesRender={seriesRender}>
      <Inject services={[RangeAreaSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' high='low' low='high'
          type='RangeArea'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let data = [
    { x: 2005, y: 28, high: 18, low: 44 },
    { x: 2006, y: 25, high: 20, low: 40 },
    { x: 2007, y: 26, high: 22, low: 36 },
    { x: 2008, y: 27, high: 24, low: 32 },
    { x: 2009, y: 32, high: 26, low: 28 },
    { x: 2010, y: 35, high: 28, low: 24 },
    { x: 2011, y: 30, high: 30, low: 20 },
];
export let data: Object[] = [
    { x: 2005, y: 28, high: 18, low: 44 },
    { x: 2006, y: 25, high: 20, low: 40 },
    { x: 2007, y: 26, high: 22, low: 36 },
    { x: 2008, y: 27, high: 24, low: 32 },
    { x: 2009, y: 32, high: 26, low: 28 },
    { x: 2010, y: 35, high: 28, low: 24 },
    { x: 2011, y: 30, high: 30, low: 20 },
];

Point render

The pointRender event fires before each data point is drawn, letting you customize per-point marker shape, border, or fill. For a range area series, use it to color the upper and lower bounds differently.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, RangeAreaSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
  const pointRender = (args) => {
    if (args.point.index % 2 !== 0) {
      args.fill = '#ff6347';
  }
  else {
      args.fill = '#009cb8';
  }
  }
    return <ChartComponent id='charts' pointRender={pointRender}>
       <Inject services={[RangeAreaSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' high='low' low='high' marker={{visible: true}}
          type='RangeArea'>
        </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,
         Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, RangeAreaSeries, IPointRenderEventArgs}
from'@syncfusion/ej2-react-charts';
import { data } from './datasource';

function App() {
  const pointRender = (args: IPointRenderEventArgs) => {
    if (args.point.index % 2 !== 0) {
      args.fill = '#ff6347';
  }
  else {
      args.fill = '#009cb8';
  }
  }
  
  return <ChartComponent id='charts' pointRender={pointRender}>
      <Inject services={[RangeAreaSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' high='low' low='high' marker={{visible: true}}
          type='RangeArea'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let data = [
    { x: 2005, y: 28, high: 18, low: 44 },
    { x: 2006, y: 25, high: 20, low: 40 },
    { x: 2007, y: 26, high: 22, low: 36 },
    { x: 2008, y: 27, high: 24, low: 32 },
    { x: 2009, y: 32, high: 26, low: 28 },
    { x: 2010, y: 35, high: 28, low: 24 },
    { x: 2011, y: 30, high: 30, low: 20 },
];
export let data: Object[] = [
    { x: 2005, y: 28, high: 18, low: 44 },
    { x: 2006, y: 25, high: 20, low: 40 },
    { x: 2007, y: 26, high: 22, low: 36 },
    { x: 2008, y: 27, high: 24, low: 32 },
    { x: 2009, y: 32, high: 26, low: 28 },
    { x: 2010, y: 35, high: 28, low: 24 },
    { x: 2011, y: 30, high: 30, low: 20 },
];

See also