- Numeric
- Logarithmic Axis
- Date-time
Contact Support
Axis in Angular Range navigator component
27 Apr 202424 minutes to read
Numeric
The numeric scale is used to represent the numeric values of data in a Range Selector. By default, the valueType
of a Range Selector is Double.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule, RangeNavigatorModule } from '@syncfusion/ej2-angular-charts'
import { StepLineSeriesService} from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { double } from './datasource'
@Component({
imports: [
ChartModule, RangeNavigatorModule
],
providers: [ StepLineSeriesService ],
standalone: true,
selector: 'app-container',
template: `<ejs-rangenavigator id="rn-container" [value]='value'>
<e-rangenavigator-series-collection>
<e-rangenavigator-series [dataSource]='chartData' type='StepLine' xName='x' yName='y' width=2>
</e-rangenavigator-series>
</e-rangenavigator-series-collection>
</ejs-rangenavigator>`
})
export class AppComponent implements OnInit {
public value?: Object[];
public chartData?: Object[];
ngOnInit(): void {
this.value = [12,30];
this.chartData = double;
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Range
The minimum and the maximum of the scale will be calculated automatically based on the provided data. It can be customized by using the minimum
, maximum
, and interval
properties.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule, RangeNavigatorModule } from '@syncfusion/ej2-angular-charts'
import { StepLineSeriesService} from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
@Component({
imports: [
ChartModule, RangeNavigatorModule
],
providers: [ StepLineSeriesService ],
standalone: true,
selector: 'app-container',
template: `<ejs-rangenavigator id="rn-container" [value]='value' [minimum]='minimum' [maximum]='maximum' [interval]='interval'>
<e-rangenavigator-series-collection>
<e-rangenavigator-series [dataSource]='chartData' type='StepLine' xName='xData' yName='yData' width=2>
</e-rangenavigator-series>
</e-rangenavigator-series-collection>
</ejs-rangenavigator>`
})
export class AppComponent implements OnInit {
public value?: Object[];
public chartData?: Object[];
public minimum?: number;
public maximum?: number;
public interval?: number;
ngOnInit(): void {
this.value = [60,100];
this.chartData = [
{ 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 },
];
this.minimum= 10;
this.maximum= 160;
this.interval= 10;
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Label Format
The numeric labels can be formatted using the labelFormat
property and it supports all the globalized formats.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule, RangeNavigatorModule } from '@syncfusion/ej2-angular-charts'
import { StepLineSeriesService} from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { double } from './datasource'
@Component({
imports: [
ChartModule, RangeNavigatorModule
],
providers: [ StepLineSeriesService ],
standalone: true,
selector: 'app-container',
template: `<ejs-rangenavigator id="rn-container" [value]='value' labelFormat='n1'>
<e-rangenavigator-series-collection>
<e-rangenavigator-series [dataSource]='chartData' type='StepLine' xName='x' yName='y' width=2>
</e-rangenavigator-series>
</e-rangenavigator-series-collection>
</ejs-rangenavigator>`
})
export class AppComponent implements OnInit {
public value?: Object[];
public chartData?: Object[];
ngOnInit(): void {
this.value = [12,30];
this.chartData = double;
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
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 Selector also supports the Custom Label formats using the placeholders such as {value}$, in which the value represents the axis label, e.g. 20$.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule, RangeNavigatorModule } from '@syncfusion/ej2-angular-charts'
import { StepLineSeriesService} from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { double } from './datasource'
@Component({
imports: [
ChartModule, RangeNavigatorModule
],
providers: [ StepLineSeriesService ],
standalone: true,
selector: 'app-container',
template: `<ejs-rangenavigator id="rn-container" [value]='value' labelFormat='{value}$'>
<e-rangenavigator-series-collection>
<e-rangenavigator-series [dataSource]='chartData' type='StepLine' xName='x' yName='y' width=2>
</e-rangenavigator-series>
</e-rangenavigator-series-collection>
</ejs-rangenavigator>`
})
export class AppComponent implements OnInit {
public value?: Object[];
public chartData?: Object[];
ngOnInit(): void {
this.value = [12,30];
this.chartData = double;
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Logarithmic Axis
The Logarithmic supports the logarithmic scale, and it is used to visualize the data when the Range Selector has numerical values in both the lower (e.g.: 10-6) and the higher (e.g.: 106) orders of the magnitude.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule, RangeNavigatorModule } from '@syncfusion/ej2-angular-charts'
import { StepLineSeriesService, LogarithmicService} from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
@Component({
imports: [
ChartModule, RangeNavigatorModule
],
providers: [ StepLineSeriesService, LogarithmicService ],
standalone: true,
selector: 'app-container',
template: `<ejs-rangenavigator id="rn-container" [value]='value' valueType='Logarithmic' [interval]='interval'>
<e-rangenavigator-series-collection>
<e-rangenavigator-series [dataSource]='chartData' type='StepLine' xName='x' yName='y' width=2>
</e-rangenavigator-series>
</e-rangenavigator-series-collection>
</ejs-rangenavigator>`
})
export class AppComponent implements OnInit {
public value?: Object[];
public chartData?: Object[];
public interval?: number;
ngOnInit(): void {
this.value = [4,6];
this.chartData = [];
for (let i = 0; i < 100; i++) {
this.chartData.push({
x: Math.pow(10, i * 0.1),
y: Math.floor(Math.random() * (80 - 30 + 1)) + 30
});
}
this.interval = 1;
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
To use logarithmic scale, inject the
LogarithmicService
into the@NgModule.providers
, and then set the valueType to Logarithmic.
Range
The minimum and the maximum of the Range Selector will be calculated automatically based on the provided data. It can be customized by using the minimum
, maximum
, and interval
properties.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule, RangeNavigatorModule } from '@syncfusion/ej2-angular-charts'
import { StepLineSeriesService, LogarithmicService} from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
@Component({
imports: [
ChartModule, RangeNavigatorModule
],
providers: [ StepLineSeriesService, LogarithmicService ],
standalone: true,
selector: 'app-container',
template: `<ejs-rangenavigator id="rn-container" [value]='value' valueType='Logarithmic' [interval]='interval'>
<e-rangenavigator-series-collection>
<e-rangenavigator-series [dataSource]='chartData' type='StepLine' xName='x' yName='y' width=2>
</e-rangenavigator-series>
</e-rangenavigator-series-collection>
</ejs-rangenavigator>`
})
export class AppComponent implements OnInit {
public value?: Object[];
public chartData?: Object[];
public interval?: number;
ngOnInit(): void {
this.value = [4,6];
this.chartData = [];
for (let i = 0; i < 100; i++) {
this.chartData.push({
x: Math.pow(10, i * 0.1),
y: Math.floor(Math.random() * (80 - 30 + 1)) + 30
});
}
this.interval = 1;
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Logarithmic Base
The Logarithmic Base can be customized using the logBase
property. The default value of this property is 10.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule, RangeNavigatorModule } from '@syncfusion/ej2-angular-charts'
import { StepLineSeriesService, LogarithmicService} from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
@Component({
imports: [
ChartModule, RangeNavigatorModule
],
providers: [ StepLineSeriesService, LogarithmicService ],
standalone: true,
selector: 'app-container',
template: `<ejs-rangenavigator id="rn-container" [value]='value' valueType='Logarithmic' [logBase]='log'>
<e-rangenavigator-series-collection>
<e-rangenavigator-series [dataSource]='chartData' type='StepLine' xName='x' yName='y' width=2>
</e-rangenavigator-series>
</e-rangenavigator-series-collection>
</ejs-rangenavigator>`
})
export class AppComponent implements OnInit {
public value?: Object[];
public chartData?: Object[];
public log?: number;
ngOnInit(): void {
this.value = [4,6];
this.chartData = [];
for (let i = 0; i < 100; i++) {
this.chartData.push({
x: Math.pow(10, i * 0.1),
y: Math.floor(Math.random() * (80 - 30 + 1)) + 30
});
}
this.log = 2;
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Date-time
The Range Selector supports the DateTime scale and displays the DateTime values as labels in the specified format.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule, RangeNavigatorModule } from '@syncfusion/ej2-angular-charts'
import { AreaSeriesService, DateTimeService, StepLineSeriesService} from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { datasrc } from './datasource'
@Component({
imports: [
ChartModule, RangeNavigatorModule
],
providers: [ AreaSeriesService, DateTimeService, StepLineSeriesService ],
standalone: true,
selector: 'app-container',
template: `<ejs-rangenavigator id="rn-container" valueType='DateTime' [value]='value'>
<e-rangenavigator-series-collection>
<e-rangenavigator-series [dataSource]='chartData' type='Area' xName='x' yName='y' width=2>
</e-rangenavigator-series>
</e-rangenavigator-series-collection>
</ejs-rangenavigator>`
})
export class AppComponent implements OnInit {
public periodsValue?: Object[];
public chartData?: Object[];
public value?: Object[];
ngOnInit(): void {
this.chartData = datasrc;
this.value=[new Date("2017-08-13"), new Date("2017-12-28")];
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Note: To use date-time scale, inject the
DateTimeService
into the@NgModule.providers
.
Interval Customization
The DateTime intervals can be customized using the interval
and the intervalType
properties of the Range Selector. For example, if the interval
is set to 2 and the intervalType
is set to years, the interval will be considered to be 2 years.
DateTime supports the following interval types:
- Auto
- Years
- Quarter
- Months
- Weeks
- Days
- Hours
- Minutes
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule, RangeNavigatorModule } from '@syncfusion/ej2-angular-charts'
import { AreaSeriesService, DateTimeService, StepLineSeriesService} from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { datasrc } from './datasource'
@Component({
imports: [
ChartModule, RangeNavigatorModule
],
providers: [ AreaSeriesService, DateTimeService, StepLineSeriesService ],
standalone: true,
selector: 'app-container',
template: `<ejs-rangenavigator id="rn-container" valueType='DateTime' [value]='value' intervalType='Months' [interval]='interval'>
<e-rangenavigator-series-collection>
<e-rangenavigator-series [dataSource]='chartData' type='Area' xName='x' yName='y' width=2>
</e-rangenavigator-series>
</e-rangenavigator-series-collection>
</ejs-rangenavigator>`
})
export class AppComponent implements OnInit {
public chartData?: Object[];
public value?: Object[];
public interval?:number;
ngOnInit(): void {
this.chartData = datasrc;
this.value=[new Date("2017-08-13"), new Date("2017-12-28")];
this.interval = 2;
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Label Format
The labelFormat
property is used to format and parse the date to all globalize format.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule, RangeNavigatorModule } from '@syncfusion/ej2-angular-charts'
import { AreaSeriesService, DateTimeService, StepLineSeriesService} from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { datasrc } from './datasource'
@Component({
imports: [
ChartModule, RangeNavigatorModule
],
providers: [ AreaSeriesService, DateTimeService, StepLineSeriesService ],
standalone: true,
selector: 'app-container',
template: `<ejs-rangenavigator id="rn-container" valueType='DateTime' [value]='value' labelFormat='y/M/d'>
<e-rangenavigator-series-collection>
<e-rangenavigator-series [dataSource]='chartData' type='Area' xName='x' yName='y' width=2>
</e-rangenavigator-series>
</e-rangenavigator-series-collection>
</ejs-rangenavigator>`
})
export class AppComponent implements OnInit {
public chartData?: Object[];
public value?: Object[];
ngOnInit(): void {
this.chartData = datasrc;
this.value=[new Date("2017-08-13"), new Date("2017-12-28")];
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
The following table shows the results of applying some common DateTime 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 the day format. |
new Date(2000, 03, 10) | yMd | 04/10/2000 | The date is displayed in the 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 | The 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. |