Unable to implement hierarchical data for combined bar and scatter

[sarah-eiger]

I have produced a gantt chart using a combined bar and scatter configuration. I am adding the hierarchical type to scale.y, as I want this axis to be expandable. However, the graph does not render and I get an error saying TypeError: Cannot create property 'center' on string 'Phase 1'.

To Reproduce

Here is my graph configuration:

    this.#chart = new Chart<any>(
      this.#elementRef.nativeElement.getContext('2d'),
      {
        type: 'bar',
        data: {
          labels: [
            'Phase 1',
            'Phase 2',
            'Phase 3',
            {
              label: 'Stage 1',
              children: ['Phase 8', 'Phase 9'],
            },
            'Phase 4',
            'Phase 5',
            'Phase 6',
            'Phase 7',
          ],
          datasets: [
            {
              label: 'Milestones',
              type: 'scatter',
              fill: false,
              showLine: false,
              backgroundColor: '#fadd8e',
              data: [
                { y: 'Phase 1', x: '2023-01-13' },
                { y: 'Phase 2', x: '2023-01-18' },
                { y: 'Phase 3', x: '2023-01-20' },
                { y: 'Phase 4', x: '2023-02-01' },
                { y: 'Phase 5', x: '2023-02-14' },
                { y: 'Phase 6', x: '2023-03-15' },
                { y: 'Phase 7', x: '2023-03-20' },
                { y: 'Phase 8', x: '2023-03-30' },
                { y: 'Phase 9', x: '2023-04-15' },
              ],
              pointStyle: 'rectRot',
              pointRadius: 5,
              pointBorderColor: '#baa56c',
            },
            {
              label: 'Phases',
              type: 'bar',
              data: [
                ['2023-01-01', '2023-01-15'],
                ['2023-01-10', '2023-01-20'],
                ['2023-01-01', '2023-01-30'],
                ['2023-01-24', '2023-02-15'],
                ['2023-02-01', '2023-02-19'],
                ['2023-02-28', '2023-03-31'],
                ['2023-03-14', '2023-04-01'],
                ['2023-03-14', '2023-04-01'],
                ['2023-03-14', '2023-04-01'],
              ],
              backgroundColor: [
                '#038bc7',
                '#038bc7',
                '#038bc7',
                '#038bc7',
                '#038bc7',
                '#038bc7',
                '#038bc7',
                '#038bc7',
                '#038bc7',
              ],
              barPercentage: 0.2,
            },
          ],
        },
        options: {
          aspectRatio: 1.7,
          indexAxis: 'y',
          tooltips: {
            enabled: false,
            callbacks: {
              label: function (tooltipItem: { yLabel: any }) {
                return tooltipItem.yLabel;
              },
            },
          },
          responsive: true,
          legend: {
            display: false,
            usePointStyle: true,
          },
          scales: {
            x: {
              type: 'time',
              min: '2023-01-01',
              time: {
                unit: 'day',
              },
            },
            y: {
              type: 'hierarchical',
              beginAtZero: true,
            },
          },
        },
      }
    );

Expected behavior

I would expect the graph to render, with the 'Phase 3' label on the y-axis being expandable to reveal 'Phase 8' and 'Phase 9'. Instead, the graph isn't rendering and I get the message TypeError: Cannot create property 'center' on string 'Phase 1'.

Screenshots

This is my graph rendering without the 'hierarchical' type in options.scales.y

But with type: hierarchical commented in, the graph does not render, and I get this error:

When I'm checking the labels being iterated, I can see that it pulls in 8 with string values, which is why it's erroring, as it can't then get the correct label properties:

Context

• Version:
• Browser:

Additional context