Tool tip format in React Chart component

19 Sep 20246 minutes to read

Using tooltipRender event, you can able to format the datetime value instead of rendered value.

To format the datetime value,please follow the steps below

Step 1:

By using tooltipRender event we can able to get the current point x value. Using this value to format the tooltip by using formatDate method.

The output will appear as follows,

index.jsx

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

index.tsx

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

datasource.jsx

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 }
];

datasource.tsx

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 }
];