Unable to customize header in trackball grouped tooltip in line chart

[Jason Ong]

I am building a line chart consisting of 3 FastLineSeries with a DateTimeAxis x-axis.

I have enabled trackball behavior with tooltip display mode set to group all points. (See attached screenshot)

In the screenshot, the tooltip header is displaying the time e.g. 22: 09 (I wonder why there is a space after the colon)

I would like to customize the tooltip header to display the date and time instead. For example: 16 Apr 2020 22:09

I couldn't find a way to do it. Is this even possible?

Thanks in advance!

Jason

Attachment: Screenshot_(17_Apr_2020_5_54_07_pm)_fe576770.zip

[Sriram Kiran Senthilkumar]

  

Hi Jason, 

  

Greetings from syncfusion. We have analyzed your scenario at our end. As of now, this is the default behaviour for the trackball tooltip’s header. However, you can ignore the space after the colon by using OnTrackballPositionChanging event. Please refer the code snippet below for reference. 

 SfCartesianChart( 

             onTrackballPositionChanging: (TrackballArgs args) { 

               args.chartPointInfo.header =   

                           DateFormat('H:m').format(args.chartPointInfo.chartDataPoint.x);   

            }, 

 ) 

  

Also, you can customize the trackball tooltip header to show the header as 16 April 2020 22:09 with the code snippet below. 

 SfCartesianChart( 

             onTrackballPositionChanging: (TrackballArgs args) { 

               args.chartPointInfo.header =   

                           DateFormat(dd MMM yyyy H:m).format(args.chartPointInfo.chartDataPoint.x);   

            }, 

 ) 

  

For further reference on onTrackballPositionChanging event, please check our user guide below: 

https://help.syncfusion.com/flutter/chart/events#ontrackballpositionchanging 

  

Thanks, 

Sriram Kiran. 

[Jason Ong]

Thank you so much! It works.

There is still one remaining issue though. For some reason, there is always a space injected after the colon during tooltip rendering despite having customized the header using onTrackballPositionChanging.

Can this be fixed?

Thanks again.

Jason

[Sriram Kiran Senthilkumar]

Hi Jason, 

  

Greetings from Syncfusion. We have analyzed your scenario and we are not sure of which space you are mentioning because the space after the colon in the header part of the trackball’s tooltip is the default behaviour as mentioned earlier. So, kindly get back to us by ensuring, whether the red or green highlighted part in the below screenshot is the space which you are specifying. 

 https://www.syncfusion.com/downloads/support/forum/153432/ze/Screenshot11359750772  

  

Thanks, 

Sriram Kiran 

[Jason Ong]

Hi Sriram,

Sorry for the confusion. I was referring to the red highlighted part. It was mentioned in your earlier response that I can ignore the space after the colon by using OnTrackballPositionChanging event. Despite having customized the header using the code below, a space after the colon (in the time part) is still rendered. Actual string produced by DateFormat does not have a space after the colon. Kindly see attached updated screenshot.

SfCartesianChart( 

             onTrackballPositionChanging: (TrackballArgs args) { 

               args.chartPointInfo.header =   

                           DateFormat.yMMMd()

                  .add_jm()

                  .format(args.chartPointInfo.chartDataPoint.x);  

            }, 

            ...

 ) 

Thanks again for looking into this.

Jason

Attachment: Screenshot_20200422191403_71ab5d56.zip

[Sriram Kiran Senthilkumar]

Hi Jason, 

 

We have analyzed your scenario from the provided information and we were able to replicate the same. We will include the fix for the reported issue in our upcoming weekly patch release which is expected to be rolled out on April 28, 2020. We will update you once the release is rolled out and we appreciate your patience until then. 

  

Thanks, 

Sriram Kiran. 

[Jason Ong]

Thank you Sriram. Looking forward to the fix.

[Sriram Kiran Senthilkumar]

Hi Jason, 

  

Most welcome. We will update you once the weekly patch release rolled out.

 

Thanks,

Sriram Kiran.

[Sriram Kiran Senthilkumar]

Hi Jason, 

Thanks for your patience. The reported issue has been fixed and included in the weekly patch release. To overcome the trackball header customization with date time values, kindly upgrade the chart widget package below. 

https://pub.dev/packages/syncfusion_flutter_charts/versions/18.1.46 

Thanks, 

Sriram Kiran. 

[Jason Ong]

Hi Sriram,

Works well now. Thank you so much!

Jason

[Sriram Kiran Senthilkumar]

Hi Jason, 

 

Most welcome. Kindly revert us if you have further queries. We are always happy in assisting you. 

 

Thanks,
Sriram Kiran.