Charts

The chart family renders a real chart shape rather than a node diagram. The header is chart <type>, or a bare pie / radar, where <type> is one of bar line area scatter pie donut radar (column and xychart map to bar, doughnut to donut).

chart bar
title: Quarterly revenue
y-axis: USD (k)
categories: Q1, Q2, Q3, Q4
Revenue : 100, 150, 120, 180
Profit : 20, 30, 25, 40
Quarterly revenueUSD (k)050100150200Q1Q2Q3Q4

Two input modes#

  • With categories: (the category-axis labels), each Name : v1, v2, … row is a series whose values line up with the categories.
  • Without categories:, each Label : value row is a category, the pie or single-series form.
pie
title: Traffic by source
Search : 386
Direct : 210
Social : 85
Referral : 40
Traffic by source54%29%12%6%
No categories: each row is a slice.

Directives and flags#

Directives: title:, x-axis: (alias x:), y-axis: (alias y:), and categories: (aliases axis:, labels:). Bare flags: stacked, horizontal, showValues (aliases values, showData).

chart bar
title: Headcount by team
stacked
showValues
categories: Eng, Sales, Ops
Full-time : 24, 12, 8
Contract : 6, 4, 3
Headcount by team0102030EngSalesOps24612483
stacked bars with values printed on them.

Chart types#

chart line
title: Weekly active users
x-axis: Week
categories: W1, W2, W3, W4, W5
This year : 40, 52, 61, 70, 82
Last year : 35, 38, 44, 50, 55
Weekly active usersWeek020406080100W1W2W3W4W5
A line chart with two series.
chart area
title: Storage used
categories: Jan, Feb, Mar, Apr
Free : 40, 35, 30, 20
Paid : 60, 70, 85, 110
Storage used050100150JanFebMarApr
radar
title: Skill assessment
categories: Speed, Power, Range, Control, Stamina
Player A : 80, 70, 60, 90, 75
Player B : 60, 85, 80, 55, 90
Skill assessmentSpeedPowerRangeControlStamina
A radar chart compares two profiles across axes.
chart donut
title: Market share
Us : 42
Rivals : 33
Others : 25
Market share42%33%25%

A horizontal bar chart ranks survey answers, longest first.

chart bar
title: Favourite editor
horizontal
showValues
categories: VS Code, Vim, JetBrains, Emacs, Other
Responses : 512, 214, 188, 96, 61
Favourite editor0200400600VS CodeVimJetBrainsEmacsOther5122141889661
Every diagram on these pages is compiled live from the code above it, through the same pipeline the app uses. Open the canvas to try it.