Tool tip in Angular Bullet chart component

When the mouse is hovered over a bar in the Bullet Chart, the tooltip displays important summary about the actual and the target bar values.

Enable Tooltip

You can enable the tooltip for the Bullet Chart by setting the enable property to true in the tooltip object and by adding the BulletTooltipService to the providers array in your component:

app.component.ts

import { Component } from '@angular/core';
import { BulletChartModule, BulletTooltipService } from '@syncfusion/ej2-angular-charts';

@Component({
    imports: [BulletChartModule],
    standalone: true,
    providers: [BulletTooltipService],
    selector: 'app-root',
    template: `<ejs-bulletchart valueField='value' targetField='target' title='Revenue'
                [minimum]='minimum' [maximum]='maximum' [interval]='interval' [dataSource]='data'
                [tooltip]='tooltip'>
                <e-bullet-range-collection>
                    <e-bullet-range end='100' color='#ebebeb'></e-bullet-range>
                    <e-bullet-range end='200' color='#d8d8d8'></e-bullet-range>
                    <e-bullet-range end='300' color='#7f7f7f'></e-bullet-range>
                </e-bullet-range-collection>
                </ejs-bulletchart>`
})
export class AppComponent {
    public minimum: number = 0;
    public maximum: number = 300;
    public interval: number = 50;
    public tooltip: Object = { enable: true };
    public data: Object[] = [
        { value: 270, target: 250 }
    ];
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Tooltip Template

Any HTML elements can be displayed in the tooltip by using the template property of the tooltip. You can use the ${target} and ${value} as place holders in the HTML element to display the value and target values from the data source of corresponding data point.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { BulletChartModule} from '@syncfusion/ej2-angular-charts'
import { BulletTooltipService} from '@syncfusion/ej2-angular-charts'




import { Component } from '@angular/core';
import { AnimationModel } from '@syncfusion/ej2-charts';

@Component({
imports: [
         BulletChartModule
    ],

providers: [ BulletTooltipService ],
standalone: true,
    selector: 'app-container',
    template: `<ejs-bulletchart valueField='value' targetField='target' [minimum]='minimum' [maximum]='maximum'
  [interval]='interval' [dataSource]='data' [animation]='animation' title='Sales Rate' subtitle='(in dollars $)'
  [tooltip]='tooltip' height='110px'>
  <e-bullet-range-collection>
    <e-bullet-range end='35' color='#ebebeb'></e-bullet-range>
    <e-bullet-range end='70' color='#d8d8d8'></e-bullet-range>
    <e-bullet-range end='100' color='#7f7f7f'></e-bullet-range>
  </e-bullet-range-collection>
</ejs-bulletchart>`
})
export class AppComponent {
 public minimum: number = 0;
  public maximum: number = 100;
  public interval: number = 20;
  public data: Object[] = [
      { value: 55, target: 45 }
    ];
  public animation: AnimationModel = { enable: false };
  public tooltip: Object = { enable: true, template : '#Tooltip' };
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Tooltip Customization

The following properties can be used to customize the Bullet Chart tooltip.

• fill - Specifies the color of tooltip.
• border - Specifies the tooltip border color and width.
• textStyle - Specifies the tooltip font family, font style, font weight, color and size.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { BulletChartModule} from '@syncfusion/ej2-angular-charts'




import { Component } from '@angular/core';
import { AnimationModel } from '@syncfusion/ej2-charts';

@Component({
imports: [
         BulletChartModule
    ],

providers: [ ],
standalone: true,
    selector: 'app-container',
    template: `<ejs-bulletchart valueField='value' targetField='target' [minimum]='minimum' [maximum]='maximum'
  [interval]='interval' [dataSource]='data' [animation]='animation' title='Sales Rate' subtitle='(in dollars $)'
  [tooltip]='tooltip'>
  <e-bullet-range-collection>
    <e-bullet-range end='35' color='#ebebeb'></e-bullet-range>
    <e-bullet-range end='70' color='#d8d8d8'></e-bullet-range>
    <e-bullet-range end='100' color='#7f7f7f'></e-bullet-range>
  </e-bullet-range-collection>
</ejs-bulletchart>`
})
export class AppComponent {
  public minimum: number = 0;
  public maximum: number = 100;
  public interval: number = 20;
  public data: Object[] = [
      { value: 55, target: 45 }
    ];
  public animation: AnimationModel = { enable: false };
  public tooltip: Object = { enable: true, fill: 'red', border:{ color: 'green', width: 10 } };
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));