Why can't I use the breadcrumb to navigate back in this highcharts treemap?

Question

I have a treemap that defines a series that drills down into two series defined in drilldown. Drilling down works, but when I click the breadcrumb to try to navigate back nothing happens. There's probably something I haven't set up correctly, but I can't figure out what I'm doing wrong.

Jsfiddle: https://jsfiddle.net/oLwpa0uf/

Code:

Highcharts.chart('container', {
    chart: {
        type: 'treemap'
    },
    series: [{
          id: "client",
        name: 'Client',
        data: [{
            drilldown: "10",
            id: "10",
            name: 'Client 10',
            value: 1184
        }, {
            drilldown: "BE",
            id: "BE",
            name: 'Client BE',
            value: 647
        }]
    }],
    drilldown: {
        series: [{
          id: '10',
          name: 'attribute_id',
            data: [
                {
                id: "10||CF  ",
                name: "Attr CF  ",
                parent: "10",
                value: 1184
                }
            ]
        }, {
          id: 'BE',
          name: 'attribute_id',
            data: [
                {
                id: "BE||BF  ",
                name: "Attr BF  ",
                parent: "BE",
                value: 647
                }
            ]
        }]
    }
});

Answer 1

When using a treemap series in Highcharts, it's better to use the levels mechanism rather than the drilldown module.

Here's a demo: https://jsfiddle.net/BlackLabel/fjr5gpza/

Highcharts.chart("container", {
  series: [
    {
      type: "treemap",
      layoutAlgorithm: "squarified",
      allowDrillToNode: true,
      dataLabels: {
        enabled: false,
      },
      levelIsConstant: false,
      levels: [
        {
          level: 1,
          dataLabels: {
            enabled: true,
          },
          borderWidth: 3,
        },
      ],
      data: [
        {
          id: "A",
          name: "Category A",
          color: "#EC2500",
        },
        {
          id: "B",
          name: "Category B",
          color: "#ECE100",
        },
        {
          id: "C",
          name: "Category C",
          color: "#EC9800",
        },
        {
          name: "Subcategory A1",
          parent: "A",
          value: 6,
        },
        {
          name: "Subcategory A2",
          parent: "A",
          value: 4,
        },
        {
          name: "Subcategory B1",
          parent: "B",
          value: 4,
        },
        {
          name: "Subcategory B2",
          parent: "B",
          value: 2,
        },
        {
          name: "Subcategory C1",
          parent: "C",
          value: 4,
        },
        {
          name: "Subcategory C2",
          parent: "C",
          value: 2,
        },
      ],
    },
  ],
  title: {
    text: "Treemap with Drilldown",
  },
})

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<div id="container"></div>