Labels in Angular Range navigator component
27 Apr 202413 minutes to read
Multilevel labels
The multi-level labels for the Range Selector can be enabled by setting the enableGrouping
property to true. This is restricted to the DateTime axis alone.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule, RangeNavigatorModule } from '@syncfusion/ej2-angular-charts'
import { AreaSeriesService, DateTimeService, RangeTooltipService} from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
@Component({
imports: [
ChartModule, RangeNavigatorModule
],
providers: [ AreaSeriesService, DateTimeService, RangeTooltipService ],
standalone: true,
selector: 'app-container',
template: `<ejs-rangenavigator id="rn-container" labelPosition='Outside' valueType='DateTime' [value]='value' intervalType='Quarter' [enableGrouping]='grouping' [dataSource]='chartData' xName='x' yName='y' tooltip='tooltip'></ejs-rangenavigator>`
})
export class AppComponent implements OnInit {
public data: object[] = [];
public value: number = 0;
public point: object = {};
public chartData?: Object[];
public values?: Object[];
public grouping?: boolean;
public tooltip?: Object;
ngOnInit(): void {
this.chartData =[];
for (let j = 1; j < 1090; j++) {
this.value += (Math.random() * 10 - 5);
this.value = this.value < 0 ? Math.abs(this.value) : this.value;
this.point = { x: new Date(2000, 0, j), y: this.value, z: (this.value + 10) };
this.chartData.push(this.point);
};
this.values = [new Date("2001, 1,1"), new Date("2002,1,1")];
this.grouping = true;
this.tooltip= { enable: true };
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Grouping
The multi-level labels can be grouped using the groupBy
property with the following interval types:
- Auto
- Years
- Quarter
- Months
- Weeks
- Days
- Hours
- Minutes
- Seconds
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule, RangeNavigatorModule } from '@syncfusion/ej2-angular-charts'
import { AreaSeriesService, DateTimeService, RangeTooltipService} from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
@Component({
imports: [
ChartModule, RangeNavigatorModule
],
providers: [ AreaSeriesService, DateTimeService, RangeTooltipService ],
standalone: true,
selector: 'app-container',
template: `<ejs-rangenavigator id="rn-container" labelPosition='Outside' valueType='DateTime' [value]='value' intervalType='Quarter' [enableGrouping]='grouping' groupBy='Years' [dataSource]='chartData' xName='x' yName='y' tooltip='tooltip'></ejs-rangenavigator>`
})
export class AppComponent implements OnInit {
public data: object[] = [];
public value?: number = 0;
public point: object = {};
public chartData?: Object[];
public values?: Object[];
public grouping?: boolean;
public tooltip?: Object;
ngOnInit(): void {
this.chartData =[];
for (let j = 1; j < 1090; j++) {
(this.value as number) += (Math.random() * 10 - 5) as number;
this.value = (this.value as number) < 0 ? Math.abs(this.value as number) : this.value;
this.point = { x: new Date(2000, 0, j), y: this.value, z: ((this.value as number) + 10) };
this.chartData.push(this.point);
};
this.values = [new Date("2001, 1,1"), new Date("2002,1,1")];
this.grouping = true;
this.tooltip= { enable: true };
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Smart labels
The labelIntersectAction
property is used to avoid overlapping of labels. The following code sample shows the setting of labelIntersectAction
property to Hide.
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' labelIntersectAction='Hide'
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));
Label positioning
By default, the labels can be placed outside the Range Selector. It can also be placed inside the Range Selector using the labelPosition
property.
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' labelPosition='Inside'>
<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));
Labels customization
The font size, color, family, etc. can be customized using the labelStyle
setting.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule, RangeNavigatorModule } from '@syncfusion/ej2-angular-charts'
import { AreaSeriesService, DateTimeService} from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { GetDateTimeData } from './datasource'
@Component({
imports: [
ChartModule, RangeNavigatorModule
],
providers: [ AreaSeriesService, DateTimeService ],
standalone: true,
selector: 'app-container',
template: `<ejs-rangenavigator id="rn-container" valueType='DateTime' [value]='value' intervalType='Months'[labelFormat]='labelFormat' [labelStyle]='labelStyle' [dataSource]='chartData' xName='x' yName='y'></ejs-rangenavigator>`
})
export class AppComponent implements OnInit {
public value?: Object[];
public chartData?: Object[];
public tooltip?: Object;
public labelFormat?: string;
public labelStyle?: Object;
ngOnInit(): void {
this.value = [new Date(2018, 5, 1), new Date(2018, 6, 1)];
this.chartData = GetDateTimeData(new Date(2018, 0, 1), new Date(2019, 0, 1));
this.labelFormat = 'MMM';
this.labelStyle= { color: 'red', size:'10px'};
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));