ToolTip Display Format

Question

I have the following data format and on the chart X axis the display Label is for Month name and year ('MMM/yy') but for the tooltop I would want to display the to be in "hh:mm". The default example on getting the X data is ${point.x} which gives the data as per the labelFormat.How do I achieve that ? Thank you.[{"datetime":"2017-04-13T09:07:00+08:00","temperature":87 }, {"datetime":"2017-04-13T10:07:00+08:00","temperature":87 }] primaryXAxis: {
            valueType: 'DatetTime',
            labelFormat: 'MMM/yy'
        },

Dharanidharan Dharmasivam · Answer

Hi Albert,

Thanks for using our products.

We have analyzed your query. Your requirement can be achieve by using tooltipRender event. This event will be triggered before rendering the tooltip, so we can able to customize the tooltip text in this. Kindy find the code snippet below to achieve this requirement.

Angular:

//Required module for tooltip render event. Note that, in the provided sample, we have referred all the chart modules, you can import the required modules alone

import { ITooltipRenderEventArgs } from '@syncfusion/ej2-ng-charts';

//Required module for formatting the values

import { Internationalization } from '@syncfusion/ej2-base';

public tooltipRender(args: ITooltipRenderEventArgs): void {

let intl: Internationalization = new Internationalization();

let formattedString: string = intl.formatDate(new Date(args.point.x), { skeleton: 'Hm' });

args.textCollections = formattedString;

};

Html file:

<ej-chart id= 'chartcontainer' (tooltipRender) = "tooltipRender($event)" >

< /ej-chart>

Here in the tooltip render event, we have formatted the date time format to hours and minutes(Hm), you can change this with respect to your requirement. For more information on formatting datetime values, kindly follow the help document.

Screenshot:

Sample for reference can be find from below plunker link.

http://plnkr.co/edit/ciWstmrS4UK9wsYd6Zlf?p=preview

Kindly revert us, if you have any concerns.

Thanks,

Dharani.

Dharanidharan Dharmasivam · Answer

Hi Albert,

Thanks for using our products.

We have analyzed your query. Your requirement can be achieve by using tooltipRender event. This event will be triggered before rendering the tooltip, so we can able to customize the tooltip text in this. Kindy find the code snippet below to achieve this requirement.

Angular:

//Required module for tooltip render event. Note that, in the provided sample, we have referred all the chart modules, you can import the required modules alone

import { ITooltipRenderEventArgs } from '@syncfusion/ej2-ng-charts';

//Required module for formatting the values

import { Internationalization } from '@syncfusion/ej2-base';

public tooltipRender(args: ITooltipRenderEventArgs): void {

let intl: Internationalization = new Internationalization();

let formattedString: string = intl.formatDate(new Date(args.point.x), { skeleton: 'Hm' });

args.textCollections = formattedString;

};

Html file:

<ej-chart id= 'chartcontainer' (tooltipRender) = "tooltipRender($event)" >

< /ej-chart>

Here in the tooltip render event, we have formatted the date time format to hours and minutes(Hm), you can change this with respect to your requirement. For more information on formatting datetime values, kindly follow the help document.

Screenshot:

Sample for reference can be find from below plunker link.

http://plnkr.co/edit/ciWstmrS4UK9wsYd6Zlf?p=preview

Kindly revert us, if you have any concerns.

Thanks,

Dharani.

Albert K · Answer

Thank you for the solution. I have made some changes and it appear to be a bug in the formatting, when the time ends with "00" then only one zero is displayed. Please confirm. Thank you again.

public tooltipRender(args: ITooltipRenderEventArgs): void {

let intl:Internationalization = new Internationalization();

let formattedString: string = intl.formatDate(new Date(args.point.x), { format: 'E d MMM h:m a' });

args.textCollections= formattedString;

};

Dharanidharan Dharmasivam · Answer

Hi Albert, 

Thanks for the update. 

Your requirement can be achieved by specifying format as “E d MMM hh:mm a”. So that, hours and minutes will be displayed in two digits.  Kindly find the modified sample from below link. 

http://plnkr.co/edit/dhmEnOvSmCy78btO8pQg?p=preview  

Screenshot: 
  

Thanks, 
Dharani.