Spline Area Chart in React Chart

17 Aug 202624 minutes to read

Spline area

Follow these steps to render a spline area series, which fills the area beneath a smooth curved line through your data points.

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

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

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, SplineAreaSeries, Legend, Category, Tooltip, DataLabel } from '@syncfusion/ej2-react-charts';
import { splineData } from './datasource';
function App() {
    const primaryxAxis = { title: 'Month', valueType: 'Category' };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis}>
      <Inject services={[SplineAreaSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={splineData} xName='x' yName='y' width={2} name='London' type='SplineArea' marker={{ visible: true, width: 10, height: 10 }}>
        </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, SplineAreaSeries,
         Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, SplineSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { splineData } from './datasource';

function App() {

  const primaryxAxis: AxisModel = { title: 'Month', valueType: 'Category' };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}>
      <Inject services={[SplineAreaSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={splineData} xName='x' yName='y' width={2} name='London' type='SplineArea'
          marker={{ visible: true, width: 10, height: 10 }}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let splineData = [
    { x: 'Jan', y: -1 }, 
    { x: 'Feb', y: -1 }, 
    { x: 'Mar', y: 2 },
    { x: 'Apr', y: 8 }, 
    { x: 'May', y: 13 }, 
    { x: 'Jun', y: 18 },
    { x: 'Jul', y: 21 }, 
    { x: 'Aug', y: 20 }, 
    { x: 'Sep', y: 16 },
    { x: 'Oct', y: 10 }, 
    { x: 'Nov', y: 4 }, 
    { x: 'Dec', y: 0 }
];
export let splineData: Object[] = [
    { x: 'Jan', y: -1 }, 
    { x: 'Feb', y: -1 }, 
    { x: 'Mar', y: 2 },
    { x: 'Apr', y: 8 }, 
    { x: 'May', y: 13 }, 
    { x: 'Jun', y: 18 },
    { x: 'Jul', y: 21 }, 
    { x: 'Aug', y: 20 }, 
    { x: 'Sep', y: 16 },
    { x: 'Oct', y: 10 }, 
    { x: 'Nov', y: 4 }, 
    { x: 'Dec', y: 0 }
];

Binding data with series

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

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, SplineAreaSeries, Legend, Category, Tooltip, DataLabel } from '@syncfusion/ej2-react-charts';
import { splineData } from './datasource';
function App() {
    const primaryxAxis = { title: 'Month', valueType: 'Category' };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis}>
      <Inject services={[SplineAreaSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={splineData} xName='x' yName='y' width={2} name='London' type='SplineArea' marker={{ visible: true, width: 10, height: 10 }}>
        </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, SplineAreaSeries,
         Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, SplineSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { splineData } from './datasource';

function App() {

  const primaryxAxis: AxisModel = { title: 'Month', valueType: 'Category' };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}>
      <Inject services={[SplineAreaSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={splineData} xName='x' yName='y' width={2} name='London' type='SplineArea'
          marker={{ visible: true, width: 10, height: 10 }}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let splineData = [
    { x: 'Jan', y: -1 }, 
    { x: 'Feb', y: -1 }, 
    { x: 'Mar', y: 2 },
    { x: 'Apr', y: 8 }, 
    { x: 'May', y: 13 }, 
    { x: 'Jun', y: 18 },
    { x: 'Jul', y: 21 }, 
    { x: 'Aug', y: 20 }, 
    { x: 'Sep', y: 16 },
    { x: 'Oct', y: 10 }, 
    { x: 'Nov', y: 4 }, 
    { x: 'Dec', y: 0 }
];
export let splineData: Object[] = [
    { x: 'Jan', y: -1 }, 
    { x: 'Feb', y: -1 }, 
    { x: 'Mar', y: 2 },
    { x: 'Apr', y: 8 }, 
    { x: 'May', y: 13 }, 
    { x: 'Jun', y: 18 },
    { x: 'Jul', y: 21 }, 
    { x: 'Aug', y: 20 }, 
    { x: 'Sep', y: 16 },
    { x: 'Oct', y: 10 }, 
    { x: 'Nov', y: 4 }, 
    { x: 'Dec', y: 0 }
];

Series customization

Customize the spline 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, SplineAreaSeries, Legend, Category, Tooltip, DataLabel } from '@syncfusion/ej2-react-charts';
import { splineData } from './datasource';
function App() {
    const primaryxAxis = { title: 'Month', valueType: 'Category' };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis}>
      <Inject services={[SplineAreaSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
      <SeriesDirective dataSource={splineData} xName='x' yName='y' name='London' type='SplineArea' fill='yellow' marker={{ visible: true, width: 10, height: 10 }}>
        </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, SplineAreaSeries,
         Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, SplineSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { splineData } from './datasource';

function App() {

  const primaryxAxis: AxisModel = { title: 'Month', valueType: 'Category' };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}>
      <Inject services={[SplineAreaSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={splineData} xName='x' yName='y' name='London' type='SplineArea' fill='yellow' marker={{ visible: true, width: 10, height: 10 }}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let splineData = [
    { x: 'Jan', y: -1 }, 
    { x: 'Feb', y: -1 }, 
    { x: 'Mar', y: 2 },
    { x: 'Apr', y: 8 }, 
    { x: 'May', y: 13 }, 
    { x: 'Jun', y: 18 },
    { x: 'Jul', y: 21 }, 
    { x: 'Aug', y: 20 }, 
    { x: 'Sep', y: 16 },
    { x: 'Oct', y: 10 }, 
    { x: 'Nov', y: 4 }, 
    { x: 'Dec', y: 0 }
];
export let splineData: Object[] = [
    { x: 'Jan', y: -1 }, 
    { x: 'Feb', y: -1 }, 
    { x: 'Mar', y: 2 },
    { x: 'Apr', y: 8 }, 
    { x: 'May', y: 13 }, 
    { x: 'Jun', y: 18 },
    { x: 'Jul', y: 21 }, 
    { x: 'Aug', y: 20 }, 
    { x: 'Sep', y: 16 },
    { x: 'Oct', y: 10 }, 
    { x: 'Nov', y: 4 }, 
    { x: 'Dec', y: 0 }
];

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, SplineAreaSeries, Legend, Category, Tooltip, DataLabel } from '@syncfusion/ej2-react-charts';
import { splineData } from './datasource';
function App() {
    const primaryxAxis = { title: 'Month', valueType: 'Category' };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis}>
      <Inject services={[SplineAreaSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
      <SeriesDirective dataSource={splineData} xName='x' yName='y' name='London' type='SplineArea' fill='url(#gradient)' marker={{ visible: true, width: 10, height: 10 }}>
        </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, SplineAreaSeries,
         Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, SplineSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { splineData } from './datasource';

function App() {

  const primaryxAxis: AxisModel = { title: 'Month', valueType: 'Category' };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}>
      <Inject services={[SplineAreaSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={splineData} xName='x' yName='y' name='London' type='SplineArea' fill='url(#gradient)' marker={{ visible: true, width: 10, height: 10 }}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let splineData = [
    { x: 'Jan', y: -1 }, 
    { x: 'Feb', y: -1 }, 
    { x: 'Mar', y: 2 },
    { x: 'Apr', y: 8 }, 
    { x: 'May', y: 13 }, 
    { x: 'Jun', y: 18 },
    { x: 'Jul', y: 21 }, 
    { x: 'Aug', y: 20 }, 
    { x: 'Sep', y: 16 },
    { x: 'Oct', y: 10 }, 
    { x: 'Nov', y: 4 }, 
    { x: 'Dec', y: 0 }
];
export let splineData: Object[] = [
    { x: 'Jan', y: -1 }, 
    { x: 'Feb', y: -1 }, 
    { x: 'Mar', y: 2 },
    { x: 'Apr', y: 8 }, 
    { x: 'May', y: 13 }, 
    { x: 'Jun', y: 18 },
    { x: 'Jul', y: 21 }, 
    { x: 'Aug', y: 20 }, 
    { x: 'Sep', y: 16 },
    { x: 'Oct', y: 10 }, 
    { x: 'Nov', y: 4 }, 
    { x: 'Dec', y: 0 }
];

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, SplineAreaSeries, Legend, Category, Tooltip, DataLabel } from '@syncfusion/ej2-react-charts';
import { splineData } from './datasource';
function App() {
    const primaryxAxis = { title: 'Month', valueType: 'Category' };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis}>
      <Inject services={[SplineAreaSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
      <SeriesDirective dataSource={splineData} xName='x' yName='y' name='London' type='SplineArea' opacity={0.5} marker={{ visible: true, width: 10, height: 10 }}>
        </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, SplineAreaSeries,
         Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, SplineSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { splineData } from './datasource';

function App() {

  const primaryxAxis: AxisModel = { title: 'Month', valueType: 'Category' };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}>
      <Inject services={[SplineAreaSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={splineData} xName='x' yName='y' name='London' type='SplineArea' opacity={0.5} marker={{ visible: true, width: 10, height: 10 }}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let splineData = [
    { x: 'Jan', y: -1 }, 
    { x: 'Feb', y: -1 }, 
    { x: 'Mar', y: 2 },
    { x: 'Apr', y: 8 }, 
    { x: 'May', y: 13 }, 
    { x: 'Jun', y: 18 },
    { x: 'Jul', y: 21 }, 
    { x: 'Aug', y: 20 }, 
    { x: 'Sep', y: 16 },
    { x: 'Oct', y: 10 }, 
    { x: 'Nov', y: 4 }, 
    { x: 'Dec', y: 0 }
];
export let splineData: Object[] = [
    { x: 'Jan', y: -1 }, 
    { x: 'Feb', y: -1 }, 
    { x: 'Mar', y: 2 },
    { x: 'Apr', y: 8 }, 
    { x: 'May', y: 13 }, 
    { x: 'Jun', y: 18 },
    { x: 'Jul', y: 21 }, 
    { x: 'Aug', y: 20 }, 
    { x: 'Sep', y: 16 },
    { x: 'Oct', y: 10 }, 
    { x: 'Nov', y: 4 }, 
    { x: 'Dec', y: 0 }
];

Border

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

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

function App() {

  const primaryxAxis = {
    title: 'Month',
    valueType: 'Category'
  };
  const primaryyAxis = {
    minimum: -5,
    maximum: 30,
    interval: 5,
    title: 'Temperature in Celsius',
    labelFormat: '{value}°C'
  };
  const border = { width: 2, color: '#FFA500', dashArray: '5,5' };
  return <ChartComponent id='charts'
    primaryXAxis={primaryxAxis}
    primaryYAxis={primaryyAxis}
    title='Climate Graph-2012'>
    <Inject services={[SplineAreaSeries, Category]} />
    <SeriesCollectionDirective>
      <SeriesDirective dataSource={splineData} xName='x' yName='y' type='SplineArea' 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, SplineAreaSeries, Category } from '@syncfusion/ej2-react-charts';
import { splineData } from './datasource';

function App() {

  const primaryxAxis: AxisModel = {
    title: 'Month',
    valueType: 'Category'
  };
  const primaryyAxis: AxisModel = {
    minimum: -5,
    maximum: 30,
    interval: 5,
    title: 'Temperature in Celsius',
    labelFormat: '{value}°C'
  };
  const border: BorderModel = { width: 2, color: '#FFA500', dashArray: '5,5' };
  return <ChartComponent id='charts'
    primaryXAxis={primaryxAxis}
    primaryYAxis={primaryyAxis}
    title='Climate Graph-2012'>
    <Inject services={[SplineAreaSeries, Category]} />
    <SeriesCollectionDirective>
      <SeriesDirective dataSource={splineData} xName='x' yName='y' type='SplineArea' border={border}>
      </SeriesDirective>
    </SeriesCollectionDirective>
  </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let splineData = [
    { x: 'Jan', y: -1 }, 
    { x: 'Feb', y: -1 }, 
    { x: 'Mar', y: 2 },
    { x: 'Apr', y: 8 }, 
    { x: 'May', y: 13 }, 
    { x: 'Jun', y: 18 },
    { x: 'Jul', y: 21 }, 
    { x: 'Aug', y: 20 }, 
    { x: 'Sep', y: 16 },
    { x: 'Oct', y: 10 }, 
    { x: 'Nov', y: 4 }, 
    { x: 'Dec', y: 0 }
];
export let splineData: Object[] = [
    { x: 'Jan', y: -1 }, 
    { x: 'Feb', y: -1 }, 
    { x: 'Mar', y: 2 },
    { x: 'Apr', y: 8 }, 
    { x: 'May', y: 13 }, 
    { x: 'Jun', y: 18 },
    { x: 'Jul', y: 21 }, 
    { x: 'Aug', y: 20 }, 
    { x: 'Sep', y: 16 },
    { x: 'Oct', y: 10 }, 
    { x: 'Nov', y: 4 }, 
    { x: 'Dec', y: 0 }
];

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, SplineAreaSeries, Legend, Category, Tooltip, DataLabel } from '@syncfusion/ej2-react-charts';
import { splineData } from './datasource';
function App() {
    const primaryxAxis = { title: 'Month', valueType: 'Category' };
    const emptyPoint = { mode: 'Gap' };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis}>
      <Inject services={[SplineAreaSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
      <SeriesDirective dataSource={splineData} xName='x' yName='y' name='London' type='SplineArea' emptyPointSettings={emptyPoint} marker={{ visible: true, width: 10, height: 10 }}>
        </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, SplineAreaSeries,
         Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, SplineSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { splineData } from './datasource';

function App() {

  const primaryxAxis: AxisModel = { title: 'Month', valueType: 'Category' };
  const emptyPoint: object = { mode: 'Gap' };
  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}>
      <Inject services={[SplineAreaSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={splineData} xName='x' yName='y' name='London' type='SplineArea' emptyPointSettings={emptyPoint} marker={{ visible: true, width: 10, height: 10 }}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let splineData = [
    { x: 'Jan', y: -1 }, 
    { x: 'Feb', y: -1 }, 
    { x: 'Mar', y: 2 },
    { x: 'Apr', y: null }, 
    { x: 'May', y: 13 }, 
    { x: 'Jun', y: 18 }, 
    { x: 'Jul', y: 21 }, 
    { x: 'Aug', y: 20 }, 
    { x: 'Sep', y: undefined }, 
    { x: 'Oct', y: 10 }, 
    { x: 'Nov', y: 4 }, 
    { x: 'Dec', y: 0 }
];
export let splineData: Object[] = [
    { x: 'Jan', y: -1 }, 
    { x: 'Feb', y: -1 }, 
    { x: 'Mar', y: 2 },
    { x: 'Apr', y: null }, 
    { x: 'May', y: 13 }, 
    { x: 'Jun', y: 18 }, 
    { x: 'Jul', y: 21 }, 
    { x: 'Aug', y: 20 }, 
    { x: 'Sep', y: undefined }, 
    { x: 'Oct', y: 10 }, 
    { x: 'Nov', y: 4 }, 
    { x: 'Dec', y: 0 }
];

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, SplineAreaSeries, Legend, Category, Tooltip, DataLabel } from '@syncfusion/ej2-react-charts';
import { splineData } from './datasource';
function App() {
    const primaryxAxis = { title: 'Month', valueType: 'Category' };
    const emptyPoint = { mode: 'Average', fill: 'red' };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis}>
      <Inject services={[SplineAreaSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
      <SeriesDirective dataSource={splineData} xName='x' yName='y' name='London' type='SplineArea' emptyPointSettings={emptyPoint} marker={{ visible: true, width: 10, height: 10 }}>
        </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, SplineAreaSeries,
         Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, SplineSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { splineData } from './datasource';

function App() {

  const primaryxAxis: AxisModel = { title: 'Month', valueType: 'Category' };
  const emptyPoint: object = { mode: 'Average', fill: 'red' };
  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}>
      <Inject services={[SplineAreaSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={splineData} xName='x' yName='y' name='London' type='SplineArea' emptyPointSettings={emptyPoint} marker={{ visible: true, width: 10, height: 10 }}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let splineData = [
    { x: 'Jan', y: -1 }, 
    { x: 'Feb', y: -1 }, 
    { x: 'Mar', y: 2 },
    { x: 'Apr', y: null }, 
    { x: 'May', y: 13 }, 
    { x: 'Jun', y: 18 }, 
    { x: 'Jul', y: 21 }, 
    { x: 'Aug', y: 20 }, 
    { x: 'Sep', y: undefined }, 
    { x: 'Oct', y: 10 }, 
    { x: 'Nov', y: 4 }, 
    { x: 'Dec', y: 0 }
];
export let splineData: Object[] = [
    { x: 'Jan', y: -1 }, 
    { x: 'Feb', y: -1 }, 
    { x: 'Mar', y: 2 },
    { x: 'Apr', y: null }, 
    { x: 'May', y: 13 }, 
    { x: 'Jun', y: 18 }, 
    { x: 'Jul', y: 21 }, 
    { x: 'Aug', y: 20 }, 
    { x: 'Sep', y: undefined }, 
    { x: 'Oct', y: 10 }, 
    { x: 'Nov', y: 4 }, 
    { x: 'Dec', y: 0 }
];

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, SplineAreaSeries, Legend, Category, Tooltip, DataLabel } from '@syncfusion/ej2-react-charts';
import { splineData } from './datasource';
function App() {
    const primaryxAxis = { title: 'Month', valueType: 'Category' };
    const emptyPoint = { mode: 'Average', fill: 'red', border: {width: 1.5, color: 'green'} };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis}>
      <Inject services={[SplineAreaSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
      <SeriesDirective dataSource={splineData} xName='x' yName='y' name='London' type='SplineArea' emptyPointSettings={emptyPoint} marker={{ visible: true, width: 10, height: 10 }}>
        </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, SplineAreaSeries,
         Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, SplineSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { splineData } from './datasource';

function App() {

  const primaryxAxis: AxisModel = { title: 'Month', valueType: 'Category' };
  const emptyPoint: object = { mode: 'Average', fill: 'red', border: {width: 1.5, color: 'green'} };
  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}>
      <Inject services={[SplineAreaSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={splineData} xName='x' yName='y' name='London' type='SplineArea' emptyPointSettings={emptyPoint} marker={{ visible: true, width: 10, height: 10 }}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let splineData = [
    { x: 'Jan', y: -1 }, 
    { x: 'Feb', y: -1 }, 
    { x: 'Mar', y: 2 },
    { x: 'Apr', y: null }, 
    { x: 'May', y: 13 }, 
    { x: 'Jun', y: 18 }, 
    { x: 'Jul', y: 21 }, 
    { x: 'Aug', y: 20 }, 
    { x: 'Sep', y: undefined }, 
    { x: 'Oct', y: 10 }, 
    { x: 'Nov', y: 4 }, 
    { x: 'Dec', y: 0 }
];
export let splineData: Object[] = [
    { x: 'Jan', y: -1 }, 
    { x: 'Feb', y: -1 }, 
    { x: 'Mar', y: 2 },
    { x: 'Apr', y: null }, 
    { x: 'May', y: 13 }, 
    { x: 'Jun', y: 18 }, 
    { x: 'Jul', y: 21 }, 
    { x: 'Aug', y: 20 }, 
    { x: 'Sep', y: undefined }, 
    { x: 'Oct', y: 10 }, 
    { x: 'Nov', y: 4 }, 
    { x: 'Dec', y: 0 }
];

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 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, SplineAreaSeries, Legend, Category, Tooltip, DataLabel } from '@syncfusion/ej2-react-charts';
import { splineData } from './datasource';
function App() {
    const primaryxAxis = { title: 'Month', valueType: 'Category' };
    const seriesRender = (args) => {
      args.fill = '#ff6347';
  }
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} seriesRender={seriesRender}>
      <Inject services={[SplineAreaSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
      <SeriesDirective dataSource={splineData} xName='x' yName='y' name='London' type='SplineArea' marker={{ visible: true, width: 10, height: 10 }}>
        </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, SplineAreaSeries,
         Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, SplineSeries, ISeriesRenderEventArgs}
from'@syncfusion/ej2-react-charts';
import { splineData } from './datasource';

function App() {

  const primaryxAxis: AxisModel = { title: 'Month', valueType: 'Category' };
  const seriesRender = (args: ISeriesRenderEventArgs) => {
    args.fill = '#ff6347';
  };
  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis} seriesRender={seriesRender}>
      <Inject services={[SplineAreaSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={splineData} xName='x' yName='y' name='London' type='SplineArea' marker={{ visible: true, width: 10, height: 10 }}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let splineData = [
    { x: 'Jan', y: -1 }, 
    { x: 'Feb', y: -1 }, 
    { x: 'Mar', y: 2 },
    { x: 'Apr', y: 8 }, 
    { x: 'May', y: 13 }, 
    { x: 'Jun', y: 18 },
    { x: 'Jul', y: 21 }, 
    { x: 'Aug', y: 20 }, 
    { x: 'Sep', y: 16 },
    { x: 'Oct', y: 10 }, 
    { x: 'Nov', y: 4 }, 
    { x: 'Dec', y: 0 }
];
export let splineData: Object[] = [
    { x: 'Jan', y: -1 }, 
    { x: 'Feb', y: -1 }, 
    { x: 'Mar', y: 2 },
    { x: 'Apr', y: 8 }, 
    { x: 'May', y: 13 }, 
    { x: 'Jun', y: 18 },
    { x: 'Jul', y: 21 }, 
    { x: 'Aug', y: 20 }, 
    { x: 'Sep', y: 16 },
    { x: 'Oct', y: 10 }, 
    { x: 'Nov', y: 4 }, 
    { x: 'Dec', y: 0 }
];

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 area series, use it to vary the marker color along the spline.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, SplineAreaSeries, Legend, Category, Tooltip, DataLabel } from '@syncfusion/ej2-react-charts';
import { splineData } from './datasource';
function App() {
    const primaryxAxis = { title: 'Month', valueType: 'Category' };
    const pointRender = (args) => {
      if (args.point.y < 10) {
        args.fill = '#ff6347';
    }
    else {
        args.fill = '#009cb8';
    }
  }
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} pointRender={pointRender}>
      <Inject services={[SplineAreaSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
      <SeriesDirective dataSource={splineData} xName='x' yName='y' name='London' type='SplineArea' marker={{ visible: true, width: 10, height: 10 }}>
        </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, SplineAreaSeries,
         Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, SplineSeries, IPointRenderEventArgs}
from'@syncfusion/ej2-react-charts';
import { splineData } from './datasource';

function App() {

  const primaryxAxis: AxisModel = { title: 'Month', valueType: 'Category' };
  const pointRender = (args: IPointRenderEventArgs) => {
    if (args.point.y < 10) {
      args.fill = '#ff6347';
  }
  else {
      args.fill = '#009cb8';
  }
  };
  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis} pointRender={pointRender}>
      <Inject services={[SplineAreaSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={splineData} xName='x' yName='y' name='London' type='SplineArea' marker={{ visible: true, width: 10, height: 10 }}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let splineData = [
    { x: 'Jan', y: -1 }, 
    { x: 'Feb', y: -1 }, 
    { x: 'Mar', y: 2 },
    { x: 'Apr', y: 8 }, 
    { x: 'May', y: 13 }, 
    { x: 'Jun', y: 18 },
    { x: 'Jul', y: 21 }, 
    { x: 'Aug', y: 20 }, 
    { x: 'Sep', y: 16 },
    { x: 'Oct', y: 10 }, 
    { x: 'Nov', y: 4 }, 
    { x: 'Dec', y: 0 }
];
export let splineData: Object[] = [
    { x: 'Jan', y: -1 }, 
    { x: 'Feb', y: -1 }, 
    { x: 'Mar', y: 2 },
    { x: 'Apr', y: 8 }, 
    { x: 'May', y: 13 }, 
    { x: 'Jun', y: 18 },
    { x: 'Jul', y: 21 }, 
    { x: 'Aug', y: 20 }, 
    { x: 'Sep', y: 16 },
    { x: 'Oct', y: 10 }, 
    { x: 'Nov', y: 4 }, 
    { x: 'Dec', y: 0 }
];

See also