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.

Headcount by team
Engineering: 42 (45.7%)Product: 18 (19.6%)Design: 9 (9.8%)GTM: 23 (25.0%)
  • Engineering
  • Product
  • Design
  • GTM
Headcount by team
LabelValue
Engineering42
Product18
Design9
GTM23
- 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.

Signups by month
0100200300400Jan: 120JanFeb: 180FebMar: 150MarApr: 240AprMay: 310MayJun: 280Jun
Signups by month
LabelValue
Jan120
Feb180
Mar150
Apr240
May310
Jun280
- 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.

Signups by month, by channel
0100200300400Organic — Jan: 80Paid — Jan: 30Referral — Jan: 10JanOrganic — Feb: 110Paid — Feb: 50Referral — Feb: 20FebOrganic — Mar: 100Paid — Mar: 40Referral — Mar: 10MarOrganic — Apr: 150Paid — Apr: 70Referral — Apr: 20AprOrganic — May: 180Paid — May: 90Referral — May: 40MayOrganic — Jun: 160Paid — Jun: 80Referral — Jun: 40Jun
  • Organic
  • Paid
  • Referral
Signups by month, by channel
SeriesLabelValue
OrganicJan80
OrganicFeb110
OrganicMar100
OrganicApr150
OrganicMay180
OrganicJun160
PaidJan30
PaidFeb50
PaidMar40
PaidApr70
PaidMay90
PaidJun80
ReferralJan10
ReferralFeb20
ReferralMar10
ReferralApr20
ReferralMay40
ReferralJun40
- 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.

Top pages by pageviews
0100020003000/pricing: 2840/pricing/docs/getting-started: 2210/docs/getting-started/blog/launch-post: 1780/blog/launch-post/integrations/slack: 1420/integrations/slack/changelog: 980/changelog
Top pages by pageviews
LabelValue
/pricing2840
/docs/getting-started2210
/blog/launch-post1780
/integrations/slack1420
/changelog980
- 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.

Weekly active users
0100020003000W1W2W3W4W5W6W7W8W1: 1240W2: 1380W3: 1310W4: 1520W5: 1680W6: 1610W7: 1870W8: 2050
Weekly active users
LabelValue
W11240
W21380
W31310
W41520
W51680
W61610
W71870
W82050
- 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.

API latency p95 by region (ms)
050100150200MonTueWedThuFrius-east — Mon: 82us-east — Tue: 88us-east — Wed: 79us-east — Thu: 91us-east — Fri: 85eu-west — Mon: 120eu-west — Tue: 118eu-west — Wed: 125eu-west — Thu: 130eu-west — Fri: 122ap-south — Mon: 165ap-south — Tue: 172ap-south — Wed: 180ap-south — Thu: 178ap-south — Fri: 170
  • us-east
  • eu-west
  • ap-south
API latency p95 by region (ms)
SeriesLabelValue
us-eastMon82
us-eastTue88
us-eastWed79
us-eastThu91
us-eastFri85
eu-westMon120
eu-westTue118
eu-westWed125
eu-westThu130
eu-westFri122
ap-southMon165
ap-southTue172
ap-southWed180
ap-southThu178
ap-southFri170
- 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