Stacked Area Graphs: Random Layers and limited Tooltip Information

[Severin]

Problem

I created a similar chart to #259 with the same data.
But this time I used a proper group (Type) in the Varset.
However, this created two problems for me.
First, the layers are stacked randomly(?) and I couldn't find a way to configure them.
Second, the tooltip only ever shows the values from the last group.

Desired result

I would like to order the z-index of the graphs, like it is possible with multiple marks and their layer property (as visible in #259).
And the tooltip should be able to show the same amount of data too.

Is there any way to achieve this with this library?

Transformed Data

const data = [
  {'X': 1, 'Y': 1, 'Type': 'Y1'},
  {'X': 1, 'Y': 2, 'Type': 'Y2'},
  {'X': 1, 'Y': 5, 'Type': 'Y3'},
  {'X': 2, 'Y': 2, 'Type': 'Y1'},
  {'X': 2, 'Y': 6, 'Type': 'Y2'},
  {'X': 2, 'Y': 4, 'Type': 'Y3'},
  {'X': 3, 'Y': 3, 'Type': 'Y1'},
  {'X': 3, 'Y': 9, 'Type': 'Y2'},
  {'X': 3, 'Y': 3, 'Type': 'Y3'},
  {'X': 4, 'Y': 3, 'Type': 'Y1'},
  {'X': 4, 'Y': 8, 'Type': 'Y2'},
  {'X': 4, 'Y': 5, 'Type': 'Y3'},
  {'X': 5, 'Y': 4, 'Type': 'Y1'},
  {'X': 5, 'Y': 7, 'Type': 'Y2'},
  {'X': 5, 'Y': 9, 'Type': 'Y3'},
  {'X': 6, 'Y': 3, 'Type': 'Y1'},
  {'X': 6, 'Y': 3, 'Type': 'Y2'},
  {'X': 6, 'Y': 6, 'Type': 'Y3'},
  {'X': 7, 'Y': 6, 'Type': 'Y1'},
  {'X': 7, 'Y': 5, 'Type': 'Y2'},
  {'X': 7, 'Y': 4, 'Type': 'Y3'},
  {'X': 8, 'Y': 4, 'Type': 'Y1'},
  {'X': 8, 'Y': 5, 'Type': 'Y2'},
  {'X': 8, 'Y': 8, 'Type': 'Y3'},
  {'X': 9, 'Y': 5, 'Type': 'Y1'},
  {'X': 9, 'Y': 4, 'Type': 'Y2'},
  {'X': 9, 'Y': 9, 'Type': 'Y3'},
  {'X': 10, 'Y': 5, 'Type': 'Y1'},
  {'X': 10, 'Y': 4, 'Type': 'Y2'},
  {'X': 10, 'Y': 2, 'Type': 'Y3'},
  {'X': 11, 'Y': 6, 'Type': 'Y1'},
  {'X': 11, 'Y': 9, 'Type': 'Y2'},
  {'X': 11, 'Y': 1, 'Type': 'Y3'},
  {'X': 12, 'Y': 6, 'Type': 'Y1'},
  {'X': 12, 'Y': 2, 'Type': 'Y2'},
  {'X': 12, 'Y': 2, 'Type': 'Y3'},
  {'X': 13, 'Y': 4, 'Type': 'Y1'},
  {'X': 13, 'Y': 4, 'Type': 'Y2'},
  {'X': 13, 'Y': 6, 'Type': 'Y3'},
  {'X': 14, 'Y': 4, 'Type': 'Y1'},
  {'X': 14, 'Y': 1, 'Type': 'Y2'},
  {'X': 14, 'Y': 3, 'Type': 'Y3'},
  {'X': 15, 'Y': 4, 'Type': 'Y1'},
  {'X': 15, 'Y': 1, 'Type': 'Y2'},
  {'X': 15, 'Y': 4, 'Type': 'Y3'},
  {'X': 16, 'Y': 3, 'Type': 'Y1'},
  {'X': 16, 'Y': 1, 'Type': 'Y2'},
  {'X': 16, 'Y': 5, 'Type': 'Y3'},
  {'X': 17, 'Y': 1, 'Type': 'Y1'},
  {'X': 17, 'Y': 2, 'Type': 'Y2'},
  {'X': 17, 'Y': 3, 'Type': 'Y3'},
  {'X': 18, 'Y': 2, 'Type': 'Y1'},
  {'X': 18, 'Y': 3, 'Type': 'Y2'},
  {'X': 18, 'Y': 4, 'Type': 'Y3'},
  {'X': 19, 'Y': 3, 'Type': 'Y1'},
  {'X': 19, 'Y': 4, 'Type': 'Y2'},
  {'X': 19, 'Y': 5, 'Type': 'Y3'},
];

Chart<Map<String, dynamic>>(
  data: data,
  variables: {
    'X': Variable(
      accessor: (e) => e['X'] as num,
    ),
    'Y': Variable(
      accessor: (e) => e['Y'] as num,
    ),
    'Type': Variable(
      accessor: (e) => e['Type'] as String,
    ),
  },
  marks: [
    AreaMark(
      position: Varset('X') * Varset('Y') / Varset('Type'),
      shape: ShapeEncode(value: BasicAreaShape()),
      color: ColorEncode(
        variable: 'Type',
        values: Defaults.colors10,
      ),
    ),
  ],
  axes: [
    Defaults.horizontalAxis,
    Defaults.verticalAxis,
  ],
  selections: {
    'touchMove': PointSelection(
      variable: 'X',
      on: {
        GestureType.scaleUpdate,
        GestureType.tapDown,
        GestureType.longPressMoveUpdate,
      },
      dim: Dim.x,
    )
  },
  tooltip: TooltipGuide(
    followPointer: [false, true],
    align: Alignment.topLeft,
    offset: const Offset(-20, -20),
    multiTuples: false,
    variables: [
      'X',
      'Y',
      'Type',
    ],
  ),
  crosshair: CrosshairGuide(followPointer: [false, true]),
),