Question: How to create this chart

[BroonDev]

How can I make the tooltip identify bar and line grouping data? Instead of selecting one piece of data at a time.

const teste = [{
'index': 0,
'year': 'Abr/23',
'type': 'type1',
'value': 12.33,
'average': 17.58
},
{
'index': 1,
'year': 'Maio/23',
'type': 'type1',
'value': 12.33,
'average': 17.82
},
{
'index': 0,
'year': 'Abr/23',
'type': 'type2',
'value': 27.28,
'average': 17.58
},
{
'index': 1,
'year': 'Maio/23',
'type': 'type2',
'value': 27.76,
'average': 17.82
},]

const _kBaseGroupPaddingHorizontal = 32.0;
const _kMinBarSize = 4.0;

/// Changes the position of marks while also updating their width to match
/// the number of marks in a single band. Useful for bar charts when the
/// width of the bars can be dynamic.
@immutable
class DodgeSizeModifier extends Modifier {
@OverRide
AttributesGroups modify(
AttributesGroups groups,
Map<String, ScaleConv<dynamic, num>> scales,
AlgForm form,
CoordConv coord,
Offset origin) {
final xField = form.first[0];
final band = (scales[xField]! as DiscreteScaleConv).band;

final ratio = 1 / groups.length;
final numGroups = groups.length;
final groupHorizontalPadding = _kBaseGroupPaddingHorizontal / numGroups;
final invertedGroupPaddingHorizontal =
    coord.invertDistance(groupHorizontalPadding, Dim.x);

final effectiveBand = band - 2 * invertedGroupPaddingHorizontal;

final maxWidth = coord.convert(const Offset(1, 0)).dx;
final maxWidthInBand = effectiveBand * maxWidth;
final maxWidthPerAttributes = maxWidthInBand / numGroups;
final barHorizontalPadding = groupHorizontalPadding / 2;
final size =
    max(maxWidthPerAttributes - barHorizontalPadding, _kMinBarSize);

final bias = ratio * effectiveBand;

// Negatively shift half of the total bias.
var accumulated = -bias * (numGroups + 1) / 2;

final AttributesGroups rst = [];
for (final group in groups) {
  final groupRst = <Attributes>[];
  for (final attributes in group) {
    final oldPosition = attributes.position;

    groupRst.add(Attributes(
      index: attributes.index,
      tag: attributes.tag,
      position: oldPosition
          .map(
            (point) => Offset(point.dx + accumulated + bias, point.dy),
          )
          .toList(),
      shape: attributes.shape,
      color: attributes.color,
      gradient: attributes.gradient,
      elevation: attributes.elevation,
      label: attributes.label,
      size: size,
    ));
  }
  rst.add(groupRst);
  accumulated += bias;
}

return rst;

}

@OverRide
bool equalTo(Object other) {
return super == other;
}
}

class ChartTest extends StatelessWidget {
const ChartTest({super.key});

@OverRide
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Center(
child: Column(
children: [
Container(
margin: const EdgeInsets.only(top: 10),
width: 600,
height: 300,
child: Chart(
data: teste,
variables: {
'index': Variable(
accessor: (Map map) => map['index'].toString(),
),
'year': Variable(
accessor: (Map map) => map['year'] as String,
),
'type': Variable(
accessor: (Map map) => map['type'] as String,
),
'value': Variable(
accessor: (Map map) =>
map['value'] is num ? map['value'] as num : 0.0,
),
'average': Variable(
accessor: (Map map) =>
map['average'] is num ? map['average'] as num : 0.0,
),
},
marks: [
IntervalMark(
position: Varset('index') * Varset('value') / Varset('type'),
color: ColorEncode(
variable: 'type',
values: Defaults.colors2,
updaters: {
'tap': {false: (color) => color.withAlpha(100)}
}),
size: SizeEncode(value: 6),
modifiers: [DodgeSizeModifier()],
),
LineMark(
position:
Varset('index') * Varset('average') / Varset('type'),
color: ColorEncode(
value: Defaults.average,
//variable: 'average',
updaters: {
'tap': {false: (color) => color.withAlpha(100)}
}),
)
],
axes: [
AxisGuide(
tickLine: TickLine(),
variable: 'year',
label: LabelStyle(
rotation: 120,
textStyle: const TextStyle(
fontSize: 10,
color: Colors.black,
),
offset: const Offset(0, 7.5),
),
),
Defaults.verticalAxis,
],
selections: {
'tap': PointSelection(
dim: Dim.x,
nearest: true,
)
},
tooltip: TooltipGuide(),
),
),
],
),
)));
}
}

[entronad]

Of course! I'd be happy to help you with this. It's a great question about a common scenario in data visualization: displaying grouped information in a tooltip.

From your code and the image, I can see you've set up a grouped bar chart with an overlaid line chart. Your goal is for the tooltip to recognize the grouping by the x-axis value (in your case, 'index' or 'year') and display the data for all bars and the line at that position, instead of just the single element you're hovering over.

The good news is that you're already very close! The key lies in a single property within the TooltipGuide.

The Principle: Selection vs. Tooltip Display

