Tooltip on realtime chart

[Patrick Schmidt]

Hey,
I am trying to use the SfCartesianChart for a temperature plot of different sensors that are updated every second.
To make it easier for the user to see the reading of each sensor, I want to use the tooltip/TrackballBehavior. 

The problem is that the Tooltip disappereas as soon as any of my N line-series rerenders.

I am making use of the ChartSeriesController to update the line series but even in that case the tooltip just disappears.

In the forum I found a similar posting, but sadly the proposed solution does not work for me, as it will cause a constant "glitching" of the tooltip (See initial recording in the zip).

However, to me it seems like the example solution is not working anymore as I am only able to get it working while using a postFrameCallback, which will still result in glitching (See 2nd recording).

My entire sample code (Even if its not RT data...):

class _MyAppState extends State<_MyApp> {
  List<ChartData>? chartData;
  List<ChartData>? otherChartData;

  ChartSeriesController? _chartSeriesController;
  ChartSeriesController? _otherChartSeriesController;

  int? index;

  Offset? offset;

  late TrackballBehavior _trackballBehavior;

  @override
  void initState() {
    super.initState();
    chartData = <ChartData>[
      ChartData(0, 42),
      ChartData(1, 47),
      ChartData(2, 33),
      ChartData(3, 49),
      ChartData(4, 54),
      ChartData(5, 41),
      ChartData(6, 58),
      ChartData(7, 51),
      ChartData(8, 98),
      ChartData(9, 41),
      ChartData(10, 53),
      ChartData(11, 72),
      ChartData(12, 86),
      ChartData(13, 52),
      ChartData(14, 94),
      ChartData(15, 92),
      ChartData(16, 86),
      ChartData(17, 72),
      ChartData(18, 94),
    ];
    otherChartData = [
      ChartData(0, 32),
      ChartData(1, 37),
      ChartData(2, 23),
      ChartData(3, 39),
      ChartData(4, 44),
      ChartData(5, 31),
      ChartData(6, 48),
      ChartData(7, 41),
      ChartData(8, 78),
      ChartData(9, 31),
      ChartData(10, 43),
      ChartData(11, 62),
      ChartData(12, 76),
      ChartData(13, 42),
      ChartData(14, 84),
      ChartData(15, 82),
      ChartData(16, 76),
      ChartData(17, 62),
      ChartData(18, 84),
    ];

    _trackballBehavior = TrackballBehavior(
      enable: true,
      shouldAlwaysShow: true,
      activationMode: ActivationMode.singleTap,
    );

      }

  void _addDataSource() {
    chartData!.add(
      ChartData(
        chartData!.length,
        getRandomInt(10, 100),
      ),
    );
    otherChartData!.add(
      ChartData(
        otherChartData!.length,
        getRandomInt(10, 100),
      ),
    );

    _chartSeriesController?.updateDataSource(
      addedDataIndex: chartData!.length - 1,
    );

    _otherChartSeriesController?.updateDataSource(
      addedDataIndex: otherChartData!.length - 1,
    );

    if (index != null) {
      WidgetsBinding.instance!.addPostFrameCallback((_) {
        _trackballBehavior.showByIndex(index!);
      });
    }
  }

  void _removeDataSource() {
    chartData!.removeAt(chartData!.length - 1);
    otherChartData!.removeAt(otherChartData!.length - 1);


    _chartSeriesController?.updateDataSource(
      removedDataIndex: chartData!.length,
    );
    _otherChartSeriesController?.updateDataSource(
      removedDataIndex: otherChartData!.length,
    );

    if (index != null) {
      _trackballBehavior.showByIndex(index!);
    }
  }

