Spline range area Chart in EJ2 TypeScript control
28 Sep 20237 minutes to read
Spline Range Area
The Spline Range Area Chart is used to display continuous data points as a set of splines that vary between high and low values over intervals of time and across different categories.
To render a spline range area series, use series type
as SplineRangeArea
and inject SplineRangeAreaSeries
module using Chart.Inject(SplineRangeAreaSeries)
method.
import { Chart, SplineRangeAreaSeries, Category } from '@syncfusion/ej2-charts';
import { splinedata } from './datasource.ts';
Chart.Inject(SplineRangeAreaSeries, Category);
let chart: Chart = new Chart({
primaryXAxis: {
valueType: 'Category',
edgeLabelPlacement: 'Shift',
majorGridLines: { width: 0 },
},
primaryYAxis: {
labelFormat: '{value}˚C',
lineStyle: { width: 0 },
minimum: 0,
maximum: 40,
majorTickLines: { width: 0 }
},
series: [
{
type: 'SplineRangeArea',
name: 'England',
dataSource: splinedata,
xName: 'x', high: 'high', low: 'low',
opacity: 0.4,
},
{
type: 'SplineRangeArea',
name: 'India',
dataSource: splinedata,
xName: 'x', high: 'high1', low: 'low1',
opacity: 0.4,
}],
}, '#element');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Animation</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'></div>
</div>
</body>
</html>
Series customization
The following properties can be used to customize the spline range area
series.
- fill – Specifies the color of the area series.
- opacity – Specifies the opacity of fill.
- dashArray – Specifies the dashes of series.
import { Chart, SplineRangeAreaSeries, DateTime } from '@syncfusion/ej2-charts';
Chart.Inject(SplineRangeAreaSeries, DateTime);
let series: Object[] = [];
let value: number = 70;
let point: Object;
for (let i: number = 1; i < 70; i++) {
if (Math.random() > .5) {
value += Math.random();
} else {
value -= Math.random();
}
point = { x: new Date(1930 + i, 5, i), high: value, low: value - 25 };
series.push(point);
}
let chart: Chart = new Chart({
primaryXAxis: {
valueType: 'DateTime',
},
series: [
{
type: 'SplineRangeArea', opacity: 0.7,
dataSource: series, fill: 'blue',
xName: 'x', high: 'high', low: 'low',
}],
}, '#element');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Animation</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'></div>
</div>
</body>
</html>