Chart Tooltip

[nimue]

Hi,

I have formatted the Xaxis datetime values in such a way that only the month and day are visible (LabelFormat ("MMMd")) rather than the entire date retrieved from the database; 

but now also the tooltip reports only month and day, while I would need to show the whole date including the time.

How can I do?

Thanks in advance for your help.

Barbara Inzitari

[Dharanidharan Dharmasivam]

Hi Inzitari, 

 

Greetings from Syncfusion. 

 

We have analyzed your query. By default, the format specified for axis labels will be considered for tooltip also and this our default behavior. However, you can customize the tooltip text using the tooltipRender event. Here you can customize the text with respect to your requirement. We have prepared a sample in which we have formatted the date value as depicted below. 

 

[ChartFeatures.cshtml] 

 

<ejs-chart tooltipRender="tooltip"> 

</ejs-chart> 

 

function tooltip(args) { 

        var intl = new ej.base.Internationalization(); 

        //Formatted the text here, you can change this with respect to your scenario 

        var formattedString = intl.formatDate(new Date(args.point.x), { skeleton: 'Ehms' }); 

        //Assigned the formatted string to text property 

        args.text = formattedString; 

    } 

 

 

Screenshot: 

 

Sample for reference can be find from below. 

http://www.syncfusion.com/downloads/support/forum/139951/ze/chartSample291219775  

 

Thanks, 

Dharani. 

[nimue]

Hi Dharani,

Thanks for the answer now I understand how to format the date in the tooltip,

However I would need to display the date this way month day and time( sep. 20 12:46), but since several days I can no longer access the skeleton properties page, this is the link:

https://ej2.syncfusion.com/documentation/base/intl.html?lang=typescript#supported-format-string

I always mistake 404.

Where else can I find information on the properties of the skeleton that allow me to format the date in the ways that I need from time to time?

Thank you so much for your help

Barbara Inzitari.

[Dharanidharan Dharmasivam]

Hi Inzitari, 

 

We have analyzed your requirement. You can use the format property in the tooltipRender event to achieve your scenario. And you can find information on the skeleton properties from below link. 

 

https://ej2.syncfusion.com/documentation/common/intl.html?lang=typescript#supported-format-string  

 

Find the code snippet to achieve this requirement.  

 

[ChartFeatures.cshtml] 

 

@Html.EJS().Chart("container").TooltipRender("tooltip").Render() 

 

function tooltip(args) { 

        var intl = new ej.base.Internationalization(); 

        var formattedString = intl.formatDate(new Date(args.point.x), { format: 'MMM. dd hh:mm' }); 

        args.text = formattedString; 

    } 

 

 

Screenshot: 

 

 

Sample for reference can be find from below 

http://www.syncfusion.com/downloads/support/forum/139951/ze/chartSample1140687118  

 

Thanks, 

Dharani. 

[nimue]

Hi Dharani,

Thank you very much for your help and for sending me the correct link to the properties of the skeleton.

Barbara Inzitari.

[Dharanidharan Dharmasivam]

Hi Inzitari,  

   

Most welcome. Kindly get in touch with us, if you would require further assistance. 

   

Thanks,   

Dharani.