DitherCharts

Treemap chart

Updated

TreemapChart packs one tile per row into the frame, its area its value, told apart by pattern; with groupKey the tiles pack into one labelled block per group. Like every DitherCharts chart, it fills its container's width, animates in, moves a cursor with the arrow keys, and keeps a data table for screen readers.

Example

Treemap

Revenue by product, each tile's area its share

Treemap

Install it:

npx dithercharts add treemap-chart

Then use it:

import { TreemapChart } from "@/components/dithercharts/treemap-chart"
import type { ChartConfig } from "@/components/dithercharts/chart-config"

const chartData = [
  { product: "Laptops", revenue: 420 },
  { product: "Phones", revenue: 380 },
  { product: "Tablets", revenue: 210 },
  { product: "Monitors", revenue: 160 },
  { product: "Headsets", revenue: 120 },
  { product: "Keyboards", revenue: 90 },
  { product: "Mice", revenue: 70 },
  { product: "Cables", revenue: 40 },
  { product: "Docks", revenue: 35 },
  { product: "Stands", revenue: 20 },
]

const chartConfig = {
  revenue: { label: "Revenue" },
} satisfies ChartConfig

export function ChartTreemap() {
  return (
    <TreemapChart
      data={chartData}
      config={chartConfig}
      nameKey="product"
      dataKey="revenue"
      label="Revenue by product"
    />
  )
}

Installing needs DitherCharts Pro. See pricing.

Revenue by product
productRevenueShare
Laptops42027%
Phones38025%
Tablets21014%
Monitors16010%
Headsets1208%
Keyboards906%
Mice705%
Cables403%
Docks352%
Stands201%
import { TreemapChart } from "@/components/dithercharts/treemap-chart"
import type { ChartConfig } from "@/components/dithercharts/chart-config"

const chartData = [
  { product: "Laptops", revenue: 420 },
  { product: "Phones", revenue: 380 },
  { product: "Tablets", revenue: 210 },
  { product: "Monitors", revenue: 160 },
  { product: "Headsets", revenue: 120 },
  { product: "Keyboards", revenue: 90 },
  { product: "Mice", revenue: 70 },
  { product: "Cables", revenue: 40 },
  { product: "Docks", revenue: 35 },
  { product: "Stands", revenue: 20 },
]

const chartConfig = {
  revenue: { label: "Revenue" },
} satisfies ChartConfig

export function ChartTreemap() {
  return (
    <TreemapChart
      data={chartData}
      config={chartConfig}
      nameKey="product"
      dataKey="revenue"
      label="Revenue by product"
    />
  )
}

Install

Charts install with DitherCharts Pro. See Installation to log in and import the stylesheet.

npx dithercharts add treemap-chart

Props

TreemapChart props
PropTypeDefaultDescription
datarequiredType readonly ChartRow[]Default –One row per tile, e.g. { product: "Apples", group: "Fruit", sales: 275 }; a row without a value above 0 is skipped.
configrequiredType ChartConfig<SlicePattern>Default –One entry for dataKey (the value's label), and one per tile name (or, with groupKey, per group): its label and, optionally, its pattern.
nameKeyrequiredType stringDefault –The row key that names each tile, e.g. "product".
dataKeyrequiredType stringDefault –The row key that holds each tile's value, its area, e.g. "sales".
groupKeyType stringDefault none (flat)The row key that names each tile's group, e.g. "group": tiles pack into one block per group.
labelrequiredType stringDefault –Accessible name, e.g. "Sales by product". Also captions the table twin.
labelsType booleanDefault trueEach tile's name over its value, cut out of the ink, where they fit.
legendType booleanDefault falseA legend under the chart whose buttons show and hide tiles (or groups); the rest re-lay out to fill.
tooltipType TooltipOptionsDefault –The tooltip's label, and the tile (its row in data) it opens on at rest.
styleType StyleIdDefault "bayer4"Dither style.
animationType "develop" | "none"Default "develop"Entrance animation; reduced motion always shows the final frame.
heightType numberDefault 300Height in CSS pixels; the width fills the container.
cellType numberDefault 3Dither cell size in CSS pixels.
classNameType stringDefault –Classes on the chart's outer figure.

Styles

The dither styles style takes:

  • "bayer2"
  • "bayer4"
  • "bayer8"
  • "blue-noise"
  • "halftone"
  • "crosshatch"
  • "pixel"
  • "stipple"
  • "engraved"
  • "mezzotint"
  • "woodcut"
  • "floyd-steinberg"
  • "atkinson"
  • "riemersma"

Keyboard and accessibility

The chart is one Tab stop. Focusing it from the keyboard puts the cursor on the first tile, or where the keys last left it; moving focus away clears it. The keys stop at the ends.

Chart keys
KeyAction
Left arrow Right arrowPrevious / next tile, largest first
Home EndFirst / last tile
Up arrow Down arrowFirst tile of the previous / next group (with groupKey)
EscapeDismiss the cursor

Screen readers

  • The chart's label names it, says how many tiles it has and lists these keys.
  • Each key press is announced in a polite live region. Moving the pointer is silent.
  • The table button under the chart shows its data as a table. Screen readers can reach the table even while it's hidden; clicking a row moves the cursor there and announces it.
  • With legend, each entry is a toggle button. The last one showing can't be hidden, but its button stays focusable.

On a touch screen, a tap pins the cursor and a tap outside the chart dismisses it.

See every treemap chart example