Search results

Types of data

Numeric

Numeric scale is used to represent the numeric values of data in a chart. By default, the valueType of a range navigator is Double.

Source
Preview
index.ts
index.html
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');
<!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>

Range

Minimum and maximum of the Range navigator will be calculated automatically based on the provided data. You can also customize the range using the minimum, maximum, and interval properties.

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

let range: RangeNavigator = new RangeNavigator({
   minimum: 10, maximum: 160,interval: 10,
    value:[60,100],
    series: [{
    dataSource: [
      { xData: 10, yData: 35 }, { xData: 20, yData: 28 },
      { xData: 30, yData: 34 }, { xData: 40, yData: 32 },
      { xData: 50, yData: 40 }, { xData: 60, yData: 30 },
      { xData: 70, yData: 4 },  { xData: 80, yData: 22 },
      { xData: 90, yData: 30 },  { xData: 100, yData: 43 },
      { xData: 110, yData: 60 }, { xData: 120, yData: 33 },
      { xData: 130, yData: 40 }, { xData: 140, yData: 29 },
      { xData: 150, yData: 10 }, { xData: 160, yData: 16 },
     ],
    xName: 'xData', yName: 'yData', type: 'StepLine', width: 2,
            }],
}, '#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>
</head>

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

</html>

Label Format

Numeric labels can be formatted using the labelFormat property.

Numeric labels support all globalized formats.

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

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

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

</html>

The following table describes the result of applying some commonly used label formats on numeric values.

Label Value Label Format property value Result Description
1000 n1 1000.0 The Number is rounded to 1 decimal place
1000 n2 1000.00 The Number is rounded to 2 decimal place
1000 n3 1000.000 The Number is rounded to 3 decimal place
0.01 p1 1.0% The Number is converted to percentage with 1 decimal place
0.01 p2 1.00% The Number is converted to percentage with 2 decimal place
0.01 p3 1.000% The Number is converted to percentage with 3 decimal place
1000 c1 $1,000.0 The Currency symbol is appended to number and number is rounded to 1 decimal place
1000 c2 $1,000.00 The Currency symbol is appended to number and number is rounded to 2 decimal place

Custom Label Format

The range navigator also supports custom label formats using placeholders such as {value}$, in which, the value represent the axis label, e.g. 20$.

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

let range: RangeNavigator = new RangeNavigator({
    // Custom label format
    labelFormat: '{value}
            </div>
            <div></div>
        </div>
</div>
,
    value:[12,30],
    series: [{
    dataSource: double,
    xName: 'x', yName: 'y', type: 'StepLine', width: 2,
            }],
}, '#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>
</head>

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

</html>

Logarithmic Axis

Logarithmic supports logarithmic scale, and it is used to visualize data when the Range navigator has numerical values in both lower (e.g.: 10-6) and higher (e.g.: 106) orders of magnitude.

Source
Preview
index.ts
index.html
import { RangeNavigator, StepLineSeries, Logarithmic}  from "@syncfusion/ej2-charts";
RangeNavigator.Inject(StepLineSeries, Logarithmic);

let data: object[] = [];
let max: number = 100;
for (let i: number = 0; i < 100; i++) {
    data.push({
        x: Math.pow(10, i * 0.1),
        y: Math.floor(Math.random() * (80 - 30 + 1)) + 30
    });
}
let range: RangeNavigator = new RangeNavigator({
    valueType: 'Logarithmic',
    value: [4,6],
    interval: 1,
    series: [{
                dataSource: data, xName: 'x', yName: 'y', type: 'StepLine', width: 2,
            }],
}, '#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>
</head>

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

</html>

Note: To use logarithmic scale, inject the Logarithmic module using the RangeNavigator.Inject(Logarithmic) method, and then set the valueType to Logarithmic.

Range

Minimum and maximum of the Range navigator will be calculated automatically based on the provided data. You can also customize the range using the minimum, maximum, and interval properties.

Source
Preview
index.ts
index.html
import { RangeNavigator, StepLineSeries, Logarithmic}  from "@syncfusion/ej2-charts";
RangeNavigator.Inject(StepLineSeries, Logarithmic);

let data: object[] = [];
let max: number = 100;
for (let i: number = 0; i < 100; i++) {
    data.push({
        x: Math.pow(10, i * 0.1),
        y: Math.floor(Math.random() * (80 - 30 + 1)) + 30
    });
}
let range: RangeNavigator = new RangeNavigator({
    valueType: 'Logarithmic',
    value: [4,6],
    interval: 1,
    series: [{
                dataSource: data, xName: 'x', yName: 'y', type: 'StepLine', width: 2,
            }],
}, '#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>
</head>

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

</html>

Logarithmic Base

Logarithmic base can be customized using the logBase property. The default value of the logBase property is 10.

Source
Preview
index.ts
index.html
import { RangeNavigator, StepLineSeries, Logarithmic}  from "@syncfusion/ej2-charts";
RangeNavigator.Inject(StepLineSeries, Logarithmic);

let data: object[] = [];
let max: number = 100;
for (let i: number = 0; i < 100; i++) {
    data.push({
        x: Math.pow(10, i * 0.1),
        y: Math.floor(Math.random() * (80 - 30 + 1)) + 30
    });
}
let range: RangeNavigator = new RangeNavigator({
    valueType: 'Logarithmic',
    value: [4,6],
     // logBase for logarithmic scale
    logBase: 2
    series: [{
                dataSource: data, xName: 'x', yName: 'y', type: 'StepLine', width: 2,
            }],
}, '#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>
</head>

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

</html>

Date-time

Date-time Range navigator supports date-time scale and displays date-time values as a labels in the specified format.

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

let range: RangeNavigator = new RangeNavigator({
    valueType: 'DateTime',
    value:[new Date("2017-08-13"), new Date("2017-12-28")],
    series: [{
                dataSource: datasrc, xName: 'x', yName: 'y', type: 'Area', width: 2,
            }],
}, '#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>
</head>

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

</html>

Note: Date-time Range navigator supports date-time scale and displays date-time values as a labels in the specified format.

Interval Customization

Date-time intervals can be customized using the interval and intervalType properties of the range navigator. For example, when you set interval as 2 and intervalType as years, the interval is considered as 2 years. Date-time supports the following interval types:

  • Auto
  • Years
  • Quarter
  • Months
  • Weeks
  • Days
  • Hours
  • Minutes
Source
Preview
index.ts
index.html
import { RangeNavigator, AreaSeries, DateTime}  from "@syncfusion/ej2-charts";
RangeNavigator.Inject(AreaSeries, DateTime);
import { datasrc } from "./datasource.ts";

let range: RangeNavigator = new RangeNavigator({
    valueType: 'DateTime',
    intervalType: 'Months',
    interval: 2,
    value:[new Date("2017-08-13"), new Date("2017-12-28")],
    series: [{
                dataSource: datasrc, xName: 'x', yName: 'y', type: 'Area', width: 2,
            }],
}, '#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>
</head>

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

</html>

Label Format

You can format and parse the date to all globalize format using labelFormat property in an axis.

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

let range: RangeNavigator = new RangeNavigator({
    valueType: 'DateTime',
    labelFormat: 'y/M/d',
    value:[new Date("2017-08-13"), new Date("2017-12-28")],
    series: [{
                dataSource: datasrc, xName: 'x', yName: 'y', type: 'Area', width: 2,
            }],
}, '#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>
</head>

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

</html>

The following table describes the result of applying some common date time formats to the labelFormat property

Label Value Label Format Property Value Result Description
new Date(2000, 03, 10) EEEE Monday The Date is displayed in day format
new Date(2000, 03, 10) yMd 04/10/2000 The Date is displayed in month/date/year format
new Date(2000, 03, 10) MMM Apr The Shorthand month for the date is displayed
new Date(2000, 03, 10) hm 12:00 AM Time of the date value is displayed as label
new Date(2000, 03, 10) hms 12:00:00 AM The Label is displayed in hours:minutes:seconds format