Tooltip in React Charts

The chart displays detailed information about a data point through a tooltip when the mouse pointer moves over the point.

Note: The examples in this section assume that the @syncfusion/ej2-react-charts package is installed. Import ChartComponent, SeriesCollectionDirective, SeriesDirective, and Inject from the package, and add Tooltip to the services array of Inject. For setup details, see Getting started with React Chart.

Default Tooltip

By default, the tooltip is disabled. Enable it by setting the enable property to true on the tooltip settings and by adding the Tooltip module to the services array of Inject, as shown in the following example:

import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Tooltip } from '@syncfusion/ej2-react-charts';

const tooltip = { enable: true };

<ChartComponent tooltip={tooltip}>
    <Inject services={[Tooltip]} />
    <SeriesCollectionDirective>
        <SeriesDirective />
    </SeriesCollectionDirective>
</ChartComponent>

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, DateTime, Tooltip, DataLabel, StepLineSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'DateTime' };
    const tooltip = { enable: true };
    const marker = { visible: true, width: 10, height: 10 };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} tooltip={tooltip} title='Unemployment Rates 1975-2010'>
      <Inject services={[StepLineSeries, Legend, Tooltip, DataLabel, DateTime]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' name='China' width={2} type='StepLine' 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 { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,TooltipSettingsModel,
         Legend, DateTime, Tooltip, DataLabel, StepLineSeries}
from'@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {

  const primaryxAxis: AxisModel = { valueType: 'DateTime' };
  const tooltip: TooltipSettingsModel = { enable: true };
  const marker = { visible: true, width: 10, height: 10 };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      tooltip={tooltip}
      title='Unemployment Rates 1975-2010'>
      <Inject services={[StepLineSeries, Legend, Tooltip, DataLabel, DateTime]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' name='China' width={2}
          type='StepLine' marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let data = [
    { x: new Date(1975, 0, 1), y: 16,   y1: 10,  y2: 4.5 },
    { x: new Date(1980, 0, 1), y: 12.5, y1: 7.5, y2: 5 },
    { x: new Date(1985, 0, 1), y: 19,   y1: 11,  y2: 6.5 },
    { x: new Date(1990, 0, 1), y: 14.4, y1: 7,   y2: 4.4 },
    { x: new Date(1995, 0, 1), y: 11.5, y1: 8,   y2: 5 },
    { x: new Date(2000, 0, 1), y: 14,   y1: 6,   y2: 1.5 },
    { x: new Date(2005, 0, 1), y: 10,   y1: 3.5, y2: 2.5 },
    { x: new Date(2010, 0, 1), y: 16,   y1: 7,   y2: 3.7 }
];
export let data: Object[] = [
    { x: new Date(1975, 0, 1), y: 16,   y1: 10,  y2: 4.5 },
    { x: new Date(1980, 0, 1), y: 12.5, y1: 7.5, y2: 5 },
    { x: new Date(1985, 0, 1), y: 19,   y1: 11,  y2: 6.5 },
    { x: new Date(1990, 0, 1), y: 14.4, y1: 7,   y2: 4.4 },
    { x: new Date(1995, 0, 1), y: 11.5, y1: 8,   y2: 5 },
    { x: new Date(2000, 0, 1), y: 14,   y1: 6,   y2: 1.5 },
    { x: new Date(2005, 0, 1), y: 10,   y1: 3.5, y2: 2.5 },
    { x: new Date(2010, 0, 1), y: 16,   y1: 7,   y2: 3.7 }
];

Fixed Tooltip

By default, the tooltip tracks the mouse movement. Use the location property to render the tooltip at a fixed position. The location property accepts an object with x and y pixel offsets measured from the chart’s top-left corner:

const tooltip = {
    enable: true,
    location: { x: 120, y: 20 }
};
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, DateTime, Tooltip, StepLineSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';

function App() {
    const primaryxAxis = { valueType: 'DateTime' };
    const tooltip = { enable: true, location: { x: 120, y: 20 } };
    const marker = { visible: true, width: 10, height: 10 };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} tooltip={tooltip} title='Unemployment Rates 1975-2010'>
      <Inject services={[StepLineSeries, Tooltip, DateTime]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' name='China' width={2} type='StepLine' 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 {
  AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, TooltipSettingsModel,
  DateTime, Tooltip, StepLineSeries
}
  from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {

  const primaryxAxis: AxisModel = { valueType: 'DateTime' };
  const tooltip: TooltipSettingsModel = { enable: true, location: { x: 120, y: 20 } };
  const marker = { visible: true, width: 10, height: 10 };

  return <ChartComponent id='charts'
    primaryXAxis={primaryxAxis}
    tooltip={tooltip}
    title='Unemployment Rates 1975-2010'>
    <Inject services={[StepLineSeries, Tooltip, DateTime]} />
    <SeriesCollectionDirective>
      <SeriesDirective dataSource={data} xName='x' yName='y' name='China' width={2}
        type='StepLine' marker={marker}>
      </SeriesDirective>
    </SeriesCollectionDirective>
  </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let data = [
    { x: new Date(1975, 0, 1), y: 16,   y1: 10,  y2: 4.5 },
    { x: new Date(1980, 0, 1), y: 12.5, y1: 7.5, y2: 5 },
    { x: new Date(1985, 0, 1), y: 19,   y1: 11,  y2: 6.5 },
    { x: new Date(1990, 0, 1), y: 14.4, y1: 7,   y2: 4.4 },
    { x: new Date(1995, 0, 1), y: 11.5, y1: 8,   y2: 5 },
    { x: new Date(2000, 0, 1), y: 14,   y1: 6,   y2: 1.5 },
    { x: new Date(2005, 0, 1), y: 10,   y1: 3.5, y2: 2.5 },
    { x: new Date(2010, 0, 1), y: 16,   y1: 7,   y2: 3.7 }
];
export let data: Object[] = [
    { x: new Date(1975, 0, 1), y: 16,   y1: 10,  y2: 4.5 },
    { x: new Date(1980, 0, 1), y: 12.5, y1: 7.5, y2: 5 },
    { x: new Date(1985, 0, 1), y: 19,   y1: 11,  y2: 6.5 },
    { x: new Date(1990, 0, 1), y: 14.4, y1: 7,   y2: 4.4 },
    { x: new Date(1995, 0, 1), y: 11.5, y1: 8,   y2: 5 },
    { x: new Date(2000, 0, 1), y: 14,   y1: 6,   y2: 1.5 },
    { x: new Date(2005, 0, 1), y: 10,   y1: 3.5, y2: 2.5 },
    { x: new Date(2010, 0, 1), y: 16,   y1: 7,   y2: 3.7 }
];

Format the Tooltip

By default, the tooltip displays the x- and y-values of a data point. Additional information can be shown by specifying a custom format. For example, the format ${series.name} ${point.x} displays the series name along with the x-value of the data point.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, DateTime, Tooltip, DataLabel, StepLineSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'DateTime' };
    const tooltip = {
        enable: true, header: 'Unemployment',
        format: '<b>${point.x} : ${point.y}</b>'
    };
    const marker = { visible: true, width: 10, height: 10 };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} tooltip={tooltip} title='Unemployment Rates 1975-2010'>
      <Inject services={[StepLineSeries, Legend, Tooltip, DataLabel, DateTime]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' name='China' width={2} type='StepLine' 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 { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,TooltipSettingsModel,
         Legend, DateTime, Tooltip, DataLabel, StepLineSeries}
