How to add a table in the tooltip in React Chart

To render a custom HTML table inside the tooltip, assign a JSX function reference to the template property of the chart’s tooltip config. The function receives the hovered point’s data and returns the JSX you want to display — including <table>, <div>, images, or any other elements you need.

You also need to register Tooltip in the chart’s <Inject services={[…]}>> array; without it the tooltip never renders and the template callback never fires.

Define the template function

Declare a regular React function that returns the JSX you want inside the tooltip. The function receives an args object whose args.x and args.y are the hovered point’s x and y values. The example uses these to render a small table:

function 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>
    );
}

The function is plain JSX, so you can use any HTML or React constructs inside it — <table>, <img>, conditional rendering, and so on. The chart re-runs the function for every hovered point, so the values stay in sync with the data.

Bind the function to the tooltip

Pass the function reference into the template property of the chart’s tooltip config:

const tooltip = {
    enable: true,
    template: chartTemplate
};

Bind the config on the <ChartComponent>:

<ChartComponent id='charts' tooltip={tooltip} ... >

enable: true is required — without it the tooltip is disabled and the template is never used.

The complete example below wires the chartTemplate function, the tooltip.template config, and the <ChartComponent> together.

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';
import { data } from './datasource';
function App() {
    const primaryxAxis = { title: 'Overs' };
    const primaryyAxis = { title: 'Runs' };
    const template = chartTemplate;
    const tooltip = {
        enable: true,
        template: template
    };
    function 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>);
    }
    const marker = { visible: true };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='India Vs Australia 1st match' tooltip={tooltip}>
      <Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category, StripLine]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' type='Line' marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
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';
import { data } from './datasource';
function App() {
  const primaryxAxis: AxisModel = { title: 'Overs' };
  const primaryyAxis: AxisModel = { title: 'Runs' };
  const template:any = chartTemplate;
  const tooltip: TooltipSettingsModel = {
    enable: true,
    template: template
  };
  function 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>);
  }
  const marker = { visible: true };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='India Vs Australia 1st match'
      tooltip={tooltip}>
      <Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category, StripLine]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' type='Line' marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let 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 }
];
export let data: Object[] = [
    { 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 }
];

Troubleshooting

  • “The default tooltip still appears” — Tooltip is missing from the chart’s <Inject services={[…]}>> array, or enable: true is missing on the tooltip config. Both are required.
  • “The template is undefined inside the function” — the function is being called before the chart has data, or template is being assigned the function’s return value (template: chartTemplate()) instead of the function reference (template: chartTemplate).
  • “The table layout breaks when the chart resizes” — fixed pixel widths inside the template do not scale. Use percentage widths (width: '100%') or maxWidth on the inner <table> so it adapts.

See also