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.
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);