HierarchyPlot

HierarchyPlot is the core Plugin for the tree data format. It presents hierarchical data as nested rectangles in a TreeMap, where rectangle area corresponds to value.

Data format: tree

Supported charts

• TreeMap — TreeMap Layer

Quick start

A minimal configuration draws a TreeMap. HierarchyPlot shows the TreeMap Layer by default:

import { OrbCharts } from '@orbcharts/core'
import type { RawData } from '@orbcharts/core'
import { HierarchyPlot, Tooltip, Legend } from '@orbcharts/plugin-basic'
 
const data: RawData = [
  { id: 'Movies', name: 'Movies', value: null, series: '' },
  { id: 'Movies.Action', name: 'Action', value: null, parent: 'Movies', series: '' },
  { id: 'Movies.Action.Avatar', name: 'Avatar', value: 760505847, parent: 'Movies.Action', series: 'Action' },
]
 
const chart = new OrbCharts(document.querySelector('#chart')!, {
  data,
  plugins: [
    new HierarchyPlot(),
    new Tooltip(),
    new Legend(),
  ],
})
 
// chart.destroy()

Tip: The chart fills its container by default, so set a width and height on the #chart container. See Core Concepts.

tree data builds its hierarchy with the parent field: each record's parent points to the id of its parent node, and a record with no parent is a root node. The value of leaf nodes determines rectangle area, while the value of intermediate nodes can be null (summed from their children).

Chart examples

TreeMap

new HierarchyPlot({ TreeMap: {} })

TreeMap recursively subdivides the space into nested rectangles by hierarchy, with rectangle area corresponding to value—good for comparing many hierarchical values within a limited space.

Tip: Pair it with Legend and Tooltip for interactivity—added the same way as in GridPlot.

How layer visibility works

HierarchyPlot is composed of Layers, and the Layer names you list in the params are the Layers that get shown. TreeMap is its only Layer and is shown by default, so new HierarchyPlot() renders a TreeMap. You can also switch Layers dynamically with show/hide/showOnly after creation.

Tip: Layer visibility and the show/hide/showOnly/toggle methods are common to all Plugins. See Plugin API for the full explanation.

Plugin parameters

These parameters affect the whole HierarchyPlot's behavior, listed alongside Layer names in the same params object:

Note: styles and visibleFilter are shared by all chart Plugins; their structure and usage are documented centrally in Plugin API. Only HierarchyPlot's default differences are noted here (styles.padding defaults to { top: 20, right: 20, bottom: 60, left: 20 }, and transitionDuration defaults to 800).

Layer parameters

Each Layer has its own parameters. The main parameters and defaults of each Layer are listed below.

About ColorType: color-related parameters use ColorType ('data', 'primary', etc.), mapping to the colors defined in the Theme. See Theme for the full explanation.

TreeMap

Full TypeScript interface

interface HierarchyPlotPluginParams {
  styles: GraphicStyles
  visibleFilter: (datum: ModelDatumTree) => boolean | null
  datasetIndex: number
}
 
interface HierarchyPlotAllLayerParams {
  TreeMap: HierarchyPlotTreeMapParams
}
 
// The constructor accepts a DeepPartial of both (Layer names alongside Plugin params)
new HierarchyPlot(params?: DeepPartial<HierarchyPlotPluginParams & HierarchyPlotAllLayerParams>)

Related

• Data Formats Overview
• Legend — add an interactive legend
• Tooltip — add a hover tooltip