Trackball tooltipSettings Format X.Value

[Rainer]

I'm working with SfCartesianChart and trying to display a Trackball with tooltipSettings allowing it to display the year point.x.

Data is in DateTime Format and some years of history. In my Tooltip only Day and Month is accessable with: 

tooltipSettings: InteractiveTooltip(

                            arrowLength: 0,

                            arrowWidth: 0,

                            enable: true,

                            color: Colors.white,

                            format: 'point.x : point.y\$')),

Can i manage to somehow get the year in the tooltip too?

[Sriram Kiran Senthilkumar]

Hi Rainer, 

  

Greetings from Syncfusion. We have analyzed on your scenario with eh provided information at our end and in order to format the tooltip content to show the month and date along with year value of the x-value, you can use the onTrackballPositionChanging callback event. Please check the code snippet below for further reference. 

SfCartesianChart( 

            onTrackballPositionChanging: (args) { 

              // Formating the x value using DateFormat to display like the below format  

             // MMM dd, YYYY (Nov 1, 2020) 

              String dateString = DateFormat 

                      .yMMMd()  

                  .format(args.chartPointInfo.chartDataPoint.x); 

              // Appended the formatted date string in the trackball tooltip’s label. 

              args.chartPointInfo.label = 

                  '$dateString : ${args.chartPointInfo.chartDataPoint.y}';  

            }, 

            primaryXAxis: DateTimeAxis(), 

            trackballBehavior: TrackballBehavior( 

              enable: true, 

              tooltipSettings: InteractiveTooltip( 

                arrowLength: 0, 

                arrowWidth: 0, 

                enable: true, 

                color: Colors.white, 

              ), 

            ), 

            series: <ChartSeries<_SalesData, DateTime>>[ 

              LineSeries<_SalesData, DateTime>( 

                dataSource: chartData, 

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

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

              ) 

            ] 

) 

 

Screenshot: 

 

  

  

The sample for reference can be found below. 

 https://www.syncfusion.com/downloads/support/forum/160342/ze/f160342_sample64319746 

  

Please check with the above sample and revert us if you still have further concerns. 

  

For further reference on onTrackballPositionChanging event, please check the user guide below. 

https://help.syncfusion.com/flutter/cartesian-charts/callbacks#ontrackballpositionchanging 

  

Regards, 

Sriram Kiran 

[Rainer]

Hi Sriram,

thank you for your fast response.

The callback event worked like a charm.

Best Regards

Rainer

[Sriram Kiran Senthilkumar]

Hi Rainer, 

  

Most welcome. Kindly revert us if you have any queries. We are always happy in assisting you.  

  

Regards, 

Sriram Kiran 

[Felipe Werlang]

Hi, I have 2 charts on the same page, one for hours and one for days. Is it possible to change the trackball title?

   firstChart ? '${trackballDetails.groupingModeInfo!.points[0].x.toString()} Hour' : 'Day ${trackballDetails.groupingModeInfo!.points[0].x.toString()}'

[Yuvaraj Gajaraj]

Hi Felipe,

We have created the sample which shows the trackball tooltip value as day or hour based on the series name. Here we have changed the trackball tooltip text based on the series name, you can get the series name from the TrackballDetails in the builder, then customize the tooltip text as required. We have also attached the code snippet and sample below for your reference. You can change this based on your scenario.

Code snippet:

_trackball = TrackballBehavior(

      enable: true,

      builder: (BuildContext context, TrackballDetails details) {

        return Container(

            padding: const EdgeInsets.all(10),

            color: Colors.black,

            child: Text(

              details.groupingModeInfo!.visibleSeriesList[0].name == 'hours'

                  ? '${details.groupingModeInfo!.points[0].x.toString()} Hour'

                  : 'Day ${details.groupingModeInfo!.points[0].x.toString()}',

              style: const TextStyle(color: Colors.white),

            ));

      },

      tooltipDisplayMode: TrackballDisplayMode.groupAllPoints,

    )

Regards,

Yuvaraj.

Attachment: f160342_19bf8797.zip