Custom title for grouped tooltip on trackball

[anna-st-40]

Use case

I have a trackball over a Cartesian chart with tooltipDisplayMode grouping all points. When all the points are grouped, an automatic heading title is added from the x-axis. However, there does not seem to be a way to customize this title.

In my case, I have a DateTimeAxis as my x-axis, and I want my tooltip to always display Month Day HH:MM AM/PM. However, I don't want my x-axis to always have that formatting. When the time range gets smaller, I would want to only display hours, whereas when the time range gets larger, I would want to only display dates.

Proposal

A way to customize the heading/title of a grouped tooltip. My use case would benefit specifically from being able to set a custom DateFormat for it independently of the x-axis.

[PreethikaSelvam]

Hi @anna-st-40,

Query 1: Tooltip should always display "Month Day HH:MM AM/PM"

To achieve your requirement, we suggest using the builder property in TrackballBehavior. Inside the builder, we extracted the x-value from groupingModeInfo.points.first.x and formatted it using DateFormat('MMM d hh:mm a').format(date). We have shared the code snippet, sample and UG documentation for your reference.

Code Snippet:

trackballBehavior: TrackballBehavior(
  enable: true,
  tooltipDisplayMode: TrackballDisplayMode.groupAllPoints,
  builder: (BuildContext context, TrackballDetails details) {
    final DateTime date = details.groupingModeInfo?.points.first.x;
    final List<String> values =
        details.groupingModeInfo!.points.map((point) {
      return '${point.y}';
    }).toList();

    return Container(
      width: 130,
      height: 130,
      padding: EdgeInsets.all(8),
      decoration: BoxDecoration(
        color: Colors.black,
        borderRadius: BorderRadius.circular(4),
        boxShadow: [BoxShadow(color: Colors.grey, blurRadius: 2)],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            DateFormat('MMM d hh:mm a').format(date),
            style: TextStyle(color: Colors.white),
          ),
          Text(
            values.join('\n'),
            style: TextStyle(color: Colors.white),
          ),
        ],
      ),
    );
  },
),

UG Link: https://help.syncfusion.com/flutter/cartesian-charts/trackball-crosshair#trackball-tooltip-template

Query 2: Display hours for a smaller range and dates for a larger range

To dynamically adjust the x-axis labels based on the selected time range, we suggest using the dateFormat and intervalType properties in the DateTimeCategoryAxis. For shorter time ranges such as 6H, 12H, and 24H, we formatted the x-axis labels using DateFormat('hh:mm a') and updated the intervalType to DateTimeIntervalType.hours, ensuring that only hours and AM/PM are displayed.

For longer time ranges such as 3D, 1W, 1M, and 6M, we formatted the x-axis labels using DateFormat('MM/dd/yyyy') and updated the intervalType to DateTimeIntervalType.days, ensuring that only the date is displayed. We have shared the code snippet, sample and UG documentation for your reference.

Code Snippet:

String _selectedRange = '1M';
final List<String> _timeRanges = ['6H', '12H', '24H', '3D', '1W', '1M', '6M'];

List<ChartData> _getFilteredData() {
  final latestDate = chartData.first.date;
  DateTime cutoffDate;
  switch (_selectedRange) {
    case '6H':
      cutoffDate = latestDate.subtract(const Duration(hours: 6));
      break;
    case '12H':
      cutoffDate = latestDate.subtract(const Duration(hours: 12));
      break;
    case '24H':
      cutoffDate = latestDate.subtract(const Duration(hours: 24));
      break;
    case '3D':
      cutoffDate = latestDate.subtract(const Duration(days: 3));
      break;
    case '1W':
      cutoffDate = latestDate.subtract(const Duration(days: 7));
      break;
    case '1M':
      cutoffDate =
          DateTime(latestDate.year, latestDate.month - 1, latestDate.day);
      break;
    case '6M':
      cutoffDate =
          DateTime(latestDate.year, latestDate.month - 6, latestDate.day);
      break;
    default:
      cutoffDate = latestDate.subtract(const Duration(days: 1));
  }
  return chartData.where((data) => data.date.isAfter(cutoffDate)).toList();
}

Widget _buildChartSection(List<ChartData> filteredData) {
  return Expanded(
    child: SfCartesianChart(
      plotAreaBorderWidth: 0,
      primaryXAxis: DateTimeCategoryAxis(
        dateFormat: _selectedRange == '6H' ||
                _selectedRange == '12H' ||
                _selectedRange == '24H'
            ? DateFormat('hh:mm a')
            : DateFormat('MM/dd/yyyy'),
        intervalType: _selectedRange == '6H' ||
                _selectedRange == '12H' ||
                _selectedRange == '24H'
            ? DateTimeIntervalType.hours
            : DateTimeIntervalType.days,
      ),

UG Links:
https://help.syncfusion.com/flutter/cartesian-charts/axis-types#date-time-intervals-1
https://help.syncfusion.com/flutter/cartesian-charts/axis-types#formatting-the-labels-2

Output:

Please let us know if you need any further assistance.

gh2320.zip

Regards,
Preethika Selvam.

[anna-st-40]

I would like to still display the series name next to the point values. How would I do that?

[PreethikaSelvam]

Hi @anna-st-40,

We have analyzed your query, and to display the series name next to the point values in trackball, we suggest using the onTrackballPositionChanging callback. Here by capturing the trackball position dynamically, we accessed the series name and point values, then formatted them into the trackball tooltip. This ensures that the series name will be displayed alongside the point values in the trackball tooltip. We have shared a code snippet, modified sample and user guide documentation for your reference.

Code Snippet:

      child: SfCartesianChart(
        trackballBehavior: TrackballBehavior(
          enable: true,
          tooltipDisplayMode: TrackballDisplayMode.groupAllPoints,
        ),
        onTrackballPositionChanging: (TrackballArgs details) {
          // Clear previously stored data on each update.
          trackballData.clear();

          // Store the details for the current trackball position.
          if (details.chartPointInfo.series != null &&
              details.chartPointInfo.chartPoint != null) {
            final String seriesName = details.chartPointInfo.series!.name;
            final DateTime date =
                details.chartPointInfo.chartPoint!.x as DateTime;
            final double yValue =
                details.chartPointInfo.chartPoint!.y as double;

            // Add this series' details to the trackballData list.
            trackballData.add({
              'seriesName': seriesName,
              'yValue': yValue,
              'date': date,
            });

            // Construct the tooltip dynamically from the stored data.
            String tooltipText =
                'Date: ${DateFormat('MMM d hh:mm a').format(date)}\n';
            String seriesText = '\n';
            for (var data in trackballData) {
              seriesText += '${data['seriesName']}: ${data['yValue']} ';
            }

            // Combine the series data into a compact format
            tooltipText += seriesText;

            // Update the trackball tooltip information
            details.chartPointInfo.label = tooltipText;
            details.chartPointInfo.header =
                DateFormat('MMM d hh:mm a').format(date);
          }
        },

Output:

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

SB Links:
https://flutter.syncfusion.com/#/cartesian-charts/user-interactions/trackball/chart-with-trackball
https://flutter.syncfusion.com/#/cartesian-charts/user-interactions/trackball/customized-trackball

Please let us know if you need any further assistance.

gh2320 (2).zip

Regards,
Preethika Selvam.

Please reopen this ticket, if you need further assistance with this.