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,
<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>Step 2:
To show that tooltip template, set the element id to the template property in tooltip.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, StripLine, Legend, Category, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts';
class App extends React.Component {
constructor() {
super(...arguments);
this.data = [
{ x: 1, y: 20 }, { x: 2, y: 22 }, { x: 3, y: 10 }, { x: 4, y: 12 }, { x: 5, y: 5 },
{ x: 6, y: 15 }, { x: 7, y: 6 }, { x: 8, y: 12 }, { x: 9, y: 34 }, { x: 10, y: 7 },
];
this.primaryxAxis = { title: 'Overs' };
this.primaryyAxis = { title: 'Runs' };
this.template = this.chartTemplate;
this.tooltip = {
enable: true,
template: this.template
};
this.marker = { visible: true };
}
chartTemplate(args) {
return (<div id="templateWrap">
<table style={{ width: '100%', margin: '5px', border: '1px solid black', backgroundColor: '#00FFFF' }}>
<tbody><tr><th colSpan={2}>Female</th></tr>
<tr><td>{args.x}</td><td>:</td><td>{args.y}</td></tr>
</tbody>
</table>
</div>);
}
render() {
return <ChartComponent id='charts' primaryXAxis={this.primaryxAxis} primaryYAxis={this.primaryyAxis} title='India Vs Australia 1st match' tooltip={this.tooltip}>
<Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category, StripLine]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={this.data} xName='x' yName='y' type='Line' marker={this.marker}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, StripLine,
ColumnSeries, Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection, StripLinesDirective, StripLineDirective,
AxisModel, TooltipSettingsModel}
from'@syncfusion/ej2-react-charts';
class App extends React.Component<{}, {}> {
public data: any[] = [
{ x: 1, y: 20 }, { x: 2, y: 22 }, { x: 3, y: 10 }, { x: 4, y: 12 }, { x: 5, y: 5 },
{ x: 6, y: 15 }, { x: 7, y: 6 }, { x: 8, y: 12 }, { x: 9, y: 34 }, { x: 10, y: 7 },
];
public primaryxAxis: AxisModel = { title: 'Overs' };
public primaryyAxis: AxisModel = { title: 'Runs' };
public template:any =this.chartTemplate;
public tooltip: TooltipSettingsModel = {
enable: true,
template: this.template
};
public chartTemplate(args:any){
return (<div id="templateWrap">
<table style={{width:'100%',margin: '5px', border: '1px solid black' ,backgroundColor:'#00FFFF'}}>
<tbody><tr><th colSpan={2}>Female</th></tr>
<tr><td>{args.x}</td><td>:</td><td>{args.y}</td></tr>
</tbody>
</table>
</div>);
}
public marker = { visible: true };
render() {
return <ChartComponent id='charts'
primaryXAxis={this.primaryxAxis}
primaryYAxis={this.primaryyAxis}
title='India Vs Australia 1st match'
tooltip={this.tooltip}>
<Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category, StripLine]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={this.data} xName='x' yName='y' type='Line' marker={this.marker}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));