different format for axis & trackball

[Jose Simoes]

Hi!

I've got a line chart with a DateTime axis (primaryX) and several series.

I would like to format my axis labels to show only the date, so I set the label format » labelFormat: 'yyyy-MM-dd'.

I have also defined a trackball, in which I would like to show the full DateTime: 'yyyy-MM-dd hh:mm'

What I have so far for the trackball is:

tooltip: { enable: true, shared: true, format: '${series.name}: ${point.y}' },
crosshair: { enable: true, lineType: 'Vertical' }

I'm only getting the date part, without the time info.

How can I achieve this ?

Thanks

[Baby Palanidurai]

Hi Jose Simoes, 

Thanks for using syncfusion products, 

We have analyzed your query.  Your requirement can be achieved by using tooltipRender event. In that event, you can customize the tooltip values. To customize date time format in the tooltip event, you should import Internationalization from base packages. Using Internationlization, we can customize the datetime values. For more information on Internationlization, you can find from below link, 

http://npmci.syncfusion.com/development/documentation/base/intl.html?lang=typescript#supported-format-string 

Please find the code snippet below to achieve this requirement. 

HTML 

<ejs-chart (tooltipRender)='tooltipRender($event)' > 

// 

</ejs-chart> 

TS 

public tooltipRender(args: ITooltipRenderEventArgs): void { 

        let intl: Internationalization = new Internationalization(); 

        let dFormatter: Function = intl.getDateFormat({ skeleton: 'medium', type: 'dateTime' }); 

        let formattedString: string = dFormatter(new Date((args.point.x).toString()); 

        args.text = args.text.replace(/<b>[\s\S]*?<\/b>/, '<b>' +formattedString + '</b>');; 

    }; 

Screenshot: 

 

Sample for your reference can be find from below link, 

http://plnkr.co/edit/6XFhhpxYxxoNtJ8qL7bK?p=preview 

Kindly revert us, if you have any concerns. 

Thanks, 

Baby.