JavaScript
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Series Types in JavaScript Range Navigator control

17 Mar 2023 / 2 minutes to read

To render the data, the Range Selector supports three types of series.

Line

To render a line series, use series type as Line and inject the LineSeries module using the RangeNavigator.Inject(LineSeries) method. By default, the line series is rendered in the Range Selector.

Source
Preview
index.ts
index.html
Copied to clipboard
import { RangeNavigator, DateTime, LineSeries}  from "@syncfusion/ej2-charts";
RangeNavigator.Inject( DateTime, LineSeries);
import { datasrc } from "./datasource.ts";

let range: RangeNavigator = new RangeNavigator({
    valueType: 'DateTime',
    value: [new Date('2017-09-01'), new Date('2018-02-01')],
    labelFormat: 'MMM-yy',
    series: [{
                dataSource: datasrc, xName: 'x', yName: 'y', type: 'Line', width: 2,
            }],
}, '#element');
Copied to clipboard
<!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>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container' style="margin-top: 125px">
        <div id='element'></div>
    </div>
</body>

</html>

Area

To render an area series, use series type as Area and inject AreaSeries module using RangeNavigator.Inject(AreaSeries) method.

Source
Preview
index.ts
index.html
Copied to clipboard
import { RangeNavigator, DateTime, AreaSeries}  from "@syncfusion/ej2-charts";
RangeNavigator.Inject( DateTime, AreaSeries);
import { datasrc } from "./datasource.ts";

let range: RangeNavigator = new RangeNavigator({
    valueType: 'DateTime',
    value: [new Date('2017-09-01'), new Date('2018-02-01')],
    labelFormat: 'MMM-yy',
    series: [{
                dataSource: datasrc, xName: 'x', yName: 'y', type: 'Area', width: 2,
            }],
}, '#element');
Copied to clipboard
<!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>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container' style="margin-top: 125px">
        <div id='element'></div>
    </div>
</body>

</html>

StepLine

To render a Step line series, use series type as Step Line and inject StepLineSeries module using RangeNavigator.Inject(StepLineSeries) method.

Source
Preview
index.ts
index.html
Copied to clipboard
import { RangeNavigator, StepLineSeries, DateTime}  from "@syncfusion/ej2-charts";
RangeNavigator.Inject(StepLineSeries, DateTime);
import { double } from "./datasource.ts";

let range: RangeNavigator = new RangeNavigator({
    value:[12,30],
    series: [{
    dataSource: double,
    xName: 'x', yName: 'y', type: 'StepLine', width: 2,
            }],
}, '#element');
Copied to clipboard
<!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>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container' style="margin-top: 125px">
        <div id='element'></div>
    </div>
</body>

</html>
Previous
Next
Contents
Contents