Spline Range Area Chart in React Chart
17 Aug 202624 minutes to read
Spline range area
Follow these steps to render a spline range area series, which fills the area between smooth curved high and low value lines through your data points.
-
Set the series type: Set the series
typetoSplineRangeAreain the series configuration. -
Inject the SplineRangeAreaSeries module: Add
SplineRangeAreaSeriesto theservicesarray of theInjectcomponent insideChartComponent. This registers the functionality required to render a spline range area series.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Category, SplineRangeAreaSeries } from '@syncfusion/ej2-react-charts';
import { splineRangeData } from './datasource';
function App() {
const primaryxAxis = {
valueType: 'Category',
edgeLabelPlacement: 'Shift',
majorGridLines: { width: 0 }
};
const primaryyAxis = {
labelFormat: '{value}˚C',
lineStyle: { width: 0 },
minimum: 0, maximum: 40,
majorTickLines: { width: 0 }
};
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Monthly Temperature Range'>
<Inject services={[SplineRangeAreaSeries, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={splineRangeData} xName='x' high='high' low='low' name='England' type='SplineRangeArea'>
</SeriesDirective>
<SeriesDirective dataSource={splineRangeData} xName='x' high='high1' low='low1' name='India' type='SplineRangeArea'>
</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, Category, SplineRangeAreaSeries} from'@syncfusion/ej2-react-charts';
import { splineRangeData } from './datasource';
function App() {
const primaryxAxis: AxisModel = {
valueType: 'Category',
edgeLabelPlacement: 'Shift',
majorGridLines: { width: 0 }
};
const primaryyAxis: AxisModel = {
labelFormat: '{value}˚C',
lineStyle: { width: 0 },
minimum: 0, maximum: 40,
majorTickLines: { width: 0 }
};
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
title='Monthly Temperature Range'>
<Inject services={[SplineRangeAreaSeries, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={splineRangeData} xName='x' high='high' low='low' name='England' type='SplineRangeArea'>
</SeriesDirective>
<SeriesDirective dataSource={splineRangeData} xName='x' high='high1' low='low1' name='India' type='SplineRangeArea'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));export let splineRangeData = [
{ x: 'Jan', high: 14, low: 4, high1: 29, low1: 19 },
{ x: 'Feb', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Mar', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Apr', high: 22, low: 12, high1: 37, low1: 27 },
{ x: 'May', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Jun', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Jul', high: 15, low: 5, high1: 30, low1: 20 },
{ x: 'Aug', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Sep', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Oct', high: 22, low: 12, high1: 37, low1: 27 },
{ x: 'Nov', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Dec', high: 17, low: 7, high1: 32, low1: 22 }
];export let splineRangeData: Object[] = [
{ x: 'Jan', high: 14, low: 4, high1: 29, low1: 19 },
{ x: 'Feb', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Mar', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Apr', high: 22, low: 12, high1: 37, low1: 27 },
{ x: 'May', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Jun', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Jul', high: 15, low: 5, high1: 30, low1: 20 },
{ x: 'Aug', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Sep', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Oct', high: 22, low: 12, high1: 37, low1: 27 },
{ x: 'Nov', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Dec', high: 17, low: 7, high1: 32, low1: 22 }
];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.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Category, SplineRangeAreaSeries } from '@syncfusion/ej2-react-charts';
import { splineRangeData } from './datasource';
function App() {
const primaryxAxis = {
valueType: 'Category',
edgeLabelPlacement: 'Shift',
majorGridLines: { width: 0 }
};
const primaryyAxis = {
labelFormat: '{value}˚C',
lineStyle: { width: 0 },
minimum: 0, maximum: 40,
majorTickLines: { width: 0 }
};
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Monthly Temperature Range'>
<Inject services={[SplineRangeAreaSeries, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={splineRangeData} xName='x' high='high' low='low' name='England' type='SplineRangeArea'>
</SeriesDirective>
<SeriesDirective dataSource={splineRangeData} xName='x' high='high1' low='low1' name='India' type='SplineRangeArea'>
</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, Category, SplineRangeAreaSeries} from'@syncfusion/ej2-react-charts';
import { splineRangeData } from './datasource';
function App() {
const primaryxAxis: AxisModel = {
valueType: 'Category',
edgeLabelPlacement: 'Shift',
majorGridLines: { width: 0 }
};
const primaryyAxis: AxisModel = {
labelFormat: '{value}˚C',
lineStyle: { width: 0 },
minimum: 0, maximum: 40,
majorTickLines: { width: 0 }
};
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
title='Monthly Temperature Range'>
<Inject services={[SplineRangeAreaSeries, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={splineRangeData} xName='x' high='high' low='low' name='England' type='SplineRangeArea'>
</SeriesDirective>
<SeriesDirective dataSource={splineRangeData} xName='x' high='high1' low='low1' name='India' type='SplineRangeArea'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));export let splineRangeData = [
{ x: 'Jan', high: 14, low: 4, high1: 29, low1: 19 },
{ x: 'Feb', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Mar', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Apr', high: 22, low: 12, high1: 37, low1: 27 },
{ x: 'May', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Jun', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Jul', high: 15, low: 5, high1: 30, low1: 20 },
{ x: 'Aug', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Sep', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Oct', high: 22, low: 12, high1: 37, low1: 27 },
{ x: 'Nov', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Dec', high: 17, low: 7, high1: 32, low1: 22 }
];export let splineRangeData: Object[] = [
{ x: 'Jan', high: 14, low: 4, high1: 29, low1: 19 },
{ x: 'Feb', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Mar', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Apr', high: 22, low: 12, high1: 37, low1: 27 },
{ x: 'May', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Jun', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Jul', high: 15, low: 5, high1: 30, low1: 20 },
{ x: 'Aug', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Sep', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Oct', high: 22, low: 12, high1: 37, low1: 27 },
{ x: 'Nov', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Dec', high: 17, low: 7, high1: 32, low1: 22 }
];Series customization
Customize the spline 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 reference. |
opacity |
number | 1 |
Transparency of the fill (0 to 1). |
border |
BorderModel |
null |
Border settings: width, color, and dashArray. |
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, Category, SplineRangeAreaSeries } from '@syncfusion/ej2-react-charts';
import { splineRangeData } from './datasource';
function App() {
const primaryxAxis = {
valueType: 'Category',
edgeLabelPlacement: 'Shift',
majorGridLines: { width: 0 }
};
const primaryyAxis = {
labelFormat: '{value}˚C',
lineStyle: { width: 0 },
minimum: 0, maximum: 40,
majorTickLines: { width: 0 }
};
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Monthly Temperature Range'>
<Inject services={[SplineRangeAreaSeries, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={splineRangeData} xName='x' high='high' low='low' name='England' fill='yellow' type='SplineRangeArea'>
</SeriesDirective>
<SeriesDirective dataSource={splineRangeData} xName='x' high='high1' low='low1' name='India' fill='brown' type='SplineRangeArea'>
</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, Category, SplineRangeAreaSeries} from'@syncfusion/ej2-react-charts';
import { splineRangeData } from './datasource';
function App() {
const primaryxAxis: AxisModel = {
valueType: 'Category',
edgeLabelPlacement: 'Shift',
majorGridLines: { width: 0 }
};
const primaryyAxis: AxisModel = {
labelFormat: '{value}˚C',
lineStyle: { width: 0 },
minimum: 0, maximum: 40,
majorTickLines: { width: 0 }
};
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
title='Monthly Temperature Range'>
<Inject services={[SplineRangeAreaSeries, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={splineRangeData} xName='x' high='high' low='low' name='England' fill='yellow' type='SplineRangeArea'>
</SeriesDirective>
<SeriesDirective dataSource={splineRangeData} xName='x' high='high1' low='low1' name='India' fill='brown' type='SplineRangeArea'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));export let splineRangeData = [
{ x: 'Jan', high: 14, low: 4, high1: 29, low1: 19 },
{ x: 'Feb', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Mar', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Apr', high: 22, low: 12, high1: 37, low1: 27 },
{ x: 'May', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Jun', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Jul', high: 15, low: 5, high1: 30, low1: 20 },
{ x: 'Aug', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Sep', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Oct', high: 22, low: 12, high1: 37, low1: 27 },
{ x: 'Nov', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Dec', high: 17, low: 7, high1: 32, low1: 22 }
];export let splineRangeData: Object[] = [
{ x: 'Jan', high: 14, low: 4, high1: 29, low1: 19 },
{ x: 'Feb', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Mar', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Apr', high: 22, low: 12, high1: 37, low1: 27 },
{ x: 'May', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Jun', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Jul', high: 15, low: 5, high1: 30, low1: 20 },
{ x: 'Aug', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Sep', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Oct', high: 22, low: 12, high1: 37, low1: 27 },
{ x: 'Nov', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Dec', high: 17, low: 7, high1: 32, low1: 22 }
];Gradient fill
The fill property can be set to a CSS gradient reference such as url(#gradient) to apply a gradient color that transitions 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, Category, SplineRangeAreaSeries } from '@syncfusion/ej2-react-charts';
import { splineRangeData } from './datasource';
function App() {
const primaryxAxis = {
valueType: 'Category',
edgeLabelPlacement: 'Shift',
majorGridLines: { width: 0 }
};
const primaryyAxis = {
labelFormat: '{value}˚C',
lineStyle: { width: 0 },
minimum: 0, maximum: 40,
majorTickLines: { width: 0 }
};
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Monthly Temperature Range'>
<Inject services={[SplineRangeAreaSeries, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={splineRangeData} xName='x' high='high' low='low' name='England' fill='url(#gradient1)' type='SplineRangeArea'>
</SeriesDirective>
<SeriesDirective dataSource={splineRangeData} xName='x' high='high1' low='low1' name='India' fill='url(#gradient2)' type='SplineRangeArea'>
</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, Category, SplineRangeAreaSeries} from'@syncfusion/ej2-react-charts';
import { splineRangeData } from './datasource';
function App() {
const primaryxAxis: AxisModel = {
valueType: 'Category',
edgeLabelPlacement: 'Shift',
majorGridLines: { width: 0 }
};
const primaryyAxis: AxisModel = {
labelFormat: '{value}˚C',
lineStyle: { width: 0 },
minimum: 0, maximum: 40,
majorTickLines: { width: 0 }
};
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
title='Monthly Temperature Range'>
<Inject services={[SplineRangeAreaSeries, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={splineRangeData} xName='x' high='high' low='low' name='England' fill='url(#gradient1)' type='SplineRangeArea'>
</SeriesDirective>
<SeriesDirective dataSource={splineRangeData} xName='x' high='high1' low='low1' name='India' fill='url(#gradient2)' type='SplineRangeArea'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));export let splineRangeData = [
{ x: 'Jan', high: 14, low: 4, high1: 29, low1: 19 },
{ x: 'Feb', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Mar', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Apr', high: 22, low: 12, high1: 37, low1: 27 },
{ x: 'May', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Jun', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Jul', high: 15, low: 5, high1: 30, low1: 20 },
{ x: 'Aug', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Sep', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Oct', high: 22, low: 12, high1: 37, low1: 27 },
{ x: 'Nov', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Dec', high: 17, low: 7, high1: 32, low1: 22 }
];export let splineRangeData: Object[] = [
{ x: 'Jan', high: 14, low: 4, high1: 29, low1: 19 },
{ x: 'Feb', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Mar', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Apr', high: 22, low: 12, high1: 37, low1: 27 },
{ x: 'May', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Jun', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Jul', high: 15, low: 5, high1: 30, low1: 20 },
{ x: 'Aug', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Sep', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Oct', high: 22, low: 12, high1: 37, low1: 27 },
{ x: 'Nov', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Dec', high: 17, low: 7, high1: 32, low1: 22 }
];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, Category, SplineRangeAreaSeries } from '@syncfusion/ej2-react-charts';
import { splineRangeData } from './datasource';
function App() {
const primaryxAxis = {
valueType: 'Category',
edgeLabelPlacement: 'Shift',
majorGridLines: { width: 0 }
};
const primaryyAxis = {
labelFormat: '{value}˚C',
lineStyle: { width: 0 },
minimum: 0, maximum: 40,
majorTickLines: { width: 0 }
};
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Monthly Temperature Range'>
<Inject services={[SplineRangeAreaSeries, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={splineRangeData} xName='x' high='high' low='low' name='England' opacity={0.5} type='SplineRangeArea'>
</SeriesDirective>
<SeriesDirective dataSource={splineRangeData} xName='x' high='high1' low='low1' name='India' opacity={0.5} type='SplineRangeArea'>
</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, Category, SplineRangeAreaSeries} from'@syncfusion/ej2-react-charts';
import { splineRangeData } from './datasource';
function App() {
const primaryxAxis: AxisModel = {
valueType: 'Category',
edgeLabelPlacement: 'Shift',
majorGridLines: { width: 0 }
};
const primaryyAxis: AxisModel = {
labelFormat: '{value}˚C',
lineStyle: { width: 0 },
minimum: 0, maximum: 40,
majorTickLines: { width: 0 }
};
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
title='Monthly Temperature Range'>
<Inject services={[SplineRangeAreaSeries, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={splineRangeData} xName='x' high='high' low='low' name='England' opacity={0.5} type='SplineRangeArea'>
</SeriesDirective>
<SeriesDirective dataSource={splineRangeData} xName='x' high='high1' low='low1' name='India' opacity={0.5} type='SplineRangeArea'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));export let splineRangeData = [
{ x: 'Jan', high: 14, low: 4, high1: 29, low1: 19 },
{ x: 'Feb', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Mar', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Apr', high: 22, low: 12, high1: 37, low1: 27 },
{ x: 'May', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Jun', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Jul', high: 15, low: 5, high1: 30, low1: 20 },
{ x: 'Aug', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Sep', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Oct', high: 22, low: 12, high1: 37, low1: 27 },
{ x: 'Nov', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Dec', high: 17, low: 7, high1: 32, low1: 22 }
];export let splineRangeData: Object[] = [
{ x: 'Jan', high: 14, low: 4, high1: 29, low1: 19 },
{ x: 'Feb', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Mar', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Apr', high: 22, low: 12, high1: 37, low1: 27 },
{ x: 'May', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Jun', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Jul', high: 15, low: 5, high1: 30, low1: 20 },
{ x: 'Aug', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Sep', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Oct', high: 22, low: 12, high1: 37, low1: 27 },
{ x: 'Nov', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Dec', high: 17, low: 7, high1: 32, low1: 22 }
];Border
Use the border property to configure the border width, color, and dashArray of the spline range area series.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Category, SplineRangeAreaSeries, Legend } from '@syncfusion/ej2-react-charts';
import { splineRangeData } from './datasource';
function App() {
const primaryxAxis = {
valueType: 'Category',
title: 'Month',
edgeLabelPlacement: 'Shift',
majorGridLines: { width: 0 }
};
const primaryyAxis = {
title: 'Temperature',
labelFormat: '{value}˚C',
lineStyle: { width: 0 },
minimum: 0,
maximum: 40,
majorTickLines: { width: 0 }
};
const border = { width: 2, color: '#ff4251', dashArray: '5,5' };
const border1 = { width: 2, color: '#4C4C4C', dashArray: '5,5' };
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
title='Monthly Temperature Range'>
<Inject services={[SplineRangeAreaSeries, Category, Legend]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={splineRangeData} xName='x' high='high' low='low' name='England' border={border} type='SplineRangeArea'>
</SeriesDirective>
<SeriesDirective dataSource={splineRangeData} xName='x' high='high1' low='low1' name='India' border={border1} type='SplineRangeArea'>
</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, SplineRangeAreaSeries, Legend } from '@syncfusion/ej2-react-charts';
import { splineRangeData } from './datasource';
function App() {
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: 40,
majorTickLines: { width: 0 }
};
const border: BorderModel = { width: 2, color: '#ff4251', dashArray: '5,5' };
const border1: BorderModel = { width: 2, color: '#4C4C4C', dashArray: '5,5' };
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
title='Monthly Temperature Range'>
<Inject services={[SplineRangeAreaSeries, Category, Legend]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={splineRangeData} xName='x' high='high' low='low' name='England' border={border} type='SplineRangeArea'>
</SeriesDirective>
<SeriesDirective dataSource={splineRangeData} xName='x' high='high1' low='low1' name='India' border={border1} type='SplineRangeArea'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));export let splineRangeData = [
{ x: 'Jan', high: 14, low: 4, high1: 29, low1: 19 },
{ x: 'Feb', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Mar', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Apr', high: 22, low: 12, high1: 37, low1: 27 },
{ x: 'May', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Jun', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Jul', high: 15, low: 5, high1: 30, low1: 20 },
{ x: 'Aug', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Sep', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Oct', high: 22, low: 12, high1: 37, low1: 27 },
{ x: 'Nov', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Dec', high: 17, low: 7, high1: 32, low1: 22 }
];export let splineRangeData: Object[] = [
{ x: 'Jan', high: 14, low: 4, high1: 29, low1: 19 },
{ x: 'Feb', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Mar', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Apr', high: 22, low: 12, high1: 37, low1: 27 },
{ x: 'May', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Jun', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Jul', high: 15, low: 5, high1: 30, low1: 20 },
{ x: 'Aug', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Sep', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Oct', high: 22, low: 12, high1: 37, low1: 27 },
{ x: 'Nov', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Dec', high: 17, low: 7, high1: 32, low1: 22 }
];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, Category, SplineRangeAreaSeries } from '@syncfusion/ej2-react-charts';
import { splineRangeData } from './datasource';
function App() {
const primaryxAxis = {
valueType: 'Category',
edgeLabelPlacement: 'Shift',
majorGridLines: { width: 0 }
};
const primaryyAxis = {
labelFormat: '{value}˚C',
lineStyle: { width: 0 },
minimum: 0, maximum: 40,
majorTickLines: { width: 0 }
};
const marker = { visible: true };
const emptyPoint = { mode: 'Gap' };
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Monthly Temperature Range'>
<Inject services={[SplineRangeAreaSeries, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={splineRangeData} xName='x' high='high' low='low' name='England' emptyPointSettings={emptyPoint} type='SplineRangeArea' 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 { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Category, SplineRangeAreaSeries} from'@syncfusion/ej2-react-charts';
import { splineRangeData } from './datasource';
function App() {
const primaryxAxis: AxisModel = {
valueType: 'Category',
edgeLabelPlacement: 'Shift',
majorGridLines: { width: 0 }
};
const primaryyAxis: AxisModel = {
labelFormat: '{value}˚C',
lineStyle: { width: 0 },
minimum: 0, maximum: 40,
majorTickLines: { width: 0 }
};
const emptyPoint: object = { mode: 'Gap' };
const marker: object = { visible: true };
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
title='Monthly Temperature Range'>
<Inject services={[SplineRangeAreaSeries, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={splineRangeData} xName='x' high='high' low='low' name='England' emptyPointSettings={emptyPoint} type='SplineRangeArea' marker={marker}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));export let splineRangeData = [
{ x: 'Jan', high: 14, low: 4, high1: 29, low1: 19 },
{ x: 'Feb', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Mar', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Apr', high: null, low: 12, high1: 37, low1: 27 },
{ x: 'May', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Jun', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Jul', high: 15, low: 5, high1: 30, low1: 20 },
{ x: 'Aug', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Sep', high: 20, low: 10, high1: undefined, low1: 25 },
{ x: 'Oct', high: 22, low: 12, high1: 37, low1: 27 },
{ x: 'Nov', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Dec', high: 17, low: 7, high1: 32, low1: 22 }
];export let splineRangeData: Object[] = [
{ x: 'Jan', high: 14, low: 4, high1: 29, low1: 19 },
{ x: 'Feb', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Mar', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Apr', high: null, low: 12, high1: 37, low1: 27 },
{ x: 'May', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Jun', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Jul', high: 15, low: 5, high1: 30, low1: 20 },
{ x: 'Aug', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Sep', high: 20, low: 10, high1: undefined, low1: 25 },
{ x: 'Oct', high: 22, low: 12, high1: 37, low1: 27 },
{ x: 'Nov', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Dec', high: 17, low: 7, high1: 32, low1: 22 }
];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, Category, SplineRangeAreaSeries } from '@syncfusion/ej2-react-charts';
import { splineRangeData } from './datasource';
function App() {
const primaryxAxis = {
valueType: 'Category',
edgeLabelPlacement: 'Shift',
majorGridLines: { width: 0 }
};
const primaryyAxis = {
labelFormat: '{value}˚C',
lineStyle: { width: 0 },
minimum: 0, maximum: 40,
majorTickLines: { width: 0 }
};
const marker = { visible: true };
const emptyPoint = { mode: 'Average', fill:'red'};
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Monthly Temperature Range'>
<Inject services={[SplineRangeAreaSeries, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={splineRangeData} xName='x' high='high' low='low' name='England' emptyPointSettings={emptyPoint} type='SplineRangeArea' 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 { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Category, SplineRangeAreaSeries} from'@syncfusion/ej2-react-charts';
import { splineRangeData } from './datasource';
function App() {
const primaryxAxis: AxisModel = {
valueType: 'Category',
edgeLabelPlacement: 'Shift',
majorGridLines: { width: 0 }
};
const primaryyAxis: AxisModel = {
labelFormat: '{value}˚C',
lineStyle: { width: 0 },
minimum: 0, maximum: 40,
majorTickLines: { width: 0 }
};
const emptyPoint: object = { mode: 'Average', fill:'red' };
const marker: object = { visible: true };
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
title='Monthly Temperature Range'>
<Inject services={[SplineRangeAreaSeries, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={splineRangeData} xName='x' high='high' low='low' name='England' emptyPointSettings={emptyPoint} type='SplineRangeArea' marker={marker}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));export let splineRangeData = [
{ x: 'Jan', high: 14, low: 4, high1: 29, low1: 19 },
{ x: 'Feb', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Mar', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Apr', high: null, low: 12, high1: 37, low1: 27 },
{ x: 'May', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Jun', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Jul', high: 15, low: 5, high1: 30, low1: 20 },
{ x: 'Aug', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Sep', high: 20, low: 10, high1: undefined, low1: 25 },
{ x: 'Oct', high: 22, low: 12, high1: 37, low1: 27 },
{ x: 'Nov', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Dec', high: 17, low: 7, high1: 32, low1: 22 }
];export let splineRangeData: Object[] = [
{ x: 'Jan', high: 14, low: 4, high1: 29, low1: 19 },
{ x: 'Feb', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Mar', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Apr', high: null, low: 12, high1: 37, low1: 27 },
{ x: 'May', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Jun', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Jul', high: 15, low: 5, high1: 30, low1: 20 },
{ x: 'Aug', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Sep', high: 20, low: 10, high1: undefined, low1: 25 },
{ x: 'Oct', high: 22, low: 12, high1: 37, low1: 27 },
{ x: 'Nov', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Dec', high: 17, low: 7, high1: 32, low1: 22 }
];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, Category, SplineRangeAreaSeries } from '@syncfusion/ej2-react-charts';
import { splineRangeData } from './datasource';
function App() {
const primaryxAxis = {
valueType: 'Category',
edgeLabelPlacement: 'Shift',
majorGridLines: { width: 0 }
};
const primaryyAxis = {
labelFormat: '{value}˚C',
lineStyle: { width: 0 },
minimum: 0, maximum: 40,
majorTickLines: { width: 0 }
};
const marker = { visible: true };
const emptyPoint = { mode: 'Average', fill:'red', border: {width: 1.5, fill: 'green'}};
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Monthly Temperature Range'>
<Inject services={[SplineRangeAreaSeries, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={splineRangeData} xName='x' high='high' low='low' name='England' emptyPointSettings={emptyPoint} type='SplineRangeArea' 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 { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Category, SplineRangeAreaSeries} from'@syncfusion/ej2-react-charts';
import { splineRangeData } from './datasource';
function App() {
const primaryxAxis: AxisModel = {
valueType: 'Category',
edgeLabelPlacement: 'Shift',
majorGridLines: { width: 0 }
};
const primaryyAxis: AxisModel = {
labelFormat: '{value}˚C',
lineStyle: { width: 0 },
minimum: 0, maximum: 40,
majorTickLines: { width: 0 }
};
const emptyPoint: object = { mode: 'Average', fill:'red', border: {width: 1.5, fill: 'green'} };
const marker: object = { visible: true };
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
title='Monthly Temperature Range'>
<Inject services={[SplineRangeAreaSeries, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={splineRangeData} xName='x' high='high' low='low' name='England' emptyPointSettings={emptyPoint} type='SplineRangeArea' marker={marker}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));export let splineRangeData = [
{ x: 'Jan', high: 14, low: 4, high1: 29, low1: 19 },
{ x: 'Feb', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Mar', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Apr', high: null, low: 12, high1: 37, low1: 27 },
{ x: 'May', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Jun', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Jul', high: 15, low: 5, high1: 30, low1: 20 },
{ x: 'Aug', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Sep', high: 20, low: 10, high1: undefined, low1: 25 },
{ x: 'Oct', high: 22, low: 12, high1: 37, low1: 27 },
{ x: 'Nov', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Dec', high: 17, low: 7, high1: 32, low1: 22 }
];export let splineRangeData: Object[] = [
{ x: 'Jan', high: 14, low: 4, high1: 29, low1: 19 },
{ x: 'Feb', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Mar', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Apr', high: null, low: 12, high1: 37, low1: 27 },
{ x: 'May', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Jun', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Jul', high: 15, low: 5, high1: 30, low1: 20 },
{ x: 'Aug', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Sep', high: 20, low: 10, high1: undefined, low1: 25 },
{ x: 'Oct', high: 22, low: 12, high1: 37, low1: 27 },
{ x: 'Nov', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Dec', high: 17, low: 7, high1: 32, low1: 22 }
];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 spline range area series, use it to change the gradient fill or line color per render or to swap data sources on the fly.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Category, SplineRangeAreaSeries } from '@syncfusion/ej2-react-charts';
import { splineRangeData } from './datasource';
function App() {
const primaryxAxis = {
valueType: 'Category',
edgeLabelPlacement: 'Shift',
majorGridLines: { width: 0 }
};
const primaryyAxis = {
labelFormat: '{value}˚C',
lineStyle: { width: 0 },
minimum: 0, maximum: 40,
majorTickLines: { width: 0 }
};
const marker = { visible: true };
const seriesRender = (args) => {
args.fill = '#ff4251';
};
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Monthly Temperature Range' seriesRender={seriesRender}>
<Inject services={[SplineRangeAreaSeries, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={splineRangeData} xName='x' high='high' low='low' name='England' type='SplineRangeArea' 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 { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Category, SplineRangeAreaSeries, ISeriesRenderEventArgs} from'@syncfusion/ej2-react-charts';
import { splineRangeData } from './datasource';
function App() {
const primaryxAxis: AxisModel = {
valueType: 'Category',
edgeLabelPlacement: 'Shift',
majorGridLines: { width: 0 }
};
const primaryyAxis: AxisModel = {
labelFormat: '{value}˚C',
lineStyle: { width: 0 },
minimum: 0, maximum: 40,
majorTickLines: { width: 0 }
};
const seriesRender: object = (args: ISeriesRenderEventArgs) => {
args.fill = '#ff4251';
}
const marker: object = { visible: true };
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
title='Monthly Temperature Range' seriesRender={seriesRender}>
<Inject services={[SplineRangeAreaSeries, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={splineRangeData} xName='x' high='high' low='low' name='England' type='SplineRangeArea' marker={marker}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));export let splineRangeData = [
{ x: 'Jan', high: 14, low: 4, high1: 29, low1: 19 },
{ x: 'Feb', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Mar', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Apr', high: 15, low: 12, high1: 37, low1: 27 },
{ x: 'May', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Jun', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Jul', high: 15, low: 5, high1: 30, low1: 20 },
{ x: 'Aug', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Sep', high: 20, low: 10, high1: 25, low1: 25 },
{ x: 'Oct', high: 22, low: 12, high1: 37, low1: 27 },
{ x: 'Nov', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Dec', high: 17, low: 7, high1: 32, low1: 22 }
];export let splineRangeData: Object[] = [
{ x: 'Jan', high: 14, low: 4, high1: 29, low1: 19 },
{ x: 'Feb', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Mar', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Apr', high: 15, low: 12, high1: 37, low1: 27 },
{ x: 'May', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Jun', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Jul', high: 15, low: 5, high1: 30, low1: 20 },
{ x: 'Aug', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Sep', high: 20, low: 10, high1: 25, low1: 25 },
{ x: 'Oct', high: 22, low: 12, high1: 37, low1: 27 },
{ x: 'Nov', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Dec', high: 17, low: 7, high1: 32, low1: 22 }
];Point render
The pointRender event fires before each data point is drawn, letting you customize per-point marker shape, border, or fill. For a spline range area series, use it to vary the color along the points in the splines.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Category, SplineRangeAreaSeries } from '@syncfusion/ej2-react-charts';
import { splineRangeData } from './datasource';
function App() {
const primaryxAxis = {
valueType: 'Category',
edgeLabelPlacement: 'Shift',
majorGridLines: { width: 0 }
};
const primaryyAxis = {
labelFormat: '{value}˚C',
lineStyle: { width: 0 },
minimum: 0, maximum: 40,
majorTickLines: { width: 0 }
};
const marker = { visible: true };
const pointRender = (args) => {
if (args.point.index % 2 !== 0) {
args.fill = '#ff6347';
}
else {
args.fill = '#009cb8';
}
};
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Monthly Temperature Range' pointRender={pointRender}>
<Inject services={[SplineRangeAreaSeries, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={splineRangeData} xName='x' high='high' low='low' name='England' type='SplineRangeArea' 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 { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Category, SplineRangeAreaSeries, IPointRenderEventArgs} from'@syncfusion/ej2-react-charts';
import { splineRangeData } from './datasource';
function App() {
const primaryxAxis: AxisModel = {
valueType: 'Category',
edgeLabelPlacement: 'Shift',
majorGridLines: { width: 0 }
};
const primaryyAxis: AxisModel = {
labelFormat: '{value}˚C',
lineStyle: { width: 0 },
minimum: 0, maximum: 40,
majorTickLines: { width: 0 }
};
const pointRender: object = (args: IPointRenderEventArgs) => {
if (args.point.index % 2 !== 0) {
args.fill = '#ff6347';
}
else {
args.fill = '#009cb8';
}
}
const marker: object = { visible: true };
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
title='Monthly Temperature Range' pointRender={pointRender}>
<Inject services={[SplineRangeAreaSeries, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={splineRangeData} xName='x' high='high' low='low' name='England' type='SplineRangeArea' marker={marker}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));export let splineRangeData = [
{ x: 'Jan', high: 14, low: 4, high1: 29, low1: 19 },
{ x: 'Feb', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Mar', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Apr', high: 15, low: 12, high1: 37, low1: 27 },
{ x: 'May', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Jun', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Jul', high: 15, low: 5, high1: 30, low1: 20 },
{ x: 'Aug', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Sep', high: 20, low: 10, high1: 25, low1: 25 },
{ x: 'Oct', high: 22, low: 12, high1: 37, low1: 27 },
{ x: 'Nov', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Dec', high: 17, low: 7, high1: 32, low1: 22 }
];export let splineRangeData: Object[] = [
{ x: 'Jan', high: 14, low: 4, high1: 29, low1: 19 },
{ x: 'Feb', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Mar', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Apr', high: 15, low: 12, high1: 37, low1: 27 },
{ x: 'May', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Jun', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Jul', high: 15, low: 5, high1: 30, low1: 20 },
{ x: 'Aug', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Sep', high: 20, low: 10, high1: 25, low1: 25 },
{ x: 'Oct', high: 22, low: 12, high1: 37, low1: 27 },
{ x: 'Nov', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Dec', high: 17, low: 7, high1: 32, low1: 22 }
];