How to make a specific behavior to different series

[Medhiko Biraja]

So, here i have a range area series and line series and i want to make the trackball dedicated to only the range area series and tooltip dedicated to only the line series. Here's my code and what should i do with it

SfCartesianChart(

                          tooltipBehavior: TooltipBehavior(

                            enable: true,

                            builder: (dynamic data,

                                dynamic point,

                                dynamic series,

                                int pointIndex,

                                int seriesIndex) {

                              if (seriesIndex == 0) {

                                ReccomendWeightGain reccomendWeightData =

                                    controller.reccomendWeightGain[pointIndex];

                                return Container(

                                  padding: EdgeInsets.all(10),

                                  decoration: BoxDecoration(

                                    color: Colors.black87,

                                    borderRadius: BorderRadius.circular(5),

                                  ),

                                  child: Column(

                                    crossAxisAlignment:

                                        CrossAxisAlignment.start,

                                    mainAxisAlignment: MainAxisAlignment.center,

                                    mainAxisSize: MainAxisSize.min,

                                    children: [

                                      Text('Week #${reccomendWeightData.week}',

                                          style: TextStyle(color: Colors.white),

                                          textAlign: TextAlign.center),

                                      Text(

                                        "Reccomend Weight Range",

                                        style: TextStyle(color: Colors.white),

                                      ),

                                      Text(

                                        '${reccomendWeightData.reccomendWeightLower?.toStringAsFixed(1)} kg - ${reccomendWeightData.reccomendWeightUpper?.toStringAsFixed(1)} kg',

                                        style: TextStyle(color: Colors.white),

                                      ),

                                    ],

                                  ),

                                );

                              } else {

                                WeightHistory weightData =

                                    controller.weightGainHistory[pointIndex];

                                return Container(

                                  padding: EdgeInsets.all(10),

                                  decoration: BoxDecoration(

                                    color: Colors.black87,

                                    borderRadius: BorderRadius.circular(5),

                                  ),

                                  child: Column(

                                    crossAxisAlignment:

                                        CrossAxisAlignment.start,

                                    mainAxisSize: MainAxisSize.min,

                                    children: [

                                      Text(

                                        'Minggu ${weightData.mingguKehamilan}',

                                        style: TextStyle(color: Colors.white),

                                      ),

                                      SizedBox(height: 5),

                                      Text(

                                        'Tanggal: ${weightData.tanggalPencatatan.toString().substring(0, 10)}',

                                        style: TextStyle(color: Colors.white),

                                      ),

                                      SizedBox(height: 5),

                                      Text(

                                        'Berat Badan: ${weightData.beratBadan} kg',

                                        style: TextStyle(color: Colors.white),

                                      ),

                                      SizedBox(height: 5),

                                      Text(

                                        'Pertambahan Berat: ${weightData.pertambahanBerat?.toStringAsFixed(1) == null ? 0 : weightData.pertambahanBerat?.toStringAsFixed(1)} kg',

                                        style: TextStyle(color: Colors.white),

                                      ),

                                    ],

                                  ),

                                );

                              }

                            },

                          ),

                          trackballBehavior: TrackballBehavior(

                            enable: true,

                            lineType: TrackballLineType.vertical,

                            tooltipSettings: InteractiveTooltip(

                                enable: true,

                                format:

                                    '#Week point.x \n point.low - point.high kg'),

                            activationMode: ActivationMode.singleTap,

                            tooltipAlignment: ChartAlignment.center,

                          ),

                          // backgroundColor: Colors.white,

                          primaryXAxis: NumericAxis(

                            minimum: 0,

                            maximum: 41,

                            title: AxisTitle(

                              text: 'Weeks of Pregnancy',

                              textStyle: TextStyle(

                                fontSize: 12.sp,

                                color: Colors.black,

                              ),

                            ),

                            majorTickLines: MajorTickLines(size: 0),

                            majorGridLines: MajorGridLines(width: 0),

                            labelFormat: '{value}' + "",

                            labelStyle: TextStyle(

                              fontSize: 10.sp,

                              color: Colors.black,

                            ),

                            interval: 1,

                            axisLabelFormatter:

                                (AxisLabelRenderDetails details) {

                              if (details.value == 13 ||

                                  details.value == 28 ||

                                  details.value == 40) {

                                return ChartAxisLabel(

                                    details.text, details.textStyle);

                              } else {

                                return ChartAxisLabel('', details.textStyle);

                              }

                            },

                          ),

                          primaryYAxis: NumericAxis(

                            minimum: controller.reccomendWeightGain

                                .map((data) => data.reccomendWeightLower!)

                                .reduce((value, element) =>

                                    value < element ? value : element),

                            maximum: controller.reccomendWeightGain

                                    .map((data) => data.reccomendWeightUpper!)

                                    .reduce((value, element) =>

                                        value > element ? value : element) +

                                1,

                            labelStyle: TextStyle(

                              fontSize: 10.sp,

                              color: Colors.black,

                            ),

                            title: AxisTitle(

                              text: 'Weight Gain (kg)',

                              textStyle: TextStyle(

                                fontSize: 12.sp,

                                color: Colors.black,

                              ),

                            ),

                          ),

                          series: [

                            RangeAreaSeries<ReccomendWeightGain, int>(

                              dataSource: controller.reccomendWeightGain,

                              name: 'Recommended Weight Gain Range',

                              xValueMapper: (ReccomendWeightGain data, _) =>

                                  data.week!,

                              highValueMapper: (ReccomendWeightGain data, _) =>

                                  data.reccomendWeightUpper!,

                              lowValueMapper: (ReccomendWeightGain data, _) =>

                                  data.reccomendWeightLower!,

                              markerSettings: MarkerSettings(),

                              color: Color(0xFFc0d8f2),

                            ),

                            LineSeries<WeightHistory, int>(

                              dataSource: controller.weightGainHistory,

                              name: 'Actual Weight Gain',

                              xValueMapper: (WeightHistory data, _) =>

                                  data.mingguKehamilan!,

                              yValueMapper: (WeightHistory data, _) =>

                                  data.beratBadan!,

                              markerSettings: MarkerSettings(

                                isVisible: true,

                                shape: DataMarkerType.circle,

                                color: Colors.red,

                              ),

                              enableTooltip: true,

                            ),

                          ],

                        )

