Customise tooltip Width or Position in Syncfusion Graph Flutter
We've integrated Syncfusion Charts into our Flutter app. When users click on plotted points on the graph, tooltips display. However, the text within these tooltips is often too long, causing it to be cut off or difficult to read.
Is there a way to customize the tooltip width or adjust its position to resolve this issue effectively?
Hi AS TFOCO,
We have analyzed your query and were able to reproduce the issue when longer text is provided for the tooltip using the format property in the TooltipBehavior, this is because the tooltip was not rendered within the Plot Area. To overcome this issue, we suggest that you use the builder property in the TooltipBehavior. By using this, you can display the tooltip content within the Plot Area. We have shared a user guide documentation link for your reference.
UG Link: https://help.syncfusion.com/flutter/cartesian-charts/tooltip#tooltip-template
Furthermore, we encountered a similar issue when providing a longer x value. To resolve this issue and to ensure a default tooltip UI, we have designed a builder tooltip widget that resembles the default tooltip. We created a custom renderer for the series to restrict the tooltip width and to get the tooltip marker color. Below, we have shared a code snippet, output screenshot and sample for your reference.
Code Snippet:
body: SfCartesianChart( primaryXAxis: const CategoryAxis( labelIntersectAction: AxisLabelIntersectAction.trim, ), tooltipBehavior: TooltipBehavior( enable: true, builder: (dynamic data, ChartPoint point, ChartSeries series, int pointIndex, int seriesIndex) { final ThemeData themeData = Theme.of(context); final TextStyle textStyle = themeData.textTheme.bodySmall!.copyWith( color: themeData.colorScheme.onInverseSurface, ); final TextStyle headerStyle = textStyle.copyWith(fontWeight: FontWeight.bold); const String header = "Robeco Sustainable Global Equities focus Fundamental (Global Stars)"; final Size headerSize = measureText(header, headerStyle); final String text = '${point.x} : ${point.y}'; final Size textSize = measureText(text, textStyle); const EdgeInsets tooltipInnerPadding = EdgeInsets.all(6); const EdgeInsets tooltipMarkerPadding = EdgeInsets.all(2.0); const double tooltipMarkerSize = 10.0; const EdgeInsetsDirectional tooltipItemSpacing = EdgeInsetsDirectional.only(end: 3.0);
double headerAlignedSize = max(headerSize.width, textSize.width); double dividerWidth = headerAlignedSize; if (headerAlignedSize >= _seriesSize.width) { headerAlignedSize = _seriesSize.width - tooltipInnerPadding.horizontal; dividerWidth = headerAlignedSize; } else { dividerWidth += tooltipMarkerSize + tooltipMarkerPadding.horizontal; }
dividerWidth = min(dividerWidth, _seriesSize.width); final double xTextSize = dividerWidth - tooltipMarkerSize - tooltipItemSpacing.horizontal - tooltipMarkerPadding.horizontal - tooltipInnerPadding.horizontal - measureText(' : ${point.y}', textStyle).width;
final bool hasHeader = header.isNotEmpty; Widget tooltip = Column( mainAxisSize: MainAxisSize.min, children: <Widget>[ if (hasHeader) SizedBox( width: headerAlignedSize, child: Center(child: Text(header, style: headerStyle)), ), if (hasHeader) SizedBox( width: dividerWidth, child: Divider( height: 10.0, thickness: 0.5, color: themeData.colorScheme.onInverseSurface, ), ), if (text.isNotEmpty) Row( mainAxisSize: MainAxisSize.min, children: <Widget>[ Padding( padding: tooltipItemSpacing, child: Container( padding: tooltipMarkerPadding, width: tooltipMarkerSize, height: tooltipMarkerSize, decoration: BoxDecoration( shape: BoxShape.circle, color: _seriesColor, border: Border.all( color: Colors.white, width: 1.0, ), ), ), ), SizedBox( width: xTextSize, child: RichText( overflow: TextOverflow.ellipsis, text: TextSpan(text: '${point.x}', style: textStyle), ), ), Text(' : ${point.y}', style: textStyle), ], ), ], );
return Padding( padding: tooltipInnerPadding, child: tooltip, ); }, ), series: [ BubbleSeries<ChartData, String>( xValueMapper: (ChartData data, int index) => data.x, yValueMapper: (ChartData data, int index) => data.y, dataSource: _chartData, onCreateRenderer: (series) { return _BubbleSeriesRenderer(this); }, ), ], ), ), ); } }
class _BubbleSeriesRenderer extends BubbleSeriesRenderer<ChartData, String> { _BubbleSeriesRenderer(this._state);
final _WorkaroundSampleState _state;
@override void customizeSegment(ChartSegment segment) { super.customizeSegment(segment); _state._seriesColor = segment.fillPaint.color; }
@override void performLayout() { super.performLayout(); _state._seriesSize = size; } } |
Output Screenshot:
Please let us know if you need any further assistance.
Regards,
Preethika Selvam.
Attachment: bd607231_daddba43.zip
