Tooltip in Angular Range Navigator component

Angular

Search results

30 Jul 2021 / 2 minutes to read

The range navigator supports tooltips for sliders. Sliders are used to select data at a range in the range navigator. Tooltips display the selected start and end values.

Customization

Tooltips can be customized using the following properties:

tooltip: Customizes the text displayed in tooltip.
enable: Customizes the visibility of the tooltip.
fill: Customizes the background color of the tooltip.
opacity: Customizes the opacity of the tooltip.
textStyle: Customizes the font size, color, family, style, weight, alignment, and overflow of the tooltip.

Source

Preview

app.component.ts

app.module.ts

main.ts

import { Component, OnInit } from '@angular/core';
import { datasrc } from 'data.ts';

@Component({
selector: 'app-container',
template:
`<ejs-rangenavigator id="rn-container" valueType='DateTime' [value]='value' [tooltip]='tooltip'>
        <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 value: Object[];
public chartData: Object[];
public tooltip: Object[];
ngOnInit(): void {
    this.value = [new Date('2017-09-01'), new Date('2018-02-01')];
    this.chartData = datasrc;
    this.tooltip = { enable: true, displayMode: 'Always', fill:'red', opacity: 0.6, textStyle:{ style: 'Italic', color:'blue', size:'12px'} };
}
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ChartModule, RangeNavigatorModule } from '@syncfusion/ej2-angular-charts';
import { AreaSeriesService, DateTimeService, RangeTooltipService} from '@syncfusion/ej2-angular-charts';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, ChartModule, RangeNavigatorModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [ AreaSeriesService, DateTimeService, RangeTooltipService ]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Label Format

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