Spline in React Chart component
16 May 20237 minutes to read
Spline
To render a spline series, use series type
as Spline
and inject SplineSeries
module into the services
.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, SplineSeries } from '@syncfusion/ej2-react-charts';
import { splineData } from 'datasource.ts';
function App() {
const primaryxAxis = { title: 'Month', valueType: 'Category' };
const primaryyAxis = {
minimum: -5, maximum: 35, interval: 5,
title: 'Temperature in Celsius', labelFormat: '{value}C'
};
const marker = { visible: true, width: 10, height: 10 };
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='CO2 - Intensity Analysis'>
<Inject services={[SplineSeries, Legend, Tooltip, DataLabel, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={splineData} xName='x' yName='y' width={2} name='London' type='Spline' 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,
Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, SplineSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { splineData } from 'datasource.ts';
function App() {
const primaryxAxis: AxisModel = { title: 'Month', valueType: 'Category' };
const primaryyAxis: AxisModel = {
minimum: -5, maximum: 35, interval: 5,
title: 'Temperature in Celsius', labelFormat: '{value}C'
};
const marker = { visible: true, width: 10, height: 10 };
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
title='CO2 - Intensity Analysis'>
<Inject services={[SplineSeries, Legend, Tooltip, DataLabel, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={splineData} xName='x' yName='y' width={2} name='London' type='Spline'
marker={marker}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
Series customization
The following properties can be used to customize the spline
series.
- fill – Specifies the color of the series.
- opacity – Specifies the opacity of fill.
- dashArray – Specifies the dashes for series.
- width – Specifies the width for series.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, SplineSeries } from '@syncfusion/ej2-react-charts';
import { data } from 'datasource.ts';
function App() {
const marker = { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } };
return <ChartComponent id='charts'>
<Inject services={[SplineSeries, Legend, Tooltip, DataLabel, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y' fill='green' width={3} dashArray='5,5' name='India' type='Spline' 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, SplineSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { data } from 'datasource.ts';
function App() {
const marker = { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } };
return <ChartComponent id='charts'>
<Inject services={[SplineSeries, Legend, Tooltip, DataLabel, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y' fill='green' width={3} dashArray='5,5'
name='India' type='Spline'
marker={marker}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));