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.