How to manage the position of trackball content is SfCartesianChart Flutter
this is my trackball. when the control is in the middle of the screen. The trackball window hides because the size is big. How can it be fixed when the control is in center. I have also attached the images.
Hi Arnold Rafi,
We would like to inform you that the trackball tooltip hide’s when its content exceeds the available space; as a workaround, we’ve disabled the built-in tooltip and kept only the trackball line, while showing a custom overlay container driven by onTrackballPositionChanging to display the larger content without hiding. We have shared UG documentation, sample, code snippet and demo for your reference. You can modify the sample based on your needs.
UG Links:
https://help.syncfusion.com/flutter/cartesian-charts/callbacks#ontrackballpositionchanging
https://help.syncfusion.com/flutter/cartesian-charts/callbacks#oncharttouchinteractionup
Code snippet:
|
_trackballBehavior = TrackballBehavior( enable: true, activationMode: ActivationMode.longPress, tooltipSettings: const InteractiveTooltip(enable: false), markerSettings: const TrackballMarkerSettings( markerVisibility: TrackballVisibilityMode.hidden, ), lineDashArray: const <double>[5, 5], lineType: TrackballLineType.vertical, lineColor: AppC.primary, lineWidth: 1, );
@override Widget build(BuildContext context) { … SfCartesianChart( zoomPanBehavior: _zoomPanBehavior, onChartTouchInteractionUp: (_) { // Hide overlay when interaction ends _overlayData.value = null; _lastIndex = -1; }, // Update overlay data without rebuilding the chart onTrackballPositionChanging: (TrackballArgs args) { final int? idx = args.chartPointInfo.dataPointIndex; if (idx != null && idx >= 0 && idx < tradeData.length) { if (idx != _lastIndex) { _lastIndex = idx; _overlayData.value = tradeData[idx]; } } }, tooltipBehavior: _toolTipBehaviorDisabled, // Trackball line only trackballBehavior: _trackballBehavior, ),
// Custom overlay driven by ValueNotifier so it doesn't rebuild the chart ValueListenableBuilder<DailyTrade?>( valueListenable: _overlayData, builder: (context, data, _) { if (data == null) return const SizedBox.shrink(); return Positioned( top: 8, left: 0, right: 0, child: IgnorePointer( ignoring: true, // don't steal gestures from chart child: Center( child: _buildTooltipContentForWinAndLoose(data), ), ), ); }, ), |
Output:
Please let us know if you need any further assistance.
Regards,
Preethika Selvam.
Attachment: fr197865_14449b57.zip
