Draw a data chart

A type: chart document draws a small data chart — a bar, line, pie, donut, or scatter — to round out a diagram with the numbers behind it. Charts are deliberately simple: no axes to configure, no data toolkit, and no animation. What they do carry is Beck's colour idea taken to its conclusion — every series colour is derived from --beck-primary by a pure color-mix/relative-colour expression, so the whole set re-tints with your palette and flips light↔dark on the same switch as the rest of the page. Swap the primary and every bar, line, slice, and dot follows.

The shape: chart kind and series

Set the chart kind, then list a series. What each series carries depends on the kind: a single value for a bar or a pie/donut slice, a list of values for a line, or a list of [x, y] points for a scatter. That's the whole schema — colours, spacing, and the legend are derived for you.

yaml

type: chart
meta:
  title: Requests by endpoint
  subtitle: Peak hour, thousands per minute
chart: bar
palette: analogous
legend: right
series:
  - { label: /search, value: 48 }
  - { label: /catalog, value: 36 }
  - { label: /cart, value: 24 }
  - { label: /checkout, value: 15 }
  - { label: /account, value: 9 }

beck

A bar chart colours each bar from the palette and prints its value above it; the legend maps the colours back to labels. Any series can pin its own colour with color: (a token like info or a raw CSS colour) to break out of the derived set.

Colour palettes

palette: picks how the colours beyond the first are generated from --beck-primary. Each is a pure function of that one token, so a chart needs no colour list of its own:

palette	how it derives	best for
`analogous` (default)	small hue steps either side of the primary	categorical series — distinct yet harmonious
`monochromatic`	tints of the primary, mixed toward the surface	an ordered magnitude, single-hue
`complementary`	the primary alternating with its opposite, lightening per pair	a two-way comparison
`sequential`	the primary fading toward neutral	one continuous scale — density or heat

Because the colours are expressions over the tokens rather than baked hex, they re-tint with the host palette and adapt to dark mode automatically — see Match your theme and colours. Here complementary sets two lines against each other:

yaml

type: chart
meta:
  title: Conversion, this quarter vs last
  subtitle: Weekly, as a percentage
chart: line
palette: complementary
legend: top
series:
  - { label: This quarter, values: [2.4, 2.7, 3.1, 3.0, 3.6, 4.1] }
  - { label: Last quarter, values: [1.9, 2.1, 2.3, 2.6, 2.8, 3.0] }

beck

Lines, scatters, and centred donuts

A line series is a list of values, one per x-step; lines share a light gridline backdrop and a dot on the latest point. A scatter series is a list of [x, y] points, one colour per series (cluster). A pie is a filled wedge per slice; a donut is the same with a hole, and it can carry a center headline and a centerLabel sub-caption:

yaml

type: chart
meta:
  title: Response time under load
  subtitle: Each point a load test, grouped by build
chart: scatter
palette: sequential
legend: bottom
series:
  - { label: v3.1, points: [[10, 42], [16, 48], [12, 39]] }
  - { label: v3.2, points: [[30, 55], [36, 61], [33, 50]] }
  - { label: v3.3, points: [[52, 70], [58, 66], [55, 78]] }
  - { label: v3.4, points: [[74, 88], [80, 95], [77, 84]] }

beck

yaml

type: chart
meta:
  title: Cloud spend by service
  subtitle: This month
chart: donut
palette: analogous
legend: right
legendValues: true
center: $128k
centerLabel: total
series:
  - { label: Compute, value: 52 }
  - { label: Storage, value: 34 }
  - { label: Network, value: 22 }
  - { label: Database, value: 14 }
  - { label: Other, value: 6 }

beck

The legend

legend: places the key right (the default), top, bottom, or none. A right-hand legend is a column; top and bottom are centered rows that wrap. For a single-magnitude chart (bar, pie, donut) add legendValues: true to print each value alongside its label in a right-hand column — as in the donut above. A single-series chart, or one whose bars already label themselves, reads fine with legend: none.

Generate it from your C#

ChartDiagramBuilder emits the same schema from code — fix the kind at construction, then add one Series per bar, line, or cluster:

csharp

using Beck.Authoring;
  
string fence = new ChartDiagramBuilder(ChartKind.Donut, "Cloud spend by service")
    .Palette(ChartPalette.Analogous)
    .Legend(LegendPlacement.Right, values: true)
    .Center("$128k", "total")
    .Series("Compute", 52)
    .Series("Storage", 34)
    .Series("Network", 22)
    .ToFence();   // ```beck … ``` — drop it into any Markdown page

The Series overloads follow the data shapes — a single value for bar/pie/donut, several for a line, (x, y) tuples for a scatter:

csharp

new ChartDiagramBuilder(ChartKind.Line)
    .Series("This quarter", 2.4, 2.7, 3.1, 3.6)      // a value per x-step
    .Series("Last quarter", 1.9, 2.1, 2.3, 2.8);
  
new ChartDiagramBuilder(ChartKind.Scatter)
    .Series("v3.4", (74, 88), (80, 95), (77, 84));   // (x, y) points

Full field tables: chart series in the YAML schema. Generating one from C#: ChartDiagramBuilder.