Flutter - How to get Mutliple tooltips on SPLine Chart?

Question

Is there any way we can show multiple tooltips on a single line series chart via a syncfusion spline chart? I am attaching the expected output like how I want and what I am getting.

Below is my code snippet.

SfCartesianChart(
      plotAreaBorderWidth: 0,
      title: const ChartTitle(text: ''),
      primaryXAxis: const CategoryAxis(
        majorGridLines: MajorGridLines(width: 0),
      ),
      primaryYAxis: const NumericAxis(
        majorGridLines:
            MajorGridLines(width: 1, color: BaseColors.lightGreyColor),
        opposedPosition: true,
        maximum: 100,
        maximumLabels: 4,
        labelFormat: '{value}%',
        axisLine: AxisLine(width: 1),
      ),
      series: _getDefaultSplineSeries(chartData),
      tooltipBehavior: TooltipBehavior(enable: true),
    );
  }

  List<SplineSeries<ChartData, String>> _getDefaultSplineSeries(
      List<ChartData> chartData) {
    return <SplineSeries<ChartData, String>>[
      SplineSeries<ChartData, String>(
        dataSource: chartData,
        xValueMapper: (ChartData sales, _) => sales.x,
        yValueMapper: (ChartData sales, _) => sales.y,
        markerSettings: const MarkerSettings(isVisible: true),
        color: BaseColors.primaryBlueColor,
        name: 'High',
      ),
    ];
  }

I want the above output.

Answer 1

You can achieve your requirement by using annotations in the SfCartesianChart. By using annotations, you can display multiple widgets in the Plot Area. You can get the tapped details by using the onPointTap callback in the SplineSeries. This will allow you to store the tapped point's index x and y from the ChartPointDetails arguments. Then, you can use the tapped point indexes for x and y in the CartesianChartAnnotation to display a widget. You can also adjust the alignment using the horizontalAlignment and verticalAlignment of CartesianChartAnnotation. We have provided a code snippet, screen recording, sample, and user guide documentation link for your reference. You can modify the sample based on your needs.

UG Link,

https://help.syncfusion.com/flutter/cartesian-charts/annotations#positioning-the-annotation

https://help.syncfusion.com/flutter/cartesian-charts/annotations#alignment-of-annotation

Code Snippet:

SfCartesianChart(

        annotations: _buildAnnotations(),

        primaryXAxis: CategoryAxis(),

        primaryYAxis: NumericAxis(),

        series: <CartesianSeries<ChartSampleData, String>>[

          SplineSeries<ChartSampleData, String>(

            dataSource: data,

            xValueMapper: (ChartSampleData sales, _) => sales.year,

            yValueMapper: (ChartSampleData sales, _) => sales.sales,

            markerSettings: const MarkerSettings(

              isVisible: true,

            ),

            onPointTap: (ChartPointDetails details) {

              setState(() {

                if (positions.length < 5) {

                  positions.add({

                    'x': details.dataPoints![details.pointIndex!].x,

                    'y': details.dataPoints![details.pointIndex!].y,

                  });

                }

              });

            },

          ),

        ],

      ),

List<CartesianChartAnnotation> _buildAnnotations() {

    List<CartesianChartAnnotation> annotations = [];

    for (int i = 0; i < positions.length; i++) {

      annotations.add(

        CartesianChartAnnotation(

          region: AnnotationRegion.plotArea,

          widget: const Icon(

            Icons.circle_rounded,

            size: 40,

            color: Colors.green,

          ),

          coordinateUnit: CoordinateUnit.point,

          x: positions[i]['x'],

          y: positions[i]['y'],

        ),

      );

    }

    return annotations;

  }