tooltip order not in sync with data displayed

Question

I'm using SFCartesian Chart to display a bunch of data as a bar chart and line chart.
The data I'm displaying is of measurements which will have a powerMeter reading(required, not null) and a pressure value(optional can be null). I need to display the bar graph of powerMeter values and display the tooltip of pressure either the value as 'Pressure: 12.0 PSI' or 'Pressure: N/A' depending on whether the measurement had a pressure value provided or not. However When I'm using the tooltip's builder I'm noticing a different behaviour. In the attached images you can see that the measurements all include the pressure value(in the table view). However the builder is assigning the first day's pressure to the first bar available and so on.. not the behaviour I'm looking for. Is there any other way to achieve this.

09/15 - pressure = 2.0, but tooltip displaying N/A

09/21 - pressure = 95.0, but tooltip displaying 2.0

Here is the code for builder of tooltip:

TooltipBehavior(
                            enable: true,
                            color: Theme.of(context).colorScheme.inverseSurface,
                            builder:
                                (data, point, series, pointIndex, seriesIndex) {
                              final String pressureText = data.pressure != null
                                  ? 'Pressure: ${data.pressure?.toStringAsFixed(1)}'
                                  : 'Pressure: N/A';
                              return Container(
                                decoration: BoxDecoration(
                                    color: Theme.of(context)
                                        .colorScheme
                                        .inverseSurface,
                                    borderRadius: BorderRadius.circular(4.0)),
                                padding: const EdgeInsets.all(8.0),
                                child: Text(
                                  pressureText,
                                  style: TextStyle(
                                    color: Theme.of(context)
                                        .colorScheme
                                        .onInverseSurface,
                                  ),
                                ),
                              );
                            }),

Hariharasudhan Kanagaraj · Answer

Hi Himanshu,We have prepared a sample to display the pressure values of the respective Column Segments in a tooltip using the builder property of the TooltipBehavior based on the provided code snippet. In this sample, if the pressure property in the data collection contains data, the tooltip will display the corresponding pressure value for each Column Segment and if the pressure property is null or not given, the tooltip will display the text as ‘Pressure N/A’. The tooltip is rendering properly based on the provided data points and unfortunately, we are unable to replicate the mentioned behavior from our end.Kindly refer the code snippet below: class MainApp extends StatefulWidget { const MainApp({super.key}); @override State createState() => _MainAppState(); } class _MainAppState extends State { late List _data; late TooltipBehavior _tooltipBehavior; @override void initState() { _data = [ ChartSampleData( date: DateTime(2023, 9, 15), energyUsage: 6, pressure: 2, ), ChartSampleData( date: DateTime(2023, 9, 21), energyUsage: 1, pressure: 95, ), ChartSampleData( date: DateTime(2023, 9, 24), energyUsage: 8, pressure: 120, ), ChartSampleData( date: DateTime(2023, 9, 30), energyUsage: 5, pressure: 20, ), ChartSampleData( date: DateTime(2023, 10, 02), energyUsage: 7, ), ]; _tooltipBehavior = TooltipBehavior( enable: true, color: Theme.of(context).colorScheme.inverseSurface, builder: (dynamic data, dynamic point, dynamic series, int pointIndex, int seriesIndex) { final String pressureText = data.pressure != null ? 'Pressure: ${data.pressure?.toStringAsFixed(1)}' : 'Pressure: N/A'; return Container( decoration: BoxDecoration( color: Theme.of(context).colorScheme.inverseSurface, borderRadius: BorderRadius.circular(4.0), ), padding: const EdgeInsets.all(8.0), child: Text( pressureText, style: TextStyle( color: Theme.of(context).colorScheme.onInverseSurface, ), ), ); }, ); super.initState(); } @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( body: SfCartesianChart( primaryXAxis: DateTimeAxis( dateFormat: DateFormat('MM/dd'), ), primaryYAxis: NumericAxis( interval: 1, majorGridLines: const MajorGridLines(width: 0), majorTickLines: const MajorTickLines(size: 0), axisLine: const AxisLine(width: 0), axisLabelFormatter: (axisLabelRenderArgs) { return ChartAxisLabel('', axisLabelRenderArgs.textStyle,); }, ), series: >[ ColumnSeries( dataSource: _data, xValueMapper: (ChartSampleData sales, int index) => sales.date, yValueMapper: (ChartSampleData sales, int index) => sales.energyUsage, dataLabelSettings: const DataLabelSettings( isVisible: true, ), ), ], tooltipBehavior: _tooltipBehavior, ), ), ); } } class ChartSampleData { ChartSampleData({ required this.date, required this.energyUsage, this.pressure, }); final DateTime date; final num energyUsage; final num? pressure; } Attached the recording below for your reference. However, we recommend you check and ensure the data points provided to the dataSource as the tooltip text is rendering here based on the pressure property of the data collection, and if you faced the mentioned behavior further, kindly share the sample or code snippet by modifying it according to your needs to reproduce the mentioned behavior along with any recording. With that additional information, it will be very useful for us to provide the possible solution from our end.Regards,Hari Hara Sudhan. K.Attachment: _184739_9deb3be8.zip