Tree map with levels

index.html

<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/exporting.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/themes/adaptive.js"></script>

<figure class="highcharts-figure">
  <div id="container"></div>
  <p class="highcharts-description">
    This chart shows a tree map with a hierarchy, where the
    groups are labelled with a different text style from the
    child nodes, and the nodes are grouped together by color.
  </p>
</figure>

script.js

Highcharts.chart("container", {
  series: [
    {
      type: "treemap",
      name: "Norge",
      allowTraversingTree: true,
      alternateStartingDirection: true,
      dataLabels: {
        format: "{point.name}",
        style: {
          textOutline: "none"
        }
      },
      borderRadius: 3,
      nodeSizeBy: "leaf",
      levels: [
        {
          level: 1,
          layoutAlgorithm: "sliceAndDice",
          groupPadding: 3,
          dataLabels: {
            headers: true,
            enabled: true,
            style: {
              fontSize: "0.6em",
              fontWeight: "normal",
              textTransform: "uppercase",
              color: "var(--highcharts-neutral-color-100, #000)"
            }
          },
          borderRadius: 3,
          borderWidth: 1,
          colorByPoint: true
        },
        {
          level: 2,
          dataLabels: {
            enabled: true,
            inside: false
          }
        }
      ],
      data: [
        {
          id: "A",
          name: "Nord-Norge",
          color: "#50FFB1"
        },
        {
          id: "B",
          name: "Trøndelag",
          color: "#F5FBEF"
        },
        {
          id: "C",
          name: "Vestlandet",
          color: "#A09FA8"
        },
        {
          id: "D",
          name: "Østlandet",
          color: "#E7ECEF"
        },
        {
          id: "E",
          name: "Sørlandet",
          color: "#A9B4C2"
        },
        {
          name: "Troms og Finnmark",
          parent: "A",
          value: 70923
        },
        {
          name: "Nordland",
          parent: "A",
          value: 35759
        },
        {
          name: "Trøndelag",
          parent: "B",
          value: 39494
        },
        {
          name: "Møre og Romsdal",
          parent: "C",
          value: 13840
        },
        {
          name: "Vestland",
          parent: "C",
          value: 31969
        },
        {
          name: "Rogaland",
          parent: "C",
          value: 8576
        },
        {
          name: "Viken",
          parent: "D",
          value: 22768
        },
        {
          name: "Innlandet",
          parent: "D",
          value: 49391
        },
        {
          name: "Oslo",
          parent: "D",
          value: 454
        },
        {
          name: "Vestfold og Telemark",
          parent: "D",
          value: 15925
        },
        {
          name: "Agder",
          parent: "E",
          value: 14981
        }
      ]
    }
  ],
  title: {
    text: "Norwegian regions and counties by area",
    align: "left"
  },
  subtitle: {
    text: 'Source: <a href="https://snl.no/Norge" target="_blank">SNL</a>',
    align: "left"
  },
  tooltip: {
    pointFormat:
      "The area of <b>{point.name}</b> is \
      <b>{point.value} km²</b>"
  }
});

style.css

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  background: var(--highcharts-background-color);
  color: var(--highcharts-neutral-color-100);
}

.highcharts-figure {
  min-width: 320px;
  max-width: 600px;
  margin: 1em auto;
}

.highcharts-description {
  margin: 0.3rem 10px;
}

tree-map-with-levels.markdown

Tree map with levels

A Pen by JV conseil 👨‍💻 on CodePen.

License.