React
Demos
Support
Forum
Download
Search results

Range Band

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.

Source
Preview
index.html
index.jsx
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Chart-Category Axis</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
        #sparkline {
            height : 350px;
            display: block;
        }
    </style>
</head>

<body>
        <div id='sparkline'>
            <div id='loader'>Loading....</div>
        </div>
</body>
</html>
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SparklineComponent } from '@syncfusion/ej2-react-charts';
class App extends React.Component {
    render() {
        return (<SparklineComponent id='sparkline' height='200px' 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
            }
        ]}>
</SparklineComponent>);
    }
}
ReactDOM.render(<App />, document.getElementById('sparkline'));

Multiple range band customization

You can define multiple range bands to a sparkline as shown in the following code sample.

Source
Preview
index.html
index.jsx
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Chart-Category Axis</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
        #sparkline {
            height : 350px;
            display: block;
        }
    </style>
</head>

<body>
        <div id='sparkline'>
            <div id='loader'>Loading....</div>
        </div>
</body>
</html>
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SparklineComponent } from '@syncfusion/ej2-react-charts';
class App extends React.Component {
    render() {
        return (<SparklineComponent id='sparkline' height='200px' 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
            },
            {
                startRange: 4,
                endRange: 5,
                color: 'red',
                opacity: 0.4
            }
        ]}>
</SparklineComponent>);
    }
}
ReactDOM.render(<App />, document.getElementById('sparkline'));
Previous
Next