  int getRandomInt(int min, int max) {
    final random = Random();

    return min + random.nextInt(max - min);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Stack(
          children: [
            SfCartesianChart(
              onTrackballPositionChanging: (TrackballArgs trackballArgs) {
                index = trackballArgs.chartPointInfo.dataPointIndex;
              },
              primaryXAxis: NumericAxis(),
              primaryYAxis: NumericAxis(),
              series: <LineSeries<ChartData, int>>[
                LineSeries<ChartData, int>(
                  onRendererCreated: (ChartSeriesController controller) {
                    _chartSeriesController = controller;
                  },
                  dataSource: chartData!,
                  color: Colors.green,
                  xValueMapper: (ChartData sales, _) => sales.country,
                  yValueMapper: (ChartData sales, _) => sales.sales,
                  animationDuration: 0,
                ),
                LineSeries<ChartData, int>(
                  onRendererCreated: (ChartSeriesController controller) {
                    _otherChartSeriesController = controller;
                  },
                  dataSource: otherChartData!,
                  color: Colors.orange,
                  xValueMapper: (ChartData sales, _) => sales.country,
                  yValueMapper: (ChartData sales, _) => sales.sales,
                  animationDuration: 0,
                ),
              ],
              trackballBehavior: _trackballBehavior,
            ),
            Align(
              alignment: Alignment.bottomRight,
              child: Padding(
                padding: const EdgeInsets.all(10.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: [
                    FloatingActionButton.small(
                      onPressed: _addDataSource,
                      child: const Icon(Icons.add),
                    ),
                    const SizedBox(width: 10),
                    FloatingActionButton.small(
                      onPressed: _removeDataSource,
                      child: const Icon(Icons.remove),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    chartData!.clear();
    otherChartData!.clear();

    _chartSeriesController = null;
    _otherChartSeriesController = null;

    super.dispose();
  }
}

Attachment: Archiv_40da3b0f.zip

[Preethika Selvam]

Hi Patrick,

We have analyzed your query and found that the flickering of the trackball label happens because in your code the showByIndex method uses a addPostFrameCallback to display the trackball after the chart is completely built. This process temporarily removes and re-adds the trackball for every data point updating in charts, which causes the flicker. According to your code snippet and current implementation this is expected behavior. 

Please get back to us if you need further assistance on this.

Regards,

Preethika Selvam.

[Patrick Schmidt]

Hey,
thanks for getting back to me.
Sadly this does not solve the issue as using the showByIndex method directly will cause the tooltip to disappear. 

[Preethika Selvam]

Hi Patrick,

According to our current implementation, the trackball is removed when adding or removing data points in the chart. To display trackball even during these operations, the addPostFrameCallback can be applied to the showByIndex method. However, as mentioned in our previous update, this will result in the flickering of the trackball label. This flickering occurs because the trackball is removed and re-added for every data point update in the chart. This is a current behavior. As the demand for this feature is low, we do not have plans to implement it at this time.

Please let us know if you need any further assistance.

Regards,

Preethika Selvam.

[Patrick Schmidt]

So, you're saying that if I want to use Syncfusion for real-time data, I cannot use the tooltip feature because it gets removed every time a new point is added?

[Preethika Selvam]

Hi Patrick,

We understand your requirements, and as mentioned in our previous update, the trackball is removed when adding or removing data points in the chart. To display the trackball during these operations, the addPostFrameCallback can be applied to the showByIndex method. However, this may result in the flickering of the trackball label. We have taken your case into consideration, we will improve the features while implementing the below feature.

FR link:  https://www.syncfusion.com/feedback/51860/provide-support-to-update-the-tooltip-position-when-the-data-is-updated-in-real

We will prioritize the features of every release based on demand and priority. So, this improvement will be available in any of our upcoming releases. You can also track the status of these features with the feedback links shared above.

Regards,
Preethika Selvam.

[qy wu]

I've encountered the same issue as well, and for real-time charts, this is a significant drawback

[Praveen Balu]

Hi All,

As per the previous update, we have already considered your request as a feature improvement and have recorded it on our feedback portal. We will prioritize the features of every release based on demand and priority. For updates regarding this feature, we recommend monitoring the feedback report linked below. We will share updates in the comment section of the feedback report once the feature has been implemented and released.

The earlier link not directing correctly. Please find the correct feedback link below FR. Link: Provide support to update the tooltip position when the data is updated in real-time in Flutter | Feedback Portal

Regards,

Praveen Balu.