We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Trackball widget larger than chart size

I have a stacked bar chart, with TrackballBehavior in singleTap activationMode and using TrackballDisplayMode.groupAllPoints. The chart can be small, but the trackball contents itself could be larger than the chart (mainly in height). e.g., the height of the chart is only 40 pixels, but it might be 1200 pixels wide, and the viewport itself is large.

I've checked this question, but it's not clear if there is an easier way, or how to combine the information with the width of the chart with the proper stack child position/orientation to properly show a trackball tooltip widget, and also to detect when the trackball widget is hidden.

Any ideas how this might be accomplished?

This feels like it could be a common feature needed for small/sparkline charts, where the trackball tooltip widget needs to be overlaid and appear on top of the chart, potentially expanding beyond its size. Maybe the chart itself could use a stack if an option is enabled to allow the trackball tooltip to be larger than the size of the chart?



7 Replies

LA Lavanya Anaimuthu Syncfusion Team October 12, 2022 09:05 PM

Hi KD,


Currently, we are validating your query and we will update complete details in one business day (October 13th 2022). We appreciate your patience until then.


Thanks,

Lavanya A.



LP Lokesh Palani Syncfusion Team October 13, 2022 06:48 AM

Hi KD,


Greetings from Syncfusion.


We have validated your query and we would like to you know that the trackball tooltip label will not display if the tooltip height is greater than the chart height. We cannot be able to handle the elements which goes outside of the chart area. However, you can display the required trackball information by adding the widget above chart. We have stored group of series information with the help of builder in Trackballbehavior and displayed the corresponding information in another widget while clicking on the chart series. We have prepared and attached a simple sample for your reference, please modify it based on your requirement. Please refer the following code snippet.


    trackballBehavior: TrackballBehavior(

                      builder: (context, trackballDetails) {

                      trackballName = '';

                      int index = 0;

                      TrackballGroupingModeInfo? groupingModeInfo =

                          trackballDetails.groupingModeInfo;

                      if (groupingModeInfo != null) {

                        groupingModeInfo.points.forEach((element) {

                          header = element.x.toString();

                          String seriesName = groupingModeInfo

                                  .visibleSeriesList[index].name ??

                              'Series' +

                                  groupingModeInfo.visibleSeriesIndices[index]

                                      .toString();

                          String seriesText =

                              seriesName + ': ' + element.y.toString() + '';

                          trackballName += seriesText;

                          index++;

                        });

                      }

                      SchedulerBinding.instance.addPostFrameCallback((_) {

                        setState(() {});

                      });

                      return Container();

                    },

 


ScreenShot :





Note: We have returned the empty container to hide the trackball label in chart, you can hide the trackball line by setting lineColor
color as transparent. 


Please let us know if you need any further assistance on this. 



Regards,

Lokesh Palani.


Attachment: chart_178113_4f699cac.zip


KD KD October 17, 2022 10:54 PM

Hi Lokesh, thank you for this sample. I want the trackball line to remain visible in this case.

There are three challenges with it (on web or windows platform): (1) the trackball line flashes and then disappears (appears to be caused because setState causes a rebuild of the chart widget, which resets the trackball state perhaps until the mouse moves again), (2) the widget that shows the trackball tooltip needs to change position based on which data point is "active", (3) there is no way to know when the trackball is deactivated so that the widget contents can be cleared (or the widget hidden).

I was able to solve the first two challenges by:

  • using flutter_riverpod (put the trackball tooltip into a const widget that internally updates when a riverpod state provider changes with the new values, which allows this content to be updated without having to rebuild the chart widget)
  • using align_positioned to position the X coordinate of the trackball tooltip relative to the currently active trackball data point. Use of the align_positioned widget also allows the trackball tooltip widget to expand beyond the contents of the chart widget.
I'm attaching the modified example that shows these two challenges fixed. (The example was updated so that the width of the trackball tooltip was made really wide to show how it could extend beyond the boundaries of the chart widget):



However, it appears that there is no event that is triggered when the trackball is "deactivated" (the trackball line disappears). It seems that the chart widget needs to be enhanced with a new event type that would be triggered when the trackball is first deactivated. If this event was added, then this would be easy to do. The widget does seem to know when this happens, so hopefully it would be easy to add. Please consider it in your roadmap.

Attachment: chart_178113_v2_ecfdc63c.zip


LP Lokesh Palani Syncfusion Team October 18, 2022 06:47 AM

Hi KD,


Query: There is no way to know when the trackball is deactivated so that the widget contents can be cleared (or the widget hidden).


We have validated your query and we would like to let you know that you can achieve your requirement by using onChartTouchInteractionUp callback in chart, this callback will be raised while the mouse or touch up on the chart. Trackball default hide duration is 200, so you can hide or clear the widget contents inside the timer.  Please refer the following code snippet below.


  child: SfCartesianChart(

             onChartTouchInteractionUp: (ChartTouchInteractionArgs args) {

                  Timer(const Duration(milliseconds: 200), () {

                  // You can clear/hide the tooltip label here

                });

              },

           )


Regards,

Lokesh Palani.



KD KD October 18, 2022 10:45 PM

Hi Lokesh,

On the web/desktop platform, the trackball is shown/hidden based on the mouse hover state, not on mouse click/release. The onChartTouchInteractionUp event is not called when the mouse moves off the area where the trackball is shown. I verified this by modifying the example and the onChartTouchInteractionUp event is not called at all until the mouse button is clicked and these released. Is there a different event that is called when the trackball is hidden when the mouse moves off the area where the trackball is shown?

Thanks.



LP Lokesh Palani Syncfusion Team October 20, 2022 08:57 AM

Hi KD,


Currently, we are validating your query and we will update complete details in one business day (October 21st  2022). we appreciate your patience until then.


Regards,

Lokesh Palani.



SK Sriram Kiran Senthilkumar Syncfusion Team October 23, 2022 09:44 AM

Hi KD,


Sorry for the delay.

We have validated your query and we would like to let you know that currently, we don’t have any dedicated event to identify when the trackball is getting hidden. However, your requirement regarding to identify when the trackball gets deactivated to clear the trackball widget contents can be achieved using a workaround by wrapping the SfCartesianChart widget inside MouseRegion widget whose use the onExit event can be used to clear the trackball widget contents. We have also modified your sample to achieve the sample and attached it below for reference.


Please check and get back to us if you have further concerns.


Regards,
Sriram Kiran


Attachment: chart_178113_1_74f0d15c.zip

Loader.
Live Chat Icon For mobile
Up arrow icon