[Lokesh Palani]

Hi Medhiko,

Currently, we do not have support to disable the trackball for specific series in the SfCartesianChart. We have logged a feature request for enable and disable the trackball for specific series in our feedback portal, and it is uncertain. This feature will be available in one of our upcoming releases. We will notify you when this feature is implemented. We appreciate your patience until then. If you have any additional specifications or suggestions for this feature request, please feel free to leave them in the comments section of the feedback link. This will help us understand how you would like to use it and how we can improve it.

FR Link: https://www.syncfusion.com/feedback/58652 

Regards,

Lokesh P.

[Lavanya Anaimuthu]

Hi Medhiko,

We are glad to announce that our Essential Studio® 2024 Volume 4 Release v28.1.33 is rolled out and is available for download under the following link.

Essential Studio® 2024 Volume 4 Main Release v28.1.33 is available for download | Announcements Forums | Syncfusion

Please update the Charts widget to the latest version to enable or disable the trackball for specific series feature in Charts. 

https://pub.dev/packages/syncfusion_flutter_charts/versions/28.1.33

Refer ug and API documentation for more information:

API: enableTrackball property - ChartSeries class - charts library - Dart API

UG: Trackball and Crosshair in Flutter Cartesian Charts | Syncfusion

Code Snippet:

Widget build(BuildContext context) {

  return SfCartesianChart(

    trackballBehavior: TrackballBehavior(

      enable: true,

    ),

    series: <CartesianSeries<_SalesData, String>>[

      LineSeries<_SalesData, String>(

        enableTrackball: false,

      ),

    ],

   ……

  );

}

 

We will update you once we resolve the reported issue at our end. We thank you for your support and appreciate your patience while waiting for this release. Please get in touch with us if you require any further assistance.

Regards,

Lavanya A.