Tooltip do not showing if have a lot of series in a chart

Hi.

I'm trying to use tooltip with my charts, but I have a little problem:

If use single tooltip I can see only a few tooltip, 7 more or less, with a charts with height 400, because more of these not stay in chart.

If I increase height of chart, I can see more tooltip.

If I use group tooltip I can see more, but always limited by height of chart.

Is possible remove this limit and make that tooltip go outside chart?

Thanks.


6 Replies

YG Yuvaraj Gajaraj Syncfusion Team May 12, 2022 02:13 PM UTC

Hi Michele,


Yes, in our chart tooltip, we have a builder property in TooltipBehavior. With the help of this, you can show the customizable widget instead of the tooltip. It will render outside the chart area if the customized widget height is greater than the chart area. We have attached the UG and code snippet for your reference to achieve your requirement.


Code snippet:

tooltipBehavior: TooltipBehavior(

    enable: true,

    builder: (data, point, series, pointIndex, seriesIndex) {

      return Container(

        padding: const EdgeInsets.all(5),

        child: Text('${point.x} : ${point.y}',

            style: TextStyle(color:  Colors.white)),

      );

    })


UG: https://help.syncfusion.com/flutter/cartesian-charts/tooltip#tooltip-template


Regards,

Yuvaraj.



MA Michele Ammendola May 12, 2022 06:41 PM UTC

Thanks.

You can write me an example that reproduce a similiar results with group tooltip?

I attach an example.

Thank you

Regards


Attachment: Simulator_Screen_Shot__iPad_Pro_(9.7inch)__20220512_at_18.39.02.png_65fe611d.zip


MA Michele Ammendola May 13, 2022 07:49 PM UTC

I wrong, I want use a trackball with groupAllPoints, but I want that I can go outside of chart. Thanks.


Regards



YG Yuvaraj Gajaraj Syncfusion Team May 15, 2022 05:09 PM UTC

Hi Michele,


Currently, we have hidden the trackball tooltip when it exceeds the height or width of the chart area, this is our current behavior it is applicable for the trackball tooltip template too. So, we suggest you have the trackball tooltip template size less than the chart area. If you have any further queries, please get back to us.


Regards,

Yuvaraj.



MA Michele Ammendola May 16, 2022 10:16 AM UTC

And is there no way to overcome this problem?

If I have many graphs asin the example shown, nothing is seen,and it isnot positive, because if I raise the height it is not good for every situation anyway.

Furthermore, the height is compared to the size of the device, and therefore on a Desktop it has a meaning that on a mobile phone is different, so if on the desktop I can see them on the mobile it is not certain,and if I have many points they may not be seen.

What can you suggest to me? There are clearly cases where we need to show a lot of dots on the screen ...
Thanks



YG Yuvaraj Gajaraj Syncfusion Team May 17, 2022 02:08 PM UTC

Hi Michele,


Currently, we don’t have support for displaying the tooltip when it exceeds the height of the chart area. However, you can achieve this by having a static container in the application either at the top/bottom of the chart or you can have the container over some part of the chart area statically and get the tooltip information from the onTrackballPositionChanging callback, then display that information in that container. We have attached the UG for the onTrackballPositionChanging callback below for your reference.


UG: https://help.syncfusion.com/flutter/cartesian-charts/callbacks#ontrackballpositionchanging


And to hide the chart tooltip in the normal case (in case you have a static tooltip as we suggested above), you can hide the tooltip by passing the empty string to the label and header as in the below code snippet. And before passing empty string, store the information from args.chartPointInfo.label and args.chartPointInfo.header in a variable for further processing.


Code snippet:

onTrackballPositionChanging: (TrackballArgs args) {

  args.chartPointInfo.label = '';

  args.chartPointInfo.header = '';

},


Regards,

Yuvaraj.


Loader.
Up arrow icon