from'@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {

  const primaryxAxis: AxisModel = { valueType: 'DateTime' };
  const tooltip: TooltipSettingsModel = {
    enable: true, header: 'Unemployment',
    format: '<b>${point.x} : ${point.y}</b>'
  };
  const marker = { visible: true, width: 10, height: 10 };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      tooltip={tooltip}
      title='Unemployment Rates 1975-2010'>
      <Inject services={[StepLineSeries, Legend, Tooltip, DataLabel, DateTime]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' name='China' width={2}
          type='StepLine' marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let data = [
    { x: new Date(1975, 0, 1), y: 16,   y1: 10,  y2: 4.5 },
    { x: new Date(1980, 0, 1), y: 12.5, y1: 7.5, y2: 5 },
    { x: new Date(1985, 0, 1), y: 19,   y1: 11,  y2: 6.5 },
    { x: new Date(1990, 0, 1), y: 14.4, y1: 7,   y2: 4.4 },
    { x: new Date(1995, 0, 1), y: 11.5, y1: 8,   y2: 5 },
    { x: new Date(2000, 0, 1), y: 14,   y1: 6,   y2: 1.5 },
    { x: new Date(2005, 0, 1), y: 10,   y1: 3.5, y2: 2.5 },
    { x: new Date(2010, 0, 1), y: 16,   y1: 7,   y2: 3.7 }
];
export let data: Object[] = [
    { x: new Date(1975, 0, 1), y: 16,   y1: 10,  y2: 4.5 },
    { x: new Date(1980, 0, 1), y: 12.5, y1: 7.5, y2: 5 },
    { x: new Date(1985, 0, 1), y: 19,   y1: 11,  y2: 6.5 },
    { x: new Date(1990, 0, 1), y: 14.4, y1: 7,   y2: 4.4 },
    { x: new Date(1995, 0, 1), y: 11.5, y1: 8,   y2: 5 },
    { x: new Date(2000, 0, 1), y: 14,   y1: 6,   y2: 1.5 },
    { x: new Date(2005, 0, 1), y: 10,   y1: 3.5, y2: 2.5 },
    { x: new Date(2010, 0, 1), y: 16,   y1: 7,   y2: 3.7 }
];

Individual Series Format

Each series tooltip can be formatted separately by using the series tooltipFormat property.

Note: When the series tooltipFormat property is specified, the tooltip for that series is displayed in the defined format. Otherwise, the global tooltip format is applied.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, SplineSeries } from '@syncfusion/ej2-react-charts';
import { data1, data2, data3 } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'Category' };
    const tooltip = {
        enable: true, header: 'Unemployment',
        format: '<b>${point.x} : ${point.y}</b>'
    };
    const marker = { visible: true, width: 10, height: 10 };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} tooltip={tooltip} title='Unemployment Rates 1975-2010'>
      <Inject services={[SplineSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data1} xName='x' yName='y' name='Max Temp' width={2} type='Spline' marker={marker} tooltipFormat='${point.x}'>
        </SeriesDirective>
        <SeriesDirective dataSource={data2} xName='x' yName='y' name='Avg Temp' width={2} type='Spline' marker={marker} tooltipFormat='${point.y}'>
        </SeriesDirective>
        <SeriesDirective dataSource={data3} xName='x' yName='y' name='Min Temp' width={2} type='Spline' 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 { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,TooltipSettingsModel, Legend, Category, Tooltip, DataLabel, SplineSeries}
from'@syncfusion/ej2-react-charts';
import { data1, data2, data3 } from './datasource';

function App() {

  const primaryxAxis: AxisModel = { valueType: 'Category' };
  const tooltip: TooltipSettingsModel = {
    enable: true, header: 'Unemployment',
    format: '<b>${point.x} : ${point.y}</b>'
  };
  const marker = { visible: true, width: 10, height: 10 };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      tooltip={tooltip}
      title='Unemployment Rates 1975-2010'>
      <Inject services={[SplineSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data1} xName='x' yName='y' name='Max Temp' width={2}
          type='Spline' marker={marker} tooltipFormat='${point.x}'>
        </SeriesDirective>
        <SeriesDirective dataSource={data2} xName='x' yName='y' name='Avg Temp' width={2}
          type='Spline' marker={marker} tooltipFormat='${point.y}'>
        </SeriesDirective>
        <SeriesDirective dataSource={data3} xName='x' yName='y' name='Min Temp' width={2}
          type='Spline' marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let data1 = [
    { x: 'Sun', y: 15 }, 
    { x: 'Mon', y: 22 },
    { x: 'Tue', y: 32 },
    { x: 'Wed', y: 31 },
    { x: 'Thu', y: 29 }, 
    { x: 'Fri', y: 24 },
    { x: 'Sat', y: 18 }
];

export let data2 = [
    { x: 'Sun', y: 10 }, 
    { x: 'Mon', y: 18 },
    { x: 'Tue', y: 28 },
    { x: 'Wed', y: 28 },
    { x: 'Thu', y: 26 }, 
    { x: 'Fri', y: 20 },
    { x: 'Sat', y: 15 }
];

export let data3 = [
    { x: 'Sun', y: 2 }, 
    { x: 'Mon', y: 12 },
    { x: 'Tue', y: 22 },
    { x: 'Wed', y: 23 },
    { x: 'Thu', y: 19 }, 
    { x: 'Fri', y: 13 },
    { x: 'Sat', y: 8 }
];
export let data1: Object[] = [
    { x: 'Sun', y: 15 }, 
    { x: 'Mon', y: 22 },
    { x: 'Tue', y: 32 },
    { x: 'Wed', y: 31 },
    { x: 'Thu', y: 29 }, 
    { x: 'Fri', y: 24 },
    { x: 'Sat', y: 18 }
];

export let data2: Object[] = [
    { x: 'Sun', y: 10 }, 
    { x: 'Mon', y: 18 },
    { x: 'Tue', y: 28 },
    { x: 'Wed', y: 28 },
    { x: 'Thu', y: 26 }, 
    { x: 'Fri', y: 20 },
    { x: 'Sat', y: 15 }
];

export let data3: Object[] = [
    { x: 'Sun', y: 2 }, 
    { x: 'Mon', y: 12 },
    { x: 'Tue', y: 22 },
    { x: 'Wed', y: 23 },
    { x: 'Thu', y: 19 }, 
    { x: 'Fri', y: 13 },
    { x: 'Sat', y: 8 }
];

Inline Tooltip Formatting

The tooltip content can be formatted directly within the format property by adding DateTime or number format specifiers to supported tooltip tokens. This allows you to control how point and series values are displayed without using additional events.

A format specifier can be applied to a tooltip token by adding a colon (:) followed by the required format.

For example:

const tooltip = {
    enable: true,
    format: '${series.name} (${series.type})<br>${point.x:MMM yyyy} : ${point.y:n2}<br>Size: ${point.size}<br>Opacity: ${series.opacity}'
};

In the above example, point.x is displayed in month-year format, point.y is displayed with two decimal places, point.size displays the size value of the data point, and series.opacity displays the opacity value applied to the series.

Supported Tokens

The following tokens can be combined with a format specifier:

Token Description Series type
point.x x-value of the data point (DateTime or category). All
point.y Numeric y-value of the data point. All
point.size Size value of the data point. Bubble
point.high, point.low High and low values. Range, financial
point.open, point.close Open and close values. Financial
point.volume Volume value. Financial
point.minimum, point.maximum Minimum and maximum values. Box and whisker
point.median Median value. Box and whisker
point.lowerQuartile, point.upperQuartile Lower and upper quartile values. Box and whisker
point.outliers Outlier values. Box and whisker
series.name Name assigned to the series (string). All
series.type Rendering type of the series (string). All
series.opacity Opacity value configured in the series settings. All

Important: The availability of point-specific tokens depends on the series type and the values configured in the data source. The series.name and series.type tokens return string values, so DateTime or number formatting is not applied to these tokens.

Supported Format Types

The following format types can be appended after the colon (:) for any numeric or DateTime token:

  • DateTime formats such as MMM yyyy, MM:yy, and dd MMM
  • Number formats such as:
    • n2 – number with two decimal places
    • n0 – number without decimals
    • c2 – currency format
    • p1 – percentage format
    • e1 – exponential notation

If the specified format does not match the resolved value type, the original value is displayed.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, DateTime, Tooltip, StepLineSeries } from'@syncfusion/ej2-react-charts';
import {chartData} from './datasource';

function App() {

  const primaryxAxis = { 
    title: 'Years',
    lineStyle: { width: 0 },
    labelFormat: 'y',
    intervalType: 'Years',
    valueType: 'DateTime',
    edgeLabelPlacement: 'Shift'
  };
  const primaryyAxis = { 
    title: 'Percentage (%)',
    minimum: 0, 
    maximum: 20, 
    interval: 4,
    labelFormat: '{value}%'
  };
  const tooltip = { enable: true, format: '${point.x:MMM yyyy}<br/>${point.y:p0}' };
  const legendSettings = { visible: true };
  const marker = { visible: true, width: 10, height: 10 };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      tooltip={tooltip}
      legendSettings={legendSettings}
      title='Unemployment Rates 1975-2010'>
      <Inject services={[StepLineSeries, Legend, Tooltip, DateTime]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={chartData} xName='x' yName='y' type='StepLine' name='China' width={2} marker={marker}>
        </SeriesDirective>
        <SeriesDirective dataSource={chartData} xName='x' yName='y1' type='StepLine' name='Australia' width={2} marker={marker}>
        </SeriesDirective>
        <SeriesDirective dataSource={chartData} xName='x' yName='y2' type='StepLine' name='Japan' width={2} 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, SeriesDirective, Inject, AxisModel, TooltipSettingsModel, LegendSettingsModel, Legend, DateTime, Tooltip, StepLineSeries } from'@syncfusion/ej2-react-charts';
import {chartData} from './datasource';

function App() {

  const primaryxAxis: AxisModel = { 
    title: 'Years',
    lineStyle: { width: 0 },
    labelFormat: 'y',
    intervalType: 'Years',
    valueType: 'DateTime',
    edgeLabelPlacement: 'Shift'
  };
  const primaryyAxis: AxisModel = { 
    title: 'Percentage (%)',
    minimum: 0, 
    maximum: 20, 
    interval: 4,
    labelFormat: '{value}%'
  };
  const tooltip: TooltipSettingsModel = { enable: true, format: '${point.x:MMM yyyy}<br/>${point.y:p0}' };
  const legendSettings: LegendSettingsModel = { visible: true };
  const marker = { visible: true, width: 10, height: 10 };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      tooltip={tooltip}
      legendSettings={legendSettings}
      title='Unemployment Rates 1975-2010'>
      <Inject services={[StepLineSeries, Legend, Tooltip, DateTime]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={chartData} xName='x' yName='y' type='StepLine' name='China' width={2} marker={marker}>
        </SeriesDirective>
        <SeriesDirective dataSource={chartData} xName='x' yName='y1' type='StepLine' name='Australia' width={2} marker={marker}>
        </SeriesDirective>
        <SeriesDirective dataSource={chartData} xName='x' yName='y2' type='StepLine' name='Japan' width={2} marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let chartData = [
    { x: new Date(1975, 0, 1), y: 16,   y1: 10,  y2: 4.5 },
    { x: new Date(1980, 0, 1), y: 12.5, y1: 7.5, y2: 5 },
    { x: new Date(1985, 0, 1), y: 19,   y1: 11,  y2: 6.5 },
    { x: new Date(1990, 0, 1), y: 14.4, y1: 7,   y2: 4.4 },
    { x: new Date(1995, 0, 1), y: 11.5, y1: 8,   y2: 5 },
    { x: new Date(2000, 0, 1), y: 14,   y1: 6,   y2: 1.5 },
    { x: new Date(2005, 0, 1), y: 10,   y1: 3.5, y2: 2.5 },
    { x: new Date(2010, 0, 1), y: 16,   y1: 7,   y2: 3.7 }
];
export let chartData: Object[] = [
    { x: new Date(1975, 0, 1), y: 16,   y1: 10,  y2: 4.5 },
    { x: new Date(1980, 0, 1), y: 12.5, y1: 7.5, y2: 5 },
    { x: new Date(1985, 0, 1), y: 19,   y1: 11,  y2: 6.5 },
    { x: new Date(1990, 0, 1), y: 14.4, y1: 7,   y2: 4.4 },
    { x: new Date(1995, 0, 1), y: 11.5, y1: 8,   y2: 5 },
    { x: new Date(2000, 0, 1), y: 14,   y1: 6,   y2: 1.5 },
    { x: new Date(2005, 0, 1), y: 10,   y1: 3.5, y2: 2.5 },
    { x: new Date(2010, 0, 1), y: 16,   y1: 7,   y2: 3.7 }
];

Tooltip Template

Custom HTML content can be rendered in the tooltip by using the template property. The ${x} and ${y} placeholders can be used within the template to display the x- and y-values of the corresponding data point.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, DateTime, Tooltip, DataLabel, StepLineSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'DateTime' };
    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}>Unemployment</th></tr>
          <tr><td>{args.x}</td><td>:</td><td>{args.y}</td></tr>
        </tbody>
      </table>
    </div>);
    }
    const marker = { visible: true, width: 10, height: 10 };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} tooltip={tooltip} title='Unemployment Rates 1975-2010'>
      <Inject services={[StepLineSeries, Legend, Tooltip, DataLabel, DateTime]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' name='China' width={2} type='StepLine' 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 { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,TooltipSettingsModel,
         Legend, DateTime, Tooltip, DataLabel, StepLineSeries}