First, let's understand what's happening. Your PointSelection is configured like this:

'tap': PointSelection(
  dim: Dim.x,
  nearest: true,
)

By setting dim: Dim.x, you've correctly instructed Graphic to select all data points that share the same discrete value on the horizontal axis when you hover over that area. The selection itself is working perfectly and is aware of all the relevant data tuples (the type1 bar, the type2 bar, and the line point).

The issue is that the TooltipGuide, by default, is configured to only display information for the single closest data tuple to your pointer from that selection.

The Solution: multiTuples

To make the tooltip display all the data points you've selected with dim: Dim.x, you simply need to set the multiTuples property to true in your TooltipGuide.

Here is the corrected code for your Chart widget's tooltip property:

tooltip: TooltipGuide(
  // This is the magic property!
  multiTuples: true,

  // Optional: You can also customize the tooltip's appearance.
  backgroundColor: const Color(0xcc555555),
  radius: const Radius.circular(4),
  textStyle: const TextStyle(
    fontSize: 12,
    color: Color(0xffffffff),
  ),
),

By adding multiTuples: true, you are telling the TooltipGuide to render a list of all data tuples contained within the current selection, which is exactly the behavior you're looking for.

---

A Suggestion for Improvement

I noticed one more thing in your code that you might want to adjust for cleaner results. Your LineMark is defined as:

LineMark(
  position: Varset('index') * Varset('average') / Varset('type'),
  // ...
)

The / Varset('type') part causes the line to be grouped in the same way as the bars. Since the 'average' value is identical for all types within the same month in your data, this results in multiple, identical lines being drawn on top of each other. It will also cause the average value to appear multiple times in your new grouped tooltip.

To draw a single, continuous line for the average and have it appear only once in the tooltip for each group, you can simply remove the type grouping from the LineMark:

LineMark(
  // The 'type' grouping is removed here.
  position: Varset('index') * Varset('average'),
  color: ColorEncode(
    value: Defaults.average,
    updaters: {
      'tap': {false: (color) => color.withAlpha(100)}
    },
  ),
  shape: ShapeEncode(value: BasicLineShape(smooth: true)), // Maybe add some smoothing?
)

---

Complete Code Example

Here is the complete, adjusted Chart widget incorporating both changes. This will give you the grouped tooltip you want and a cleaner line chart representation.

Container(
  margin: const EdgeInsets.only(top: 10),
  width: 600,
  height: 300,
  child: Chart(
    data: teste,
    variables: {
      'index': Variable(
        accessor: (Map map) => map['index'].toString(),
        // It's often better to use the 'year' directly for the scale
        // if it's unique per index.
        scale: DiscreteScale(
          accessor: (datum) => datum['year'] as String,
        ),
      ),
      'year': Variable(
        accessor: (Map map) => map['year'] as String,
      ),
      'type': Variable(
        accessor: (Map map) => map['type'] as String,
      ),
      'value': Variable(
        accessor: (Map map) => map['value'] as num,
      ),
      'average': Variable(
        accessor: (Map map) => map['average'] as num,
      ),
    },
    marks: [
      IntervalMark(
        position: Varset('index') * Varset('value') / Varset('type'),
        color: ColorEncode(
          variable: 'type',
          values: Defaults.colors2,
          updaters: {
            'tap': {false: (color) => color.withAlpha(100)}
          },
        ),
        modifiers: [DodgeModifier(ratio: 0.1)], // Use the simpler built-in DodgeModifier
      ),
      LineMark(
        // Note: No more grouping by 'type' for a single, clean line.
        position: Varset('index') * Varset('average'),
        color: ColorEncode(
          value: Colors.red, // Making it more visible
          updaters: {
            'tap': {false: (color) => color.withAlpha(100)}
          },
        ),
        shape: ShapeEncode(value: BasicLineShape(smooth: true)),
        size: SizeEncode(value: 2),
      )
    ],
    axes: [
      AxisGuide(
        tickLine: TickLine(),
        // Displaying the 'year' on the axis using the scale from 'index'.
        variable: 'index',
      ),
      AxisGuide(
        line: null,
        grid: StrokeStyle(
          color: const Color(0xffe0e0e0),
        ),
      ),
    ],
    selections: {
      'tap': PointSelection(
        dim: Dim.x,
      )
    },
    tooltip: TooltipGuide(
      // This enables the grouped tooltip!
      multiTuples: true,
      // And some styling to make it look nice.
      backgroundColor: const Color(0xcc555555),
      radius: const Radius.circular(4),
      textStyle: const TextStyle(
        fontSize: 12,
        color: Color(0xffffffff),
      ),
    ),
    coord: RectCoord(), // Explicitly add RectCoord
  ),
)

(Note: I also replaced your custom DodgeSizeModifier with the built-in DodgeModifier for simplicity, as it achieves a similar effect, and made a few other minor tweaks for clarity.)

I hope this detailed explanation helps you achieve the exact chart behavior you're looking for. Happy coding! This solution was generated by an AI. I would appreciate any feedback on whether it effectively solved your problem!

For more detailed information, you can always refer to the official Graphic documentation. Good luck with your project!