Trackball behavior: Builder widget with a long width would displays wrong in some points.

[Tuyen Vokhac]

In Trackball behavior, I customized a widget which its width is > 200

If we tap to the very left or very right position, the widget displays properly.

But if we tap to nearly center position, the widget is awkward, kind of UI exception ...

Could the Flutter team help me how to solve this problem ? And if I want to move the builder widget out of the gird (above), can we do that ?

Thank you,
Tuyen 

[Marismathan Gurusamy]

Hi Tuyen,

Greetings from Syncfusion. We have made few improvements in trackball rendering of SfCartesianChart in our latest version (20.1.48). The trackball tooltip will render on the right side of the trackball line if adequate space is available else will be moved to the left by default. The trackball tooltip is smartly positioned above the trackball line if there is no space on the right and left sides of the trackball line. However, the trackball tooltip size must be smaller than the chart’s plot area size. There was no problem when I checked with that latest version. I've also included a testing sample. You can use that sample to test trackball rendering and contact us if you have any queries.

Sample: https://www.syncfusion.com/downloads/support/forum/174380/ze/trackball_builder_sample-1098650424

Thanks,

Marismathan G

[Tuyen Vokhac]

Thanks Marismathan and Flutter team. I tested on latest version and it works perfectly.
You made my day !

[Yuvaraj Gajaraj]

Hi Tuyen,

Thanks for the update. We are always happy to assist you, and if you have any further queries, please get back to us.

Regards,

Yuvaraj.

[Michele Ammendola]

Hello

On the other hand, I have the problem that I need that the tooltip using the TrackballBehavoir can exceed both in height and in width the graph.

For the width it would be enough for me to make it universal for the mobile phone that if the name visible in the legend is too wide it is truncated to a maximum of characters, but for the height unfortunately it depends on how many elements I have in the graph, and I could also have many.

How do I solve this problem? To save as much space as possible, I use groupAllPoints as mode, but anyway I can't know how many points I have and if I have many, I risk that the tooltip used as trckball will not be seen, and if I use floatAllPoints instead it shows me only those that enter, and if there are too many, some are not shown, but I don't like that. 

I hope there is a solution, and if it does not exist at the moment, I hope you can consider making it possible in the near future. Thank you

[Yuvaraj Gajaraj]

Hi Michele,

We would like to let you know that if the trackball tooltip exceeds the chart area, it will be hidden by default. So, we recommend that you use TrackballDisplayMode.nearestPoint. 

UG: https://help.syncfusion.com/flutter/cartesian-charts/trackball-crosshair#label-display-mode

If you have any other queries, please get back to us.

Regards,

Yuvaraj.

[Ta Quoc Cuong]

Hello,

I want to create a tooltip using Stack View and set the position of the child container to show a tooltip like the picture below. (The tooltip is touching the vertical lines of the chart area).

But I have a problem when calculating the width of the chart to set the position of the child container.

(I've changed the background color to see the width of the tooltip and it was not as I expected)

Here is my code

Can the Dev team give me a parameter to get that value or show me anyway so I could get that?

Thanks,
Cuong

[Sriram Kiran Senthilkumar]

Hi Tuyen.

We are validating your query at our end, and we will update further details in one business day. We appreciate your patience until then.

Regards,

Sriram Kiran

[Sriram Kiran Senthilkumar]

Hi Ta Quoc Cuong,

Greetings from Syncfusion.

We have checked your query at our end, and we would like to let you know that we can calculate the width of the chart’s plot area with the help of onActualRangeChanged callback, pointToPixel() public method and addPostFrameCallback method of SchedulerBinding mixin. 

We have created a simple sample in which we have calculated the chart’s plot area width using the min and max x-axis values from onActualRangeChanged and converted the x-axis min and max point values to pixel values using the pointToPixel() method in the addPostFrameCallback method.  Then, by subtracting the calculated max point’s x offset value with the min point’s x offset value to calculate the chart’s plot area width. We have also attached the sample below for reference. Please check and get back to us if you require further assistance.

Regards,

Sriram Kiran

Attachment: f174380_1378639f.zip

[Ta Quoc Cuong]

Dear Syncfusion Team,

Thank you for your answer, I tried with your sample and it worked perfectly.

Regards,

Ta Quoc Cuong

[Sriram Kiran Senthilkumar]

Hi Ta Quoc Cuong,

Most welcome. Kindly get back to us if you have further queries. We are always happy to assist you.

Note: If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Regards,

Sriram Kiran