from'@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {

  const primaryxAxis: AxisModel = { valueType: 'DateTime' };
  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}>Unemployment</th></tr>
          <tr><td>{args.x}</td><td>:</td><td>{args.y}</td></tr>
        </tbody>
      </table>
    </div>);
  }
  const marker = { visible: true, width: 10, height: 10 };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      tooltip={tooltip}
      title='Unemployment Rates 1975-2010'>
      <Inject services={[StepLineSeries, Legend, Tooltip, DataLabel, DateTime]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' name='China' width={2}
          type='StepLine' marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let data = [
    { x: new Date(1975, 0, 1), y: 16,   y1: 10,  y2: 4.5 },
    { x: new Date(1980, 0, 1), y: 12.5, y1: 7.5, y2: 5 },
    { x: new Date(1985, 0, 1), y: 19,   y1: 11,  y2: 6.5 },
    { x: new Date(1990, 0, 1), y: 14.4, y1: 7,   y2: 4.4 },
    { x: new Date(1995, 0, 1), y: 11.5, y1: 8,   y2: 5 },
    { x: new Date(2000, 0, 1), y: 14,   y1: 6,   y2: 1.5 },
    { x: new Date(2005, 0, 1), y: 10,   y1: 3.5, y2: 2.5 },
    { x: new Date(2010, 0, 1), y: 16,   y1: 7,   y2: 3.7 }
];
export let data: Object[] = [
    { x: new Date(1975, 0, 1), y: 16,   y1: 10,  y2: 4.5 },
    { x: new Date(1980, 0, 1), y: 12.5, y1: 7.5, y2: 5 },
    { x: new Date(1985, 0, 1), y: 19,   y1: 11,  y2: 6.5 },
    { x: new Date(1990, 0, 1), y: 14.4, y1: 7,   y2: 4.4 },
    { x: new Date(1995, 0, 1), y: 11.5, y1: 8,   y2: 5 },
    { x: new Date(2000, 0, 1), y: 14,   y1: 6,   y2: 1.5 },
    { x: new Date(2005, 0, 1), y: 10,   y1: 3.5, y2: 2.5 },
    { x: new Date(2010, 0, 1), y: 16,   y1: 7,   y2: 3.7 }
];

Series Highlight on Tooltip

By setting the enableHighlight property to true, all points in the hovered series are highlighted while the remaining points are dimmed. This behavior improves focus and readability during data analysis.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, DateTime, Tooltip, StepLineSeries } from'@syncfusion/ej2-react-charts';
import {chartData} from './datasource';

