Skip to main content

Hierarchical charts

Chart2Music supports hierarchical data for chart types such as treemaps. A hierarchical chart is still passed as grouped data, but each point can name a child group with the children property. The starting group is set with options.root.

For example, this treemap starts at the world group. Each region points to a group with country-level data.

c2mChart({
  type: "treemap",
  title: "World population by region",
  element: myElement,
  data: {
    world: [
      { x: 0, y: 1460, label: "Africa", children: "africa" },
      { x: 1, y: 1030, label: "Americas", children: "americas" },
      { x: 2, y: 4750, label: "Asia", children: "asia" },
      { x: 3, y: 742, label: "Europe", children: "europe" },
    ],
    africa: [
      { x: 0, y: 224, label: "Nigeria" },
      { x: 1, y: 126, label: "Ethiopia" },
      { x: 2, y: 112, label: "Egypt" },
    ],
    americas: [
      { x: 0, y: 335, label: "United States" },
      { x: 1, y: 216, label: "Brazil" },
      { x: 2, y: 129, label: "Mexico" },
    ],
    asia: [
      { x: 0, y: 1430, label: "India" },
      { x: 1, y: 1420, label: "China" },
      { x: 2, y: 278, label: "Indonesia" },
    ],
    europe: [
      { x: 0, y: 144, label: "Russia" },
      { x: 1, y: 84, label: "Germany" },
      { x: 2, y: 68, label: "United Kingdom" },
    ],
  },
  axes: {
    x: {
      label: "Region",
      valueLabels: ["Africa", "Americas", "Asia", "Europe"],
    },
    y: {
      label: "Population in millions",
      format: (value) => `${value.toLocaleString()} million`,
    },
  },
  options: {
    root: "world",
  },
});

When a user focuses a hierarchical chart, Chart2Music announces that it is hierarchical. Users can move across the current level with the arrow keys. If the current point has children, users can drill down with Alt + Down and move back up with Alt + Up. Alt + PageUp returns to the root level.

Data rules​

  • options.root must match a key in data.
  • children must be a string that matches another group key.
  • A point cannot use its own group as its children value.
  • A child group cannot point back to the root group.
  • Leaf points can omit children.

Visual syncing​

Hierarchical charts can use onFocusCallback the same way other chart types can. The callback receives the current point, so you can highlight the matching region, tile, node, or other visual element while the screen reader user navigates.