Skip to main content

Data charts

Seventeen focused chart recipes for analytical interfaces.

The Catalog has six public Component Contracts. This page focuses on its one chart Contract, data.chart; analysis.report, layout.stack, layout.grid, data.metric, and analysis.insight compose charts into complete analytical answers. data.chart's spec.recipe discriminant selects one of 17 designs:

  1. Steps bars
  2. Pipeline stage bars
  3. Sleep score
  4. Revenue per account scatter
  5. Tracked time Sankey
  6. Visitors radial
  7. Visitors radar
  8. Activity calendar
  9. Revenue smooth area
  10. Active users heatmap
  11. Sign-up funnel
  12. Earned so far bars
  13. Contributions heatmap
  14. Sessions and conversion combo
  15. Devices bars
  16. Visitors stacked area
  17. Activity rings

Recipes define information structure, not arbitrary presentation. Authoring specs contain a typed Resource Binding; rows are resolved by the Host and validated only in the node-scoped render projection. A recipe cannot contain raw colors, CSS, callbacks, React props, or SVG markup.

The Host owns visual theming through --og-* CSS properties on .og-ui. Color roles, chart accents, shadows, and the complete radius scale can be overridden without changing ChartSpec. --og-radius-base adjusts the entire radius system; semantic tokens such as --og-radius-panel and --og-radius-card can be overridden independently.

Every preview below starts from the official authoring fixture, publishes its dataset through the Resource Gateway, and is resolved through the real SurfaceController, GenerativeSurface, and verified renderer registry. The gallery does not use documentation-only replicas.

Steps bars

A selected day, weekly date range, and seven daily goal tracks.

data.chart / 01

Pipeline stage bars

Six pipeline stages with conversion progress, period change, and compact totals.

data.chart / 02

Sleep score

Three scored sleep contributors combined into one segmented daily score.

data.chart / 03

Revenue per account

Tiered account revenue against sessions, with bubble scale and group averages.

data.chart / 04

Tracked time

Interactive weighted flows from five tracked-time sources into seven destinations.

data.chart / 05

Visitors radial

A focused radial total with a restrained categorical breakdown.

data.chart / 06

Visitors radar

A multi-dimensional visitor profile on a shared comparable scale.

data.chart / 07

Activity calendar

Daily intensity arranged in a familiar month calendar.

data.chart / 08

Revenue smooth area

Continuous revenue movement with a derived headline value.

data.chart / 09

Active users heatmap

Activity concentration across day and time buckets.

data.chart / 10

Sign-up funnel

Conversion and drop-off across ordered onboarding stages.

data.chart / 11

Earned so far

Cumulative earnings against an optional target or comparison.

data.chart / 12

Contributions heatmap

Long-range daily contribution density in a compact weekly grid.

data.chart / 13

Sessions and conversion

Volume bars and conversion trend aligned on the same timeline.

data.chart / 14

Devices

Device share rendered as direct, readable horizontal bars.

data.chart / 15

Visitors stacked area

Visitor composition and total movement across time.

data.chart / 16

Activity rings

Several bounded progress measures in one compact status surface.

data.chart / 17