function App() {

  const primaryxAxis = { 
    title: 'Years',
    lineStyle: { width: 0 },
    labelFormat: 'y',
    intervalType: 'Years',
    valueType: 'DateTime',
    edgeLabelPlacement: 'Shift'
  };
  const primaryyAxis = { 
    title: 'Percentage (%)',
    minimum: 0, 
    maximum: 20, 
    interval: 4,
    labelFormat: '{value}%'
  };
  const tooltip = { enable: true, enableHighlight: true };
  const legendSettings = { visible: true };
  const marker = { visible: true, width: 10, height: 10 };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      tooltip={tooltip}
      legendSettings={legendSettings}
      title='Unemployment Rates 1975-2010'>
      <Inject services={[StepLineSeries, Legend, Tooltip, DateTime]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={chartData} xName='x' yName='y' type='StepLine' name='China' width={2} marker={marker}>
        </SeriesDirective>
        <SeriesDirective dataSource={chartData} xName='x' yName='y1' type='StepLine' name='Australia' width={2} marker={marker}>
        </SeriesDirective>
        <SeriesDirective dataSource={chartData} xName='x' yName='y2' type='StepLine' name='Japan' width={2} 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, SeriesDirective, Inject, AxisModel, TooltipSettingsModel, LegendSettingsModel, Legend, DateTime, Tooltip, StepLineSeries } from'@syncfusion/ej2-react-charts';
import {chartData} from './datasource';

function App() {

  const primaryxAxis: AxisModel = { 
    title: 'Years',
    lineStyle: { width: 0 },
    labelFormat: 'y',
    intervalType: 'Years',
    valueType: 'DateTime',
    edgeLabelPlacement: 'Shift'
  };
  const primaryyAxis: AxisModel = { 
    title: 'Percentage (%)',
    minimum: 0, 
    maximum: 20, 
    interval: 4,
    labelFormat: '{value}%'
  };
  const tooltip: TooltipSettingsModel = { enable: true, enableHighlight: true };
  const legendSettings: LegendSettingsModel = { visible: true };
  const marker = { visible: true, width: 10, height: 10 };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      tooltip={tooltip}
      legendSettings={legendSettings}
      title='Unemployment Rates 1975-2010'>
      <Inject services={[StepLineSeries, Legend, Tooltip, DateTime]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={chartData} xName='x' yName='y' type='StepLine' name='China' width={2} marker={marker}>
        </SeriesDirective>
        <SeriesDirective dataSource={chartData} xName='x' yName='y1' type='StepLine' name='Australia' width={2} marker={marker}>
        </SeriesDirective>
        <SeriesDirective dataSource={chartData} xName='x' yName='y2' type='StepLine' name='Japan' width={2} marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let chartData = [
    { x: new Date(1975, 0, 1), y: 16,   y1: 10,  y2: 4.5 },
    { x: new Date(1980, 0, 1), y: 12.5, y1: 7.5, y2: 5 },
    { x: new Date(1985, 0, 1), y: 19,   y1: 11,  y2: 6.5 },
    { x: new Date(1990, 0, 1), y: 14.4, y1: 7,   y2: 4.4 },
    { x: new Date(1995, 0, 1), y: 11.5, y1: 8,   y2: 5 },
    { x: new Date(2000, 0, 1), y: 14,   y1: 6,   y2: 1.5 },
    { x: new Date(2005, 0, 1), y: 10,   y1: 3.5, y2: 2.5 },
    { x: new Date(2010, 0, 1), y: 16,   y1: 7,   y2: 3.7 }
];
export let chartData: Object[] = [
    { x: new Date(1975, 0, 1), y: 16,   y1: 10,  y2: 4.5 },
    { x: new Date(1980, 0, 1), y: 12.5, y1: 7.5, y2: 5 },
    { x: new Date(1985, 0, 1), y: 19,   y1: 11,  y2: 6.5 },
    { x: new Date(1990, 0, 1), y: 14.4, y1: 7,   y2: 4.4 },
    { x: new Date(1995, 0, 1), y: 11.5, y1: 8,   y2: 5 },
    { x: new Date(2000, 0, 1), y: 14,   y1: 6,   y2: 1.5 },
    { x: new Date(2005, 0, 1), y: 10,   y1: 3.5, y2: 2.5 },
    { x: new Date(2010, 0, 1), y: 16,   y1: 7,   y2: 3.7 }
];

Tooltip Mapping Name

By default, the tooltip displays only the x- and y-values of a data point. Additional information from the data source can be shown by using the tooltipMappingName property of the series. Use the ${point.tooltip} placeholder in the tooltip format to display the mapped value.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Category, Legend, DateTime, Tooltip, DataLabel, ColumnSeries } from '@syncfusion/ej2-react-charts';
import { chartData } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'Category' };
    const tooltip = { enable: true, format: '${point.tooltip}' };
    const legendSettings = { visible: false };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} tooltip={tooltip} legendSettings={legendSettings} title='Internet Users in Million – 2016'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, DateTime, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={chartData} xName='x' yName='y' type='Column' tooltipMappingName='country'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,TooltipSettingsModel,LegendSettingsModel,Category,
         Legend, DateTime, Tooltip, DataLabel, ColumnSeries}
from'@syncfusion/ej2-react-charts';
import {chartData} from './datasource';

