Tool tip format in React Chart component
20 Jan 20236 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,
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';
function App() {
const 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 },
];
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';
function App() {
const data: any[] = [
{ 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 },
];
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"));