Reference

Charts

Three kinds — pie, bar, timeseries — rendered as inline SVG at build time. No JS, no runtime. Add a second dimension by passing `series:` instead of `data:`.

chart · pie

Slice of total

Single-series only. Each slice takes a label, value, and optional color. Percentages are computed from the values you give — no need to pre-normalize to 100.

- type: chart
  kind: pie
  title: Headcount by team
  data:
    - label: Engineering
      value: 42
    - label: Product
      value: 18
      color: green          # default | green | yellow | red | teal
    - label: Design
      value: 9
      color: yellow
    - label: GTM
      value: 23
      color: red
chart · bar

Vertical bar

Default orientation. The y-axis auto-scales to a round max; the x-axis labels every bucket.

- type: chart
  kind: bar
  title: Signups by month
  data:
    - { label: Jan, value: 120 }
    - { label: Feb, value: 180 }
    - { label: Mar, value: 150 }
chart · bar · series

Stacked bar (second dimension)

Replace data: with series: to stack bars by a second dimension. Series color cycles through teal → green → yellow → red unless you set color: explicitly.

- type: chart
  kind: bar
  title: Signups by month, by channel
  series:
    - label: Organic
      points:
        - { label: Jan, value: 80 }
        - { label: Feb, value: 110 }
    - label: Paid
      color: green
      points:
        - { label: Jan, value: 30 }
        - { label: Feb, value: 50 }
chart · bar · orientation

Horizontal bar

Set orientation: horizontal when category labels are long, or when you want a ranked readout. Stacking works the same way.

- type: chart
  kind: bar
  orientation: horizontal   # vertical (default) | horizontal
  data:
    - { label: /pricing, value: 2840 }
    - { label: /docs/getting-started, value: 2210 }
chart · timeseries

Time series

A line per series. X-axis is treated as ordered buckets — pass your dates (or weeks, or sprints) as label: and they render in the order you list them. When there are many buckets, kazam thins the tick labels automatically.

- type: chart
  kind: timeseries
  title: Weekly active users
  data:
    - { label: W1, value: 1240 }
    - { label: W2, value: 1380 }
chart · timeseries · series

Multi-line timeseries

Multiple series render as overlaid lines — one per segment. Each point gets a hover tooltip with the exact value.

- type: chart
  kind: timeseries
  title: API latency p95 by region (ms)
  series:
    - label: us-east
      points:
        - { label: Mon, value: 82 }
        - { label: Tue, value: 88 }
    - label: eu-west
      color: green
      points:
        - { label: Mon, value: 120 }
        - { label: Tue, value: 118 }
reference

All options

- type: chart
  kind: pie | bar | timeseries    # required
  title: optional string           # rendered as <figcaption>
  height: 300                      # pixels, default varies by kind
  orientation: vertical | horizontal   # bar only (default vertical)
  x_label: optional                # axis labels (bar/timeseries)
  y_label: optional
  # EITHER data: (single-series) …
  data:
    - label: string
      value: number
      color: default | green | yellow | red | teal   # pie only
  # … OR series: (multi-series, one extra dimension)
  series:
    - label: string
      color: default | green | yellow | red | teal
      points:
        - { label: string, value: number }
Next up

Charts pair well with stat_grid for headline numbers above the trend. For long lists of rows and per-row metrics, reach for table.

Grid componentsInteractive components