function App() {

  const primaryxAxis: AxisModel = { valueType: 'Category' };
  const tooltip: TooltipSettingsModel = {enable: true, format: '${point.tooltip}'};
  const legendSettings: LegendSettingsModel = { visible: false};

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      tooltip={tooltip}
      legendSettings={legendSettings}
      title='Internet Users in Million – 2016'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, DateTime, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={chartData} xName='x' yName='y'
          type='Column' tooltipMappingName='country'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let chartData = [
    { x: 'Germany', y: 72, country: 'GER: 72'},
    { x: 'Russia', y: 103.1, country: 'RUS: 103.1'},
    { x: 'Brazil', y: 139.1, country: 'BRZ: 139.1'},
    { x: 'India', y: 462.1, country: 'IND: 462.1'},
    { x: 'China', y: 721.4, country: 'CHN: 721.4'},
    { x: 'United States Of America', y: 286.9, country: 'USA: 286.9'},
    { x: 'Great Britain', y: 115.1, country: 'GBR: 115.1'},
    { x: 'Nigeria', y: 97.2, country: 'NGR: 97.2'}
];
export let chartData: Object[] = [
    { x: 'Germany', y: 72, country: 'GER: 72'},
    { x: 'Russia', y: 103.1, country: 'RUS: 103.1'},
    { x: 'Brazil', y: 139.1, country: 'BRZ: 139.1'},
    { x: 'India', y: 462.1, country: 'IND: 462.1'},
    { x: 'China', y: 721.4, country: 'CHN: 721.4'},
    { x: 'United States Of America', y: 286.9, country: 'USA: 286.9'},
    { x: 'Great Britain', y: 115.1, country: 'GBR: 115.1'},
    { x: 'Nigeria', y: 97.2, country: 'NGR: 97.2'}
];

Tooltip Header

Use the header property to display a title at the top of the tooltip. The value can be a static string or a placeholder such as ${point.x} that is resolved per data point.

const tooltip = {
    enable: true,
    header: '${point.x}',
    format: '${series.name} : ${point.y}'
};

Shared Tooltip

The shared property merges the values of all visible series for the hovered x-value into a single tooltip. This is useful for comparing multiple series at a specific point. To render one tooltip per series instead, use the split property described in Split Tooltip.

const tooltip = {
    enable: true,
    shared: true
};

Tooltip Animation

The duration property controls the duration (in milliseconds) of the tooltip’s open and close animations. The default is 500.

const tooltip = {
    enable: true,
    duration: 1000
};

Use the fadeInDuration and fadeOutDuration properties to configure the fade-in and fade-out durations independently.

Customize the Appearance of Tooltip

The appearance of the tooltip can be customized by using the following properties:

  • fill to set the background color
  • border to configure the tooltip border
  • textStyle to customize the tooltip text style
  • opacity to set the opacity of the tooltip background (value between 0 and 1)

The highlightColor property is used to change the color of a data point when it is highlighted during tooltip interaction. To enable the highlight effect itself, see Series Highlight on Tooltip.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, DateTime, Tooltip, DataLabel, StepLineSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'DateTime' };
    const tooltip = {
        enable: true, format: '${series.name} ${point.x} : ${point.y}',
        fill: '#7bb4eb', border: {
            width: 2,
            color: 'grey'
        }
    };
    const marker = { visible: true, width: 10, height: 10 };
    const titlestyle = {
        fontFamily: "Arial", fontStyle: 'italic', fontWeight: 'regular',
        color: "#E27F2D", size: '23px'
    };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} tooltip={tooltip} title='Unemployment Rates 1975-2010' highlightColor='red' titleStyle={titlestyle}>
      <Inject services={[StepLineSeries, Legend, Tooltip, DataLabel, DateTime]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' name='China' width={2} type='StepLine' 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 { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,TooltipSettingsModel,
         Legend, DateTime, Tooltip, DataLabel, StepLineSeries}
from'@syncfusion/ej2-react-charts';
import { data } from './datasource';

function App() {

  const primaryxAxis: AxisModel = { valueType: 'DateTime' };
  const tooltip: TooltipSettingsModel = {
    enable: true, format: '${series.name} ${point.x} : ${point.y}',
    fill: '#7bb4eb', border: {
      width: 2,
      color: 'grey'
    }
  };
  const marker = { visible: true, width: 10, height: 10 };
  const titlestyle = {
    fontFamily: "Arial", fontStyle: 'italic', fontWeight: 'regular',
    color: "#E27F2D", size: '23px'
  };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      tooltip={tooltip}
      title='Unemployment Rates 1975-2010'
      highlightColor='red'
      titleStyle={titlestyle}>
      <Inject services={[StepLineSeries, Legend, Tooltip, DataLabel, DateTime]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' name='China' width={2}
          type='StepLine' marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let data = [
    { x: new Date(1975, 0, 1), y: 16,   y1: 10,  y2: 4.5 },
    { x: new Date(1980, 0, 1), y: 12.5, y1: 7.5, y2: 5 },
    { x: new Date(1985, 0, 1), y: 19,   y1: 11,  y2: 6.5 },
    { x: new Date(1990, 0, 1), y: 14.4, y1: 7,   y2: 4.4 },
    { x: new Date(1995, 0, 1), y: 11.5, y1: 8,   y2: 5 },
    { x: new Date(2000, 0, 1), y: 14,   y1: 6,   y2: 1.5 },
    { x: new Date(2005, 0, 1), y: 10,   y1: 3.5, y2: 2.5 },
    { x: new Date(2010, 0, 1), y: 16,   y1: 7,   y2: 3.7 }
];
export let data: Object[] = [
    { x: new Date(1975, 0, 1), y: 16,   y1: 10,  y2: 4.5 },
    { x: new Date(1980, 0, 1), y: 12.5, y1: 7.5, y2: 5 },
    { x: new Date(1985, 0, 1), y: 19,   y1: 11,  y2: 6.5 },
    { x: new Date(1990, 0, 1), y: 14.4, y1: 7,   y2: 4.4 },
    { x: new Date(1995, 0, 1), y: 11.5, y1: 8,   y2: 5 },
    { x: new Date(2000, 0, 1), y: 14,   y1: 6,   y2: 1.5 },
    { x: new Date(2005, 0, 1), y: 10,   y1: 3.5, y2: 2.5 },
    { x: new Date(2010, 0, 1), y: 16,   y1: 7,   y2: 3.7 }
];

Closest Tooltip

The showNearestTooltip property displays the tooltip for the data point nearest to the pointer, even when the pointer is not directly positioned over the point.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, DateTime, Tooltip, StepLineSeries } from'@syncfusion/ej2-react-charts';
import {chartData} from './datasource';

function App() {

  const primaryxAxis = { 
    title: 'Years',
    lineStyle: { width: 0 },
    labelFormat: 'y',
    intervalType: 'Years',
    valueType: 'DateTime',
    edgeLabelPlacement: 'Shift'
  };
  const primaryyAxis = { 
    title: 'Percentage (%)',
    minimum: 0, 
    maximum: 20, 
    interval: 4,
    labelFormat: '{value}%'
  };
  const tooltip = { enable: true, enableHighlight: true, showNearestTooltip: true };
  const legendSettings = { visible: true };
  const marker = { visible: true, width: 10, height: 10 };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      tooltip={tooltip}
      legendSettings={legendSettings}
      title='Unemployment Rates 1975-2010'>
      <Inject services={[StepLineSeries, Legend, Tooltip, DateTime]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={chartData} xName='x' yName='y' type='StepLine' name='China' width={2} marker={marker}>
        </SeriesDirective>
        <SeriesDirective dataSource={chartData} xName='x' yName='y1' type='StepLine' name='Australia' width={2} marker={marker}>
        </SeriesDirective>
        <SeriesDirective dataSource={chartData} xName='x' yName='y2' type='StepLine' name='Japan' width={2} 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, SeriesDirective, Inject, AxisModel, TooltipSettingsModel, LegendSettingsModel, Legend, DateTime, Tooltip, StepLineSeries } from'@syncfusion/ej2-react-charts';
import {chartData} from './datasource';

function App() {

  const primaryxAxis: AxisModel = { 
    title: 'Years',
    lineStyle: { width: 0 },
    labelFormat: 'y',
    intervalType: 'Years',
    valueType: 'DateTime',
    edgeLabelPlacement: 'Shift'
  };
  const primaryyAxis: AxisModel = { 
    title: 'Percentage (%)',
    minimum: 0, 
    maximum: 20, 
    interval: 4,
    labelFormat: '{value}%'
  };
  const tooltip: TooltipSettingsModel = { enable: true, enableHighlight: true, showNearestTooltip: true };
  const legendSettings: LegendSettingsModel = { visible: true };
  const marker = { visible: true, width: 10, height: 10 };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      tooltip={tooltip}
      legendSettings={legendSettings}
      title='Unemployment Rates 1975-2010'>
      <Inject services={[StepLineSeries, Legend, Tooltip, DateTime]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={chartData} xName='x' yName='y' type='StepLine' name='China' width={2} marker={marker}>
        </SeriesDirective>
        <SeriesDirective dataSource={chartData} xName='x' yName='y1' type='StepLine' name='Australia' width={2} marker={marker}>
        </SeriesDirective>
        <SeriesDirective dataSource={chartData} xName='x' yName='y2' type='StepLine' name='Japan' width={2} marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let chartData = [
    { x: new Date(1975, 0, 1), y: 16,   y1: 10,  y2: 4.5 },
    { x: new Date(1980, 0, 1), y: 12.5, y1: 7.5, y2: 5 },
    { x: new Date(1985, 0, 1), y: 19,   y1: 11,  y2: 6.5 },
    { x: new Date(1990, 0, 1), y: 14.4, y1: 7,   y2: 4.4 },
    { x: new Date(1995, 0, 1), y: 11.5, y1: 8,   y2: 5 },
    { x: new Date(2000, 0, 1), y: 14,   y1: 6,   y2: 1.5 },
    { x: new Date(2005, 0, 1), y: 10,   y1: 3.5, y2: 2.5 },
    { x: new Date(2010, 0, 1), y: 16,   y1: 7,   y2: 3.7 }
];
export let chartData: Object[] = [
    { x: new Date(1975, 0, 1), y: 16,   y1: 10,  y2: 4.5 },
    { x: new Date(1980, 0, 1), y: 12.5, y1: 7.5, y2: 5 },
    { x: new Date(1985, 0, 1), y: 19,   y1: 11,  y2: 6.5 },
    { x: new Date(1990, 0, 1), y: 14.4, y1: 7,   y2: 4.4 },
    { x: new Date(1995, 0, 1), y: 11.5, y1: 8,   y2: 5 },
    { x: new Date(2000, 0, 1), y: 14,   y1: 6,   y2: 1.5 },
    { x: new Date(2005, 0, 1), y: 10,   y1: 3.5, y2: 2.5 },
    { x: new Date(2010, 0, 1), y: 16,   y1: 7,   y2: 3.7 }
];

Split Tooltip

The split tooltip displays a separate tooltip for each series at the same data point, making it easier to compare values across multiple series. Use split to render one tooltip per series; use shared to merge all series for the current x-value into a single tooltip.

Enable the split tooltip by setting the split property to true:

const tooltip = {
    enable: true,
    split: true
};
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, LineSeries, Category, Tooltip, Legend } from '@syncfusion/ej2-react-charts';
import { vietnamData, indonesiaData, franceData, polandData, mexicoData } from './datasource.js';

function App() {
  return (
    <ChartComponent id="charts" primaryXAxis={{ valueType: 'DateTime', crosshair: { enable: true } }} primaryYAxis={{ title: 'Value' }} tooltip={{ enable: true, split: true }}>
      <Inject services={[LineSeries, Category, Tooltip, Legend]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={vietnamData} xName="x" yName="y" name="Vietnam" type="Line" marker={{ visible: true }} />
        <SeriesDirective dataSource={indonesiaData} xName="x" yName="y" name="Indonesia" type="Line" marker={{ visible: true }} />
        <SeriesDirective dataSource={franceData} xName="x" yName="y" name="France" type="Line" marker={{ visible: true }} />
        <SeriesDirective dataSource={polandData} xName="x" yName="y" name="Poland" type="Line" marker={{ visible: true }} />
        <SeriesDirective dataSource={mexicoData} xName="x" yName="y" name="Mexico" type="Line" marker={{ visible: true }} />
      </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, SeriesDirective, Inject, LineSeries, Category, Tooltip, Legend } from '@syncfusion/ej2-react-charts';
import { vietnamData, indonesiaData, franceData, polandData, mexicoData } from './datasource';

function App() {
  return (
    <ChartComponent id="charts" primaryXAxis={{ valueType: 'Category' }} legendSettings={{ visible: true }} primaryYAxis={{ title: 'Value' }} tooltip={{ enable: true, split: true }}>
      <Inject services={[LineSeries, Category, Tooltip, Legend]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={vietnamData} xName="x" yName="y" name="Vietnam" type="Line" marker={{ visible: true }} />
        <SeriesDirective dataSource={indonesiaData} xName="x" yName="y" name="Indonesia" type="Line" marker={{ visible: true }} />
        <SeriesDirective dataSource={franceData} xName="x" yName="y" name="France" type="Line" marker={{ visible: true }} />
        <SeriesDirective dataSource={polandData} xName="x" yName="y" name="Poland" type="Line" marker={{ visible: true }} />
        <SeriesDirective dataSource={mexicoData} xName="x" yName="y" name="Mexico" type="Line" marker={{ visible: true }} />
      </SeriesCollectionDirective>
    </ChartComponent>
  );
}
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let vietnamData = [
  { x: 2016, y: 7.8 },
  { x: 2017, y: 10.3 },
  { x: 2018, y: 15.5 },
  { x: 2019, y: 17.5 },
  { x: 2020, y: 19.5 },
  { x: 2021, y: 23.0 },
  { x: 2022, y: 20.0 },
  { x: 2023, y: 19.0 },
  { x: 2024, y: 22.1 }
];

export let indonesiaData = [
  { x: 2016, y: 4.8 },
  { x: 2017, y: 5.2 },
  { x: 2018, y: 6.2 },
  { x: 2019, y: 7.8 },
  { x: 2020, y: 9.3 },
  { x: 2021, y: 14.3 },
  { x: 2022, y: 15.6 },
  { x: 2023, y: 16.0 },
  { x: 2024, y: 17.0 }
];

export let franceData = [
  { x: 2016, y: 14.6 },
  { x: 2017, y: 15.5 },
  { x: 2018, y: 15.4 },
  { x: 2019, y: 14.4 },
  { x: 2020, y: 11.6 },
  { x: 2021, y: 13.9 },
  { x: 2022, y: 12.1 },
  { x: 2023, y: 10.0 },
  { x: 2024, y: 10.8 }
];

export let polandData = [
  { x: 2016, y: 8.9 },
  { x: 2017, y: 10.3 },
  { x: 2018, y: 10.8 },
  { x: 2019, y: 9.0 },
  { x: 2020, y: 7.9 },
  { x: 2021, y: 8.5 },
  { x: 2022, y: 7.4 },
  { x: 2023, y: 6.4 },
  { x: 2024, y: 7.1 }
];

export let mexicoData = [
  { x: 2016, y: 19.0 },
  { x: 2017, y: 20.0 },
  { x: 2018, y: 20.2 },
  { x: 2019, y: 18.4 },
  { x: 2020, y: 16.8 },
  { x: 2021, y: 18.5 },
  { x: 2022, y: 18.4 },
  { x: 2023, y: 16.3 },
  { x: 2024, y: 13.7 }
];
export let vietnamData: { x: number; y: number }[] = [
  { x: 2016, y: 7.8 },
  { x: 2017, y: 10.3 },
  { x: 2018, y: 15.5 },
  { x: 2019, y: 17.5 },
  { x: 2020, y: 19.5 },
  { x: 2021, y: 23.0 },
  { x: 2022, y: 20.0 },
  { x: 2023, y: 19.0 },
  { x: 2024, y: 22.1 }
];

export let indonesiaData: { x: number; y: number }[] = [
  { x: 2016, y: 4.8 },
  { x: 2017, y: 5.2 },
  { x: 2018, y: 6.2 },
  { x: 2019, y: 7.8 },
  { x: 2020, y: 9.3 },
  { x: 2021, y: 14.3 },
  { x: 2022, y: 15.6 },
  { x: 2023, y: 16.0 },
  { x: 2024, y: 17.0 }
];

export let franceData: { x: number; y: number }[] = [
  { x: 2016, y: 14.6 },
  { x: 2017, y: 15.5 },
  { x: 2018, y: 15.4 },
  { x: 2019, y: 14.4 },
  { x: 2020, y: 11.6 },
  { x: 2021, y: 13.9 },
  { x: 2022, y: 12.1 },
  { x: 2023, y: 10.0 },
  { x: 2024, y: 10.8 }
];

export let polandData: { x: number; y: number }[] = [
  { x: 2016, y: 8.9 },
  { x: 2017, y: 10.3 },
  { x: 2018, y: 10.8 },
  { x: 2019, y: 9.0 },
  { x: 2020, y: 7.9 },
  { x: 2021, y: 8.5 },
  { x: 2022, y: 7.4 },
  { x: 2023, y: 6.4 },
  { x: 2024, y: 7.1 }
];

export let mexicoData: { x: number; y: number }[] = [
  { x: 2016, y: 19.0 },
  { x: 2017, y: 20.0 },
  { x: 2018, y: 20.2 },
  { x: 2019, y: 18.4 },
  { x: 2020, y: 16.8 },
  { x: 2021, y: 18.5 },
  { x: 2022, y: 18.4 },
  { x: 2023, y: 16.3 },
  { x: 2024, y: 13.7 }
];

Follow Pointer

The follow pointer feature enables the tooltip to follow the mouse cursor or touch pointer as users interact with the chart. This provides a more dynamic and intuitive experience by keeping the tooltip close to the user’s point of interaction.

Enable this feature by setting the followPointer property to true:

const tooltip = {
    enable: true,
    followPointer: true
};
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Category, Tooltip, Legend } from '@syncfusion/ej2-react-charts';
import { vietnamData, franceData, mexicoData } from './datasource';

function App() {
  return (
    <ChartComponent id="charts" primaryXAxis={{ valueType: 'Category' }} legendSettings={{ visible: true }} primaryYAxis={{ title: 'Value' }} tooltip={{ enable: true, followPointer: true }}>
      <Inject services={[ColumnSeries, Category, Tooltip, Legend]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={vietnamData} xName="x" yName="y" name="Vietnam" type="Column" marker={{ visible: true }} />
        <SeriesDirective dataSource={franceData} xName="x" yName="y" name="France" type="Column" marker={{ visible: true }} />
        <SeriesDirective dataSource={mexicoData} xName="x" yName="y" name="Mexico" type="Column" marker={{ visible: true }} />
      </SeriesCollectionDirective>
    </ChartComponent>
  );
}
export default App;

ReactDOM.render(<App />, document.getElementById("charts"));
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Category, Tooltip, Legend } from '@syncfusion/ej2-react-charts';
import { vietnamData, franceData, mexicoData } from './datasource';

function App() {
  return (
    <ChartComponent id="charts" primaryXAxis={{ valueType: 'Category' }} legendSettings={{ visible: true }} primaryYAxis={{ title: 'Value' }} tooltip={{ enable: true, followPointer: true }}>
      <Inject services={[ColumnSeries, Category, Tooltip, Legend]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={vietnamData} xName="x" yName="y" name="Vietnam" type="Column" marker={{ visible: true }} />
        <SeriesDirective dataSource={franceData} xName="x" yName="y" name="France" type="Column" marker={{ visible: true }} />
        <SeriesDirective dataSource={mexicoData} xName="x" yName="y" name="Mexico" type="Column" marker={{ visible: true }} />
      </SeriesCollectionDirective>
    </ChartComponent>
  );
}
export default App;

ReactDOM.render(<App />, document.getElementById("charts"));
export let vietnamData = [
  { x: 2016, y: 7.8 },
  { x: 2017, y: 10.3 },
  { x: 2018, y: 15.5 },
  { x: 2019, y: 17.5 },
  { x: 2020, y: 19.5 },
  { x: 2021, y: 23.0 },
  { x: 2022, y: 20.0 },
  { x: 2023, y: 19.0 },
  { x: 2024, y: 22.1 }
];

export let indonesiaData = [
  { x: 2016, y: 4.8 },
  { x: 2017, y: 5.2 },
  { x: 2018, y: 6.2 },
  { x: 2019, y: 7.8 },
  { x: 2020, y: 9.3 },
  { x: 2021, y: 14.3 },
  { x: 2022, y: 15.6 },
  { x: 2023, y: 16.0 },
  { x: 2024, y: 17.0 }
];

export let franceData = [
  { x: 2016, y: 14.6 },
  { x: 2017, y: 15.5 },
  { x: 2018, y: 15.4 },
  { x: 2019, y: 14.4 },
  { x: 2020, y: 11.6 },
  { x: 2021, y: 13.9 },
  { x: 2022, y: 12.1 },
  { x: 2023, y: 10.0 },
  { x: 2024, y: 10.8 }
];

export let polandData = [
  { x: 2016, y: 8.9 },
  { x: 2017, y: 10.3 },
  { x: 2018, y: 10.8 },
  { x: 2019, y: 9.0 },
  { x: 2020, y: 7.9 },
  { x: 2021, y: 8.5 },
  { x: 2022, y: 7.4 },
  { x: 2023, y: 6.4 },
  { x: 2024, y: 7.1 }
];

export let mexicoData = [
  { x: 2016, y: 19.0 },
  { x: 2017, y: 20.0 },
  { x: 2018, y: 20.2 },
  { x: 2019, y: 18.4 },
  { x: 2020, y: 16.8 },
  { x: 2021, y: 18.5 },
  { x: 2022, y: 18.4 },
  { x: 2023, y: 16.3 },
  { x: 2024, y: 13.7 }
];
export let vietnamData: { x: number; y: number }[] = [
  { x: 2016, y: 7.8 },
  { x: 2017, y: 10.3 },
  { x: 2018, y: 15.5 },
  { x: 2019, y: 17.5 },
  { x: 2020, y: 19.5 },
  { x: 2021, y: 23.0 },
  { x: 2022, y: 20.0 },
  { x: 2023, y: 19.0 },
  { x: 2024, y: 22.1 }
];

export let indonesiaData: { x: number; y: number }[] = [
  { x: 2016, y: 4.8 },
  { x: 2017, y: 5.2 },
  { x: 2018, y: 6.2 },
  { x: 2019, y: 7.8 },
  { x: 2020, y: 9.3 },
  { x: 2021, y: 14.3 },
  { x: 2022, y: 15.6 },
  { x: 2023, y: 16.0 },
  { x: 2024, y: 17.0 }
];

export let franceData: { x: number; y: number }[] = [
  { x: 2016, y: 14.6 },
  { x: 2017, y: 15.5 },
  { x: 2018, y: 15.4 },
  { x: 2019, y: 14.4 },
  { x: 2020, y: 11.6 },
  { x: 2021, y: 13.9 },
  { x: 2022, y: 12.1 },
  { x: 2023, y: 10.0 },
  { x: 2024, y: 10.8 }
];

export let polandData: { x: number; y: number }[] = [
  { x: 2016, y: 8.9 },
  { x: 2017, y: 10.3 },
  { x: 2018, y: 10.8 },
  { x: 2019, y: 9.0 },
  { x: 2020, y: 7.9 },
  { x: 2021, y: 8.5 },
  { x: 2022, y: 7.4 },
  { x: 2023, y: 6.4 },
  { x: 2024, y: 7.1 }
];

export let mexicoData: { x: number; y: number }[] = [
  { x: 2016, y: 19.0 },
  { x: 2017, y: 20.0 },
  { x: 2018, y: 20.2 },
  { x: 2019, y: 18.4 },
  { x: 2020, y: 16.8 },
  { x: 2021, y: 18.5 },
  { x: 2022, y: 18.4 },
  { x: 2023, y: 16.3 },
  { x: 2024, y: 13.7 }
];

Tooltip Distance

The tooltip distance property controls the spacing between the tooltip and the mouse pointer or target data point. This prevents the tooltip from overlapping with the cursor or nearby chart elements, improving readability.

Set the distance property to specify the gap in pixels:

const tooltip = {
    enable: true,
    distance: 25
};
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Category, Tooltip, Legend } from '@syncfusion/ej2-react-charts';
import { vietnamData, polandData } from './datasource';

function App() {
  return (
    <ChartComponent id="charts" primaryXAxis={{ valueType: 'Category' }} legendSettings={{ visible: true }} primaryYAxis={{ title: 'Value' }} tooltip={{ enable: true, distance: 20 }}>
      <Inject services={[ColumnSeries, Category, Tooltip, Legend]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={vietnamData} xName="x" yName="y" name="Vietnam" type="Column" marker={{ visible: true }} />
        <SeriesDirective dataSource={polandData} xName="x" yName="y" name="Poland" type="Column" marker={{ visible: true }} />
      </SeriesCollectionDirective>
    </ChartComponent>
  );
}
export default App;

ReactDOM.render(<App />, document.getElementById("charts"));
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Category, Tooltip, Legend } from '@syncfusion/ej2-react-charts';
import { vietnamData, polandData } from './datasource';

function App() {
  return (
    <ChartComponent id="charts" primaryXAxis={{ valueType: 'Category' }} legendSettings={{ visible: true }} primaryYAxis={{ title: 'Value' }} tooltip={{ enable: true, distance: 20 }}>
      <Inject services={[ColumnSeries, Category, Tooltip, Legend]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={vietnamData} xName="x" yName="y" name="Vietnam" type="Column" marker={{ visible: true }} />
        <SeriesDirective dataSource={polandData} xName="x" yName="y" name="Poland" type="Column" marker={{ visible: true }} />
      </SeriesCollectionDirective>
    </ChartComponent>
  );
}
export default App;

ReactDOM.render(<App />, document.getElementById("charts"));
export let vietnamData = [
  { x: 2016, y: 7.8 },
  { x: 2017, y: 10.3 },
  { x: 2018, y: 15.5 },
  { x: 2019, y: 17.5 },
  { x: 2020, y: 19.5 },
  { x: 2021, y: 23.0 },
  { x: 2022, y: 20.0 },
  { x: 2023, y: 19.0 },
  { x: 2024, y: 22.1 }
];

export let indonesiaData = [
  { x: 2016, y: 4.8 },
  { x: 2017, y: 5.2 },
  { x: 2018, y: 6.2 },
  { x: 2019, y: 7.8 },
  { x: 2020, y: 9.3 },
  { x: 2021, y: 14.3 },
  { x: 2022, y: 15.6 },
  { x: 2023, y: 16.0 },
  { x: 2024, y: 17.0 }
];

export let franceData = [
  { x: 2016, y: 14.6 },
  { x: 2017, y: 15.5 },
  { x: 2018, y: 15.4 },
  { x: 2019, y: 14.4 },
  { x: 2020, y: 11.6 },
  { x: 2021, y: 13.9 },
  { x: 2022, y: 12.1 },
  { x: 2023, y: 10.0 },
  { x: 2024, y: 10.8 }
];

export let polandData = [
  { x: 2016, y: 8.9 },
  { x: 2017, y: 10.3 },
  { x: 2018, y: 10.8 },
  { x: 2019, y: 9.0 },
  { x: 2020, y: 7.9 },
  { x: 2021, y: 8.5 },
  { x: 2022, y: 7.4 },
  { x: 2023, y: 6.4 },
  { x: 2024, y: 7.1 }
];

export let mexicoData = [
  { x: 2016, y: 19.0 },
  { x: 2017, y: 20.0 },
  { x: 2018, y: 20.2 },
  { x: 2019, y: 18.4 },
  { x: 2020, y: 16.8 },
  { x: 2021, y: 18.5 },
  { x: 2022, y: 18.4 },
  { x: 2023, y: 16.3 },
  { x: 2024, y: 13.7 }
];
export let vietnamData: { x: number; y: number }[] = [
  { x: 2016, y: 7.8 },
  { x: 2017, y: 10.3 },
  { x: 2018, y: 15.5 },
  { x: 2019, y: 17.5 },
  { x: 2020, y: 19.5 },
  { x: 2021, y: 23.0 },
  { x: 2022, y: 20.0 },
  { x: 2023, y: 19.0 },
  { x: 2024, y: 22.1 }
];

export let indonesiaData: { x: number; y: number }[] = [
  { x: 2016, y: 4.8 },
  { x: 2017, y: 5.2 },
  { x: 2018, y: 6.2 },
  { x: 2019, y: 7.8 },
  { x: 2020, y: 9.3 },
  { x: 2021, y: 14.3 },
  { x: 2022, y: 15.6 },
  { x: 2023, y: 16.0 },
  { x: 2024, y: 17.0 }
];

export let franceData: { x: number; y: number }[] = [
  { x: 2016, y: 14.6 },
  { x: 2017, y: 15.5 },
  { x: 2018, y: 15.4 },
  { x: 2019, y: 14.4 },
  { x: 2020, y: 11.6 },
  { x: 2021, y: 13.9 },
  { x: 2022, y: 12.1 },
  { x: 2023, y: 10.0 },
  { x: 2024, y: 10.8 }
];

export let polandData: { x: number; y: number }[] = [
  { x: 2016, y: 8.9 },
  { x: 2017, y: 10.3 },
  { x: 2018, y: 10.8 },
  { x: 2019, y: 9.0 },
  { x: 2020, y: 7.9 },
  { x: 2021, y: 8.5 },
  { x: 2022, y: 7.4 },
  { x: 2023, y: 6.4 },
  { x: 2024, y: 7.1 }
];

export let mexicoData: { x: number; y: number }[] = [
  { x: 2016, y: 19.0 },
  { x: 2017, y: 20.0 },
  { x: 2018, y: 20.2 },
  { x: 2019, y: 18.4 },
  { x: 2020, y: 16.8 },
  { x: 2021, y: 18.5 },
  { x: 2022, y: 18.4 },
  { x: 2023, y: 16.3 },
  { x: 2024, y: 13.7 }
];

See also