Contents
- Range band customization
- Multiple range band customization
Having trouble getting help?
Contact Support
Contact Support
Range band in EJ2 TypeScript Sparkline control
18 Apr 20236 minutes to read
This section explains how to customize the sparkline with multiple range bands.
Range band customization
The range band feature is used to highlight a particular range along with the y-axis using the [startRange
] and [endRange
] properties. You can also customize the [color
] and [opacity
] of the range band.
import { Sparkline } from '@syncfusion/ej2-charts';
let sparkline: Sparkline = new Sparkline({
height: '150px',
width: '150px',
lineWidth: 2,
fill: '#0d3c9b',
dataSource: [0, 6, 4, 1, 3, 2, 5],
// To configure range band settings
rangeBandSettings: [
{
startRange: 1,
endRange: 3,
color: '#bfd4fc',
opacity:0.4
}
]
});
sparkline.appendTo("#element");
<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 for Sparkline </title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for Sparkline UI Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-charts/styles/material.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' style="margin-top: 15%;">
<div id="element" align="center" ></div>
</div>
</body>
</html>
Multiple range band customization
You can define multiple range bands to a sparkline as shown in the following code sample.
import { Sparkline } from '@syncfusion/ej2-charts';
let sparkline: Sparkline = new Sparkline({
height: '150px',
width: '150px',
lineWidth: 2,
fill: '#0d3c9b',
dataSource: [0, 6, 4, 1, 3, 2, 5],
rangeBandSettings: [
{
startRange: 1,
endRange: 2,
color: '#bfd4fc',
opacity:0.4
},
{
startRange: 4,
endRange: 5,
color: 'red',
opacity:0.4
}
]
});
sparkline.appendTo("#element");
<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 for Sparkline </title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for Sparkline UI Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-charts/styles/material.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' style="margin-top: 15%;">
<div id="element" align="center" ></div>
</div>
</body>
</html>