Angular
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
FREE TRIAL
Search results

Table in Tooltip in Angular Chart component

You can show the tooltip as table by using template property in tooltip.

Follow the given steps to show the table tooltip,

Step 1:

Initialize the tooltip template div as shown in the following html page,

   <script id="Female-Material" type="text/x-template">
    <div id='templateWrap'>
        <table style="width:100%;  border: 1px solid black;">
        <tr><th colspan="2" bgcolor="#00FFFF">Female</th></tr>
        <tr><td bgcolor="#00FFFF">${x}:</td><td bgcolor="#00FFFF">${y}</td></tr>
        </table>
    </div>
   </script>

Step 2:

To show that tooltip template, set the element id to the template property in tooltip.

Source
Preview
app.component.ts
app.module.ts
main.ts
import { Component, OnInit } from '@angular/core';
import { IPointRenderEventArgs } from '@syncfusion/ej2-angular-charts';

@Component({
    selector: 'app-container',
    template:
    `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title'  [tooltip]='tooltip'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Line' xName='x' yName='y' name='Female' width=2 [marker]='marker'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis: Object;
    public chartData: Object[];
    public title: string;
    public marker: Object;
    public tooltip: Object;
    public primaryYAxis: Object;
    ngOnInit(): void {
        this.chartData =[
                    { x: 2010, y: 990 }, { x: 2011, y: 1010 },
                    { x: 2012, y: 1030 }, { x: 2013, y: 1070 },
                    { x: 2014, y: 1105 }, { x: 2015, y: 1138 },
                    { x: 2016, y: 1155 }
                ];
        this.primaryXAxis = {
           minimum: 2010, maximum: 2016,
          edgeLabelPlacement: 'Shift',
        };
        this.primaryYAxis = {
            minimum: 900, maximum: 1300,
            labelFormat: '{value}M',
        };
        this.marker = { visible: true, width: 10, height: 10, shape: 'Rectangle'};
        this.tooltip = {
            enable: true,
            template:'#Female-Material'
            }
        this.title = 'Population of India ( 2010 - 2016 )';
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ChartModule } from '@syncfusion/ej2-angular-charts';
import { LineSeriesService, DateTimeService, DataLabelService,StackingColumnSeriesService,CategoryService, ChartShape,
       StepAreaSeriesService,ChartAnnotationService, LegendService, TooltipService} from '@syncfusion/ej2-angular-charts';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, ChartModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [ LineSeriesService, DateTimeService, DataLabelService, StackingColumnSeriesService,CategoryService,
               StepAreaSeriesService,ChartAnnotationService, LegendService, TooltipService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

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