How to format date tooltips in React Charts

You can format date and time values in a React Chart tooltip using either an inline tooltip.format string or the tooltipRender event with the Internationalization class. Use the inline approach for static, token-based formatting and the tooltipRender event for fully customized tooltip content.

To display a tooltip, set enable to true in the tooltip property and inject the Tooltip service into the chart.

Approach 1: Format a date inline with `tooltip.format`

Add a colon (:) and the required DateTime format after the point.x token in the tooltip.format property.

The point.x token represents the x-value of the hovered data point. When the x-axis uses DateTime, a DateTime format specifier can be appended directly to the token. The point.y token represents the corresponding numeric y-value.

Format a date only

const tooltip = {
    enable: true,
    format: '${point.x:MMM dd, yyyy}'
};

Format a date and the y-value together

const tooltip = {
    enable: true,
    format: '${point.x:MMM dd, yyyy} : ${point.y}'
};

Include the series name

const tooltip = {
    enable: true,
    format: '${series.name}<br>${point.x:MMM dd, yyyy} : ${point.y:n2}'
};

Numeric format specifiers such as n2 can also be appended to any numeric token.

DateTime format examples

The following DateTime formats can be used with the point.x token:

Format	Example output	Description
`MMM yyyy`	`Nov 2005`	Abbreviated month and year
`MM/yy`	`11/05`	Numeric month and two-digit year
`dd MMM`	`12 Nov`	Day and abbreviated month
`MMM dd, yyyy`	`Nov 12, 2005`	Abbreviated month, day, and year
`MMMM dd, yyyy`	`November 12, 2005`	Full month, day, and year
`yyyy-MM-dd`	`2005-11-12`	Year, month, and day

Choose a format that matches the precision and readability required by the chart.

Bind the configuration

Pass the tooltip object to the ChartComponent:

<ChartComponent
    id="charts"
    primaryXAxis={{ valueType: 'DateTime' }}
    tooltip={{
        enable: true,
        format: '${point.x:MMM dd, yyyy} : ${point.y:n2}'
    }}
>

The complete example is shown below:

index.jsx
index.tsx
datasource.jsx
datasource.tsx
import * as React from "react";
import * as ReactDOM from "react-dom/client";
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;
const root = ReactDOM.createRoot(document.getElementById('charts'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom/client";
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;
const root = ReactDOM.createRoot(document.getElementById('charts') as HTMLElement);
root.render(<App />);
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 }
];

Approach 2: Format a date with the `tooltipRender` event

Use the tooltipRender callback when the tooltip text must change according to custom runtime conditions that cannot be expressed as a static format string. The callback fires before each tooltip is rendered, and assigning to args.text overrides the default content.

Ensure that the tooltip is enabled on the <ChartComponent>. Otherwise, the tooltipRender callback will never fire.

`args` fields

The tooltipRender callback receives an args object with two relevant fields:

Field	Meaning
`args.point.x`	The x value of the hovered point. For a `DateTime` x-axis this is a JavaScript `Date` object.
`args.text`	The string the tooltip renders. Assign to this to override the default.

Format the date

Create an Internationalization instance inside the callback, pass the point’s date through formatDate, and assign the result to args.text:

const tooltipRender = (args) => {
    const intl = new Internationalization();
    const formattedString = intl.formatDate(new Date(args.point.x), { skeleton: 'yMd' });
    args.text = formattedString;
};

Bind the callback on the <ChartComponent>:

<ChartComponent id='charts'
    primaryXAxis={{ valueType: 'DateTime' }}
    tooltip={{ enable: true }}
    tooltipRender={tooltipRender}>

The complete example is shown below:

index.jsx
index.tsx
datasource.jsx
datasource.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, DateTime, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts';
import { Internationalization } from '@syncfusion/ej2-base';
import { data } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'DateTime' };
    const marker = { visible: true, height: 10, width: 10, dataLabel: { visible: true } };
    const tooltip = { enable: true };
    const tooltipRender = (args) => {
        let intl = new Internationalization();
        let formattedString = intl.formatDate(new Date(args.point.x), { skeleton: 'yMd' });
        args.text = formattedString;
    };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} title='Inflation - Consumer Price' tooltipRender={tooltipRender} tooltip={tooltip}>
      <Inject services={[LineSeries, Legend, Tooltip, DataLabel, DateTime]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' width={2} name='Germany' 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, SeriesDirective, Inject, Legend, DateTime, Tooltip, DataLabel, LineSeries, ITextRenderEventArgs, ITooltipRenderEventArgs,AxisModel,TooltipSettingsModel }from'@syncfusion/ej2-react-charts';
import { Internationalization } from '@syncfusion/ej2-base';
import { data } from './datasource';
function App() {
  const primaryxAxis: AxisModel = { valueType: 'DateTime' };
  const marker = { visible: true, height: 10, width: 10, dataLabel: { visible: true } };
  const tooltip: TooltipSettingsModel = { enable: true };
  const tooltipRender = (args: ITooltipRenderEventArgs) => {
    let intl: Internationalization = new Internationalization();
    let formattedString: string = intl.formatDate(new Date(args.point.x), { skeleton: 'yMd' });
    args.text = formattedString;
  };

    return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      title='Inflation - Consumer Price'
      tooltipRender={tooltipRender}
      tooltip={tooltip}>
      <Inject services={[LineSeries, Legend, Tooltip, DataLabel, DateTime]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' width={2} name='Germany'
          type='Line' marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let data = [
    { x: new Date(2005, 0, 1), y: 21 }, 
    { x: new Date(2006, 0, 1), y: 24 },
    { x: new Date(2007, 0, 1), y: 30 }, 
    { x: new Date(2008, 0, 1), y: 38 },
    { x: new Date(2009, 0, 1), y: 54 }, 
    { x: new Date(2010, 0, 1), y: 57 }
];
export let data: Object[] = [
    { x: new Date(2005, 0, 1), y: 21 }, 
    { x: new Date(2006, 0, 1), y: 24 },
    { x: new Date(2007, 0, 1), y: 30 }, 
    { x: new Date(2008, 0, 1), y: 38 },
    { x: new Date(2009, 0, 1), y: 54 }, 
    { x: new Date(2010, 0, 1), y: 57 }
];

When to use which approach

Use inline tooltip.format for static, token-based formatting such as ${point.x:MMM dd, yyyy} or ${point.y:n2}. It is simpler, requires no event handler, and keeps the format string next to the chart configuration.
Use the tooltipRender event when the tooltip text must change according to custom runtime conditions that a static format string cannot express - for example, conditional content based on the point’s value, custom locale handling, or building the text from multiple sources.

Search docs

Ask Syncfusion AI Assistant

Search docs

Ask Syncfusion AI Assistant

How to format date tooltips in React Charts

Approach 1: Format a date inline with `tooltip.format`

DateTime format examples

Bind the configuration

Approach 2: Format a date with the `tooltipRender` event

`args` fields

Format the date

When to use which approach

See also

How to format date tooltips in React Charts

Approach 1: Format a date inline with tooltip.format

DateTime format examples

Bind the configuration

Approach 2: Format a date with the tooltipRender event

args fields

Format the date

When to use which approach

See also

Approach 1: Format a date inline with `tooltip.format`

Approach 2: Format a date with the `tooltipRender` event

`args` fields