1. Home
  2. Forum
  3. Flutter
  4. How to create the tooltip that is bigger than the widget itself and shows the data in that particular hour?

How to create the tooltip that is bigger than the widget itself and shows the data in that particular hour?

I have this bar where the x axis represents time and each bar represents an hour, the y axis represents an integer, how can I align the bars in such a way that they span across each hour and how can I create this tooltip where it shows the list of individuals associated in that hour and the tooltip size is bigger than the container which has the sfcartesianchart?

It would be really helpful if you can provide the flutter code.

Thanks,

Waiting for you response.


7 Replies
YG Yuvaraj Gajaraj Syncfusion Team February 2, 2022 03:35 PM UTC

Hi Shikhar, 
 
Greetings from Syncfusion. Using the builder property in tooltipBehavior, you can render a custom widget based on your requirement. However, if the tooltip width exceeds the chart area, the tooltip widget will get wrap. We have also added a UG and online demo sample below for your reference. 
 
 
Regards, 
Yuvaraj. 


SC SHIKHAR CHAUDHARY February 7, 2022 06:44 AM UTC

Then can we use flutter overlay to create this, if yes then how can we determine the position of each column? Please help.


YG Yuvaraj Gajaraj Syncfusion Team February 8, 2022 04:07 PM UTC

Hi Shikhar, 
 
We have created a sample to render a customer widget on the chart to display the tooltip based on the tapped data point. Using the pointToPixel public method we can get the tapped data point's pixel position and by using this pixel value you can render a custom widget with the help of Positioned widget. We have attached the sample below for your reference. 
 
 
  
If you have any further query, please get back to us. 
 
Regards, 
Yuvaraj.

SC SHIKHAR CHAUDHARY February 11, 2022 07:36 AM UTC

Can we get the absolute width of the columns?


YG Yuvaraj Gajaraj Syncfusion Team February 14, 2022 06:12 PM UTC

Hi Shikhar, 
 
We have analyzed your query and we suggest you use the onCreateRenderer callback of column series, using this you can override the rendering of the column series. Here you can get the common width of all the column segments from the argument series, or you can get the top, bottom, left, and right value of each column segment. The code snippet to accomplish this can be found below. 
 
Code snippet:  
SfCartesianChart( 
  series: <ColumnSeries<ChartData, int>>[ 
    ColumnSeries<ChartData, int>( 
      // Other required properties 
      onCreateRenderer: (ChartSeries<ChartData, int> series) { 
        return _CustomColumnSeriesRenderer( 
          series as ColumnSeries<ChartData, int>); 
      }), 
   ], 
) 
 
class _CustomColumnSeriesRenderer extends ColumnSeriesRenderer { 
  _CustomColumnSeriesRenderer(this.series); 
 
  final ColumnSeries<ChartData, int> series; 
  @override 
  ChartSegment createSegment() { 
    return _ColumnCustomPainter(series); 
  } 
} 
 
class _ColumnCustomPainter extends ColumnSegment { 
  _ColumnCustomPainter(this.series); 
  // Get the width by accessing series.width 
  final ColumnSeries<ChartData, int> series; 
 
  @override 
  // Get the column segment top, bottom, left, and right 
  RRect get segmentRect => super.segmentRect; 
} 
 
 
Regards, 
Yuvaraj. 


SC SHIKHAR CHAUDHARY February 18, 2022 09:39 PM UTC

Thank you for the help. :)


YG Yuvaraj Gajaraj Syncfusion Team February 21, 2022 01:37 PM UTC

Hi Shikhar, 
 
Most welcome. If you have any further query, please get back to us. We will always happy in assisting you. 
 
Regards, 
Yuvaraj. 


Loader.
Up arrow icon