@motionscript/charts 0.1.1-alpha.1 → 0.1.1-alpha.2

package/dist/radial-chart/shared.js.map

@@ -1 +1 @@
-{"version":3,"file":"shared.js","sourceRoot":"","sources":["../../src/radial-chart/shared.ts"],"names":[],"mappings":"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","sourcesContent":["import { Types, clamp, type DataRecord, type TextStyle, type Fill as _Fill, type FillResolved as _FillResolved } from \"@motionscript/sdk\"\n\nimport { CHART_COLORS, CHART_LEGEND, CHART_TEXT, legendConfigOf, type ChartStyleBase, paletteFill } from \"../kit/style\"\nimport type { LegendConfig } from \"../kit/shared\"\nimport { num, text } from \"../kit/shared\"\nimport type { CenterConfig, PieSlice } from \"../kit/polar\"\n\n/** One ring: a row's caption, magnitude and paint. The same shape as a pie's slice, so the legend is shared. */\nexport type RadialRow = PieSlice\n\nexport function resolveRadialRows(data: readonly DataRecord[], category: string, value: string, style: Pick<ChartStyleBase, \"palette\">): RadialRow[] {\n  return data.map((row, i) => ({ category: text(row, category), value: num(row, value), fill: paletteFill(style, i) }))\n}\n\n/** A row's plotted value: negatives and non-finite values count as 0. */\nexport function rowValue(row: RadialRow): number {\n  return row.value > 0 && Number.isFinite(row.value) ? row.value : 0\n}\n\n/** What a full sweep stands for: `max` when it is positive, else the largest value (1 when every value is 0). */\nexport function radialMax(rows: readonly RadialRow[], max: number): number {\n  if (max > 0 && Number.isFinite(max)) return max\n  let largest = 0\n  for (const row of rows) largest = Math.max(largest, rowValue(row))\n  return largest > 0 ? largest : 1\n}\n\n/** The share of a full sweep each row fills, `[0, 1]`. */\nexport function radialFractions(rows: readonly RadialRow[], max: number): number[] {\n  const top = radialMax(rows, max)\n  return rows.map((row) => clamp(rowValue(row) / top, 0, 1))\n}\n\n/** The ring geometry and look, from `style`. */\nexport interface RadialMarks {\n  innerRadius: number\n  ringGap: number\n  /** Degrees of a full ring. */\n  sweep: number\n  /** Degrees clockwise from 12 o'clock. */\n  startAngle: number\n  track: boolean\n  roundCaps: boolean\n}\n\nexport interface RadialStyle extends ChartStyleBase {\n  readonly innerRadius: number\n  readonly ringGap: number\n  readonly sweep: number\n  readonly startAngle: number\n  readonly track: _FillResolved[]\n  readonly roundCaps: boolean\n  readonly ringLabels: boolean\n}\n\nexport const RADIAL_STYLE_GROUPS = {\n  colors: CHART_COLORS,\n  text: CHART_TEXT,\n  marks: {\n    /** Where the innermost ring starts, as a fraction of the outer radius. */\n    innerRadius: Types.number(0.3, { min: 0, max: 0.9, step: 0.05 }),\n    /** Space between neighbouring rings, px. */\n    ringGap: Types.number(8, { min: 0, max: 60, step: 1, unit: \"px\" }),\n    /** Degrees a full ring spans: 360 a circle, 270 a gauge-like open ring. */\n    sweep: Types.number(360, { min: 30, max: 360, step: 5, unit: \"deg\" }),\n    /** Degrees clockwise from 12 o'clock where every ring begins. */\n    startAngle: Types.number(0, { min: -360, max: 360, step: 5, unit: \"deg\" }),\n    /** The full ring under each arc; empty draws none. */\n    track: Types.fill(\"white/10\"),\n    /** Round the ends of the arcs and tracks. */\n    roundCaps: Types.boolean(true),\n  },\n  labels: {\n    /** The category written at each ring's start, in the muted colour. */\n    ringLabels: Types.boolean(false),\n  },\n  legend: CHART_LEGEND,\n}\n\nexport function marksOf(style: RadialStyle): RadialMarks {\n  return {\n    innerRadius: style.innerRadius,\n    ringGap: style.ringGap,\n    sweep: style.sweep,\n    startAngle: style.startAngle,\n    track: style.track.length > 0,\n    roundCaps: style.roundCaps,\n  }\n}\n\nexport function legendOf(style: RadialStyle): LegendConfig {\n  return legendConfigOf(style)\n}\n\nfunction face(style: RadialStyle): Pick<TextStyle, \"fontFamily\"> {\n  return style.fontFamily ? { fontFamily: style.fontFamily } : {}\n}\n\nexport function ringLabelOf(style: RadialStyle): TextStyle {\n  return { ...face(style), fontSize: style.fontSize, fontWeight: style.fontWeight, textAlign: \"center\", fill: style.muted }\n}\n\nexport function centerOf(style: RadialStyle): CenterConfig {\n  return {\n    labelStyle: {\n      ...face(style),\n      fontSize: Math.round(style.fontSize * 1.8),\n      fontWeight: Math.min(900, style.fontWeight + 300),\n      textAlign: \"center\",\n      fill: style.foreground,\n    },\n    captionStyle: { ...face(style), fontSize: Math.round(style.fontSize * 0.8), fontWeight: style.fontWeight, textAlign: \"center\", fill: style.muted },\n  }\n}\n"]}
+{"version":3,"file":"shared.js","sourceRoot":"","sources":["../../src/radial-chart/shared.ts"],"names":[],"mappings":"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","sourcesContent":["import { Types, clamp, type DataRecord, type TextStyle, type Fill as _Fill, type FillResolved as _FillResolved } from \"@motionscript/sdk\"\n\nimport {\n  CHART_BACKGROUND,\n  CHART_FOREGROUND,\n  CHART_LEGEND,\n  CHART_MUTED,\n  CHART_SERIES,\n  LEGEND_TEXT,\n  legendConfigOf,\n  paletteFill,\n  placedText,\n  sizeOf,\n  type ChartStyleBase,\n} from \"../kit/style\"\nimport type { LegendConfig } from \"../kit/shared\"\nimport { num, text } from \"../kit/shared\"\nimport type { CenterConfig, PieSlice } from \"../kit/polar\"\n\n/** One ring: a row's caption, magnitude and paint. The same shape as a pie's slice, so the legend is shared. */\nexport type RadialRow = PieSlice\n\nexport function resolveRadialRows(data: readonly DataRecord[], category: string, value: string, style: Pick<ChartStyleBase, \"seriesFills\">): RadialRow[] {\n  return data.map((row, i) => ({ category: text(row, category), value: num(row, value), fill: paletteFill(style, i) }))\n}\n\n/** A row's plotted value: negatives and non-finite values count as 0. */\nexport function rowValue(row: RadialRow): number {\n  return row.value > 0 && Number.isFinite(row.value) ? row.value : 0\n}\n\n/** What a full sweep stands for: `max` when it is positive, else the largest value (1 when every value is 0). */\nexport function radialMax(rows: readonly RadialRow[], max: number): number {\n  if (max > 0 && Number.isFinite(max)) return max\n  let largest = 0\n  for (const row of rows) largest = Math.max(largest, rowValue(row))\n  return largest > 0 ? largest : 1\n}\n\n/** The share of a full sweep each row fills, `[0, 1]`. */\nexport function radialFractions(rows: readonly RadialRow[], max: number): number[] {\n  const top = radialMax(rows, max)\n  return rows.map((row) => clamp(rowValue(row) / top, 0, 1))\n}\n\n/** The ring geometry and look, from `style`. */\nexport interface RadialMarks {\n  innerRadius: number\n  ringGap: number\n  /** Degrees of a full ring. */\n  sweep: number\n  /** Degrees clockwise from 12 o'clock. */\n  startAngle: number\n  track: boolean\n  roundCaps: boolean\n}\n\nexport interface RadialStyle extends ChartStyleBase {\n  readonly innerRadius: number\n  readonly ringGap: number\n  readonly sweep: number\n  readonly startAngle: number\n  readonly track: _FillResolved[]\n  readonly roundCaps: boolean\n  readonly ringLabels: boolean\n  readonly labelText: TextStyle\n  readonly centerText: TextStyle\n}\n\nexport const RADIAL_STYLE_GROUPS = {\n  series: CHART_SERIES,\n  background: CHART_BACKGROUND,\n  text: {\n    /** The category at each ring's start, and the caption under the centre. */\n    labelText: Types.typography({ fontSize: 28, fontWeight: 500, fill: CHART_MUTED }),\n    /** The summary in the middle. */\n    centerText: Types.typography({ fontSize: 50, fontWeight: 800, fill: CHART_FOREGROUND }),\n    ...LEGEND_TEXT,\n  },\n  marks: {\n    /** Where the innermost ring starts, as a fraction of the outer radius. */\n    innerRadius: Types.number(0.3, { min: 0, max: 0.9, step: 0.05 }),\n    /** Space between neighbouring rings, px. */\n    ringGap: Types.number(8, { min: 0, max: 60, step: 1, unit: \"px\" }),\n    /** Degrees a full ring spans: 360 a circle, 270 a gauge-like open ring. */\n    sweep: Types.number(360, { min: 30, max: 360, step: 5, unit: \"deg\" }),\n    /** Degrees clockwise from 12 o'clock where every ring begins. */\n    startAngle: Types.number(0, { min: -360, max: 360, step: 5, unit: \"deg\" }),\n    /** The full ring under each arc; empty draws none. */\n    track: Types.fill(\"white/10\"),\n    /** Round the ends of the arcs and tracks. */\n    roundCaps: Types.boolean(true),\n  },\n  labels: {\n    /** The category written at each ring's start, set in the label text. */\n    ringLabels: Types.boolean(false),\n  },\n  legend: CHART_LEGEND,\n}\n\nexport function marksOf(style: RadialStyle): RadialMarks {\n  return {\n    innerRadius: style.innerRadius,\n    ringGap: style.ringGap,\n    sweep: style.sweep,\n    startAngle: style.startAngle,\n    track: style.track.length > 0,\n    roundCaps: style.roundCaps,\n  }\n}\n\nexport function legendOf(style: RadialStyle): LegendConfig {\n  return legendConfigOf(style)\n}\n\nexport function ringLabelOf(style: RadialStyle): TextStyle {\n  return placedText(style.labelText)\n}\n\nexport function centerOf(style: RadialStyle): CenterConfig {\n  const size = sizeOf(style.centerText, 50)\n  return {\n    labelStyle: placedText(style.centerText),\n    captionStyle: placedText(style.labelText, \"center\", { fontSize: Math.round(size * 0.45) }),\n  }\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motionscript/charts",
-  "version": "0.1.1-alpha.1",
+  "version": "0.1.1-alpha.2",
   "type": "module",
   "description": "Animated data charts for Motion Script: a line chart, a bar chart and a pie chart sharing one axis, legend and theme kit.",
   "repository": {
@@ -50,7 +50,7 @@
   "license": "Apache-2.0",
   "author": "Motionscript",
   "peerDependencies": {
-    "@motionscript/sdk": "^0.1.1-alpha.1"
+    "@motionscript/sdk": "^0.1.1-alpha.2"
   },
   "devDependencies": {
     "@types/node": "^25.6.2",
@@ -61,8 +61,8 @@
     "typescript": "^6.0.3",
     "typescript-eslint": "^8.48.0",
     "vitest": "^4.1.5",
-    "@motionscript/core": "0.1.1-alpha.1",
-    "@motionscript/sdk": "0.1.1-alpha.1"
+    "@motionscript/core": "0.1.1-alpha.2",
+    "@motionscript/sdk": "0.1.1-alpha.2"
   },
   "scripts": {
     "build": "tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json --resolve-full-paths && node ../../../scripts/build-browser.mjs",

package/src/bar-chart/bar-chart.ts

@@ -11,6 +11,11 @@ import {
   // Named so this component's emitted type reaches `Node2D` and its props through the sdk, not core.
   type Node2D,
   type Node2DProps as _Node2DProps,
+  type TextStyle as _TextStyle,
+  type CornerRadiusResolved as _CornerRadiusResolved,
+  type CornerStyleResolved as _CornerStyleResolved,
+  type RectCornerRadius as _RectCornerRadius,
+  type RectCornerStyle as _RectCornerStyle,
   type Fill as _Fill,
   type FillResolved as _FillResolved,
   type Stroke as _Stroke,
@@ -44,12 +49,14 @@ import {
 } from "../kit/shared"
 import {
   CARTESIAN_GRID,
-  CHART_COLORS,
+  CARTESIAN_TEXT,
   CHART_LEGEND,
+  CHART_SERIES,
   CHART_STYLE_FAMILY,
   CHART_STYLE_PRESETS,
-  CHART_TEXT,
+  GRID_BACKGROUND,
   axisConfigOf,
+  migrateChartStyle,
   legendConfigOf,
   seriesFill,
   valueText,
@@ -70,7 +77,7 @@ import {
 
 const BAR_STYLE = Types.style(
   CHART_STYLE_FAMILY,
-  { colors: CHART_COLORS, text: CHART_TEXT, grid: CARTESIAN_GRID, marks: BAR_MARKS, labels: BAR_LABELS, legend: CHART_LEGEND },
+  { series: CHART_SERIES, background: GRID_BACKGROUND, text: CARTESIAN_TEXT, grid: CARTESIAN_GRID, marks: BAR_MARKS, labels: BAR_LABELS, legend: CHART_LEGEND },
   { presets: CHART_STYLE_PRESETS }
 )
 
@@ -195,6 +202,7 @@ function seriesBars(s: BarState, index: number, plot: Size2D): BarGeometry[] {
       from: valueToPx(domain, along, span.from),
       to: valueToPx(domain, along, span.to),
       round: span.outer,
+      grounded: !stacked || span.from === 0,
       caption,
     }
   })
@@ -283,6 +291,7 @@ export const BarChart = component2d({
     weights: (state) => state.series.map((s) => ((s.enabled ?? true) ? 1 : 0)),
     showing: (state) => state.series.map((s) => s.enabled ?? true),
   },
+  migrate: { style: migrateChartStyle("cartesian") },
   allowedChildren: [],
   children: (state) => {
     const style = () => state.style
@@ -358,12 +367,13 @@ export const BarChart = component2d({
           baseline: () => valueToPx(domain(), runs(state, plotSize()).along, baselineValue(domain())),
           horizontal,
           fill: () => seriesFill(style(), s, i),
-          cornerRadius: () => style().barRadius,
+          cornerRadius: () => style().barCornerRadius,
+          cornerStyle: () => style().barCornerStyle,
           growth: () => state.growth,
           dims: () => categoryDims(state),
           // A figure past a stack's end prints the stack's total; a percent stack has none worth printing, so prints its shares inside.
           values: () => (built.values === "end" && state.stack === "percent" ? "inside" : built.values),
-          valueStyle: () => ({ ...valueText(style()), fontSize: Math.round(style().fontSize * 0.85) }),
+          valueStyle: () => valueText(style()),
           enabled: () => state.showing[i] ?? (s.enabled ?? true),
         }) as unknown as Node2D
     )
@@ -385,7 +395,7 @@ export const BarChart = component2d({
     plot = new Rect({
       children: [
         new ChartCanvas({
-          fill: () => style().background,
+          fill: () => style().gridBackground,
           xGridStroke: () => style().verticalGrid,
           yGridStroke: () => style().horizontalGrid,
           xMarkers: horizontal ? () => domain().ticks : boundaries,
@@ -402,6 +412,7 @@ export const BarChart = component2d({
 
     return asParts([
       cartesianFrame({
+        background: () => style().background,
         left,
         ghost,
         plot,

package/src/bar-chart/chart-bars.ts

@@ -11,7 +11,11 @@ import {
   // Named so this component's emitted type reaches `Node2D` and its props through the sdk, not core.
   type Node2D,
   type Node2DProps as _Node2DProps,
+  type RectCornerRadius as _RectCornerRadius,
+  type RectCornerStyle as _RectCornerStyle,
   type TextStyle,
+  type CornerRadiusResolved,
+  type CornerStyleResolved,
 } from "@motionscript/sdk"
 
 import { boundText } from "../kit/cartesian"
@@ -35,8 +39,10 @@ export interface BarGeometry {
   from: number
   /** The far end at full growth. */
   to: number
-  /** Whether the far end takes the corner radius (the stack's last segment on its side). */
+  /** Whether the far end takes the far corners (the stack's last segment on its side). */
   round: boolean
+  /** Whether the base takes the base corners (it stands on the baseline: every grouped bar, a stack's first segment). */
+  grounded?: boolean
   /** The figure printed by the bar; empty for none. */
   caption: string
 }
@@ -106,7 +112,9 @@ export const ChartBars = component2d({
     /** Bars grow along x from a category column rather than along y from a row. */
     horizontal: false,
     fill: Types.custom<Fill, FillResolved[]>([], { resolve: fillOps.resolve, lerp: fillOps.lerp }),
-    cornerRadius: 8,
+    /** As for a bar standing up from the baseline: `topLeft`/`topRight` round its far end, the bottom pair its base. */
+    cornerRadius: Types.cornerRadius(8),
+    cornerStyle: Types.cornerStyle("rounded"),
     /**
      * Rise of every bar in `[0, 1]` about the baseline, not each bar's own base:
      * every segment travels by the same factor, so a stack stays flush
@@ -163,17 +171,13 @@ export const ChartBars = component2d({
         const seam = bar.round ? 0 : 1
         const length = Math.abs(ends.end - ends.base) + seam
         if (length <= seam) continue
-        const radius = bar.round ? Math.max(0, Math.min(state.cornerRadius, length, bar.thickness / 2)) : 0
         const forward = ends.end >= ends.base
         const mid = (ends.base + ends.end) / 2 + (forward ? seam : -seam) / 2
-        // Corner keys are visual (y-up): only the far end rounds.
-        const far = state.horizontal
-          ? (forward ? { topRight: radius, bottomRight: radius, topLeft: 0, bottomLeft: 0 } : { topLeft: radius, bottomLeft: radius, topRight: 0, bottomRight: 0 })
-          : (forward ? { topLeft: radius, topRight: radius, bottomLeft: 0, bottomRight: 0 } : { bottomLeft: radius, bottomRight: radius, topLeft: 0, topRight: 0 })
+        const corners = barCorners(state, bar, forward, length)
         // One `Graphics2D` per bar: opacity belongs to the command list, and the spotlight dims single bars.
         const g = new Graphics2D().rect(state.horizontal
-          ? { x: mid, y: bar.center, width: length, height: bar.thickness, cornerRadius: radius > 0 ? far : 0 }
-          : { x: bar.center, y: mid, width: bar.thickness, height: length, cornerRadius: radius > 0 ? far : 0 })
+          ? { x: mid, y: bar.center, width: length, height: bar.thickness, ...corners }
+          : { x: bar.center, y: mid, width: bar.thickness, height: length, ...corners })
         g.fill(state.fill)
         ctx.draw(g.opacity(dimAt(state, i)))
       }
@@ -184,6 +188,41 @@ export const ChartBars = component2d({
 
 export type ChartBars = NodeOf<typeof ChartBars>
 
+type Corners<T> = { topLeft: T; topRight: T; bottomRight: T; bottomLeft: T }
+
+/**
+ * Turns corners written for a bar standing up into the drawn bar's visual
+ * (y-up) corners: mirrored for a bar below zero, turned a quarter clockwise
+ * for one growing right, and both for one growing left.
+ */
+function orient<T>(c: Corners<T>, horizontal: boolean, forward: boolean): Corners<T> {
+  if (!horizontal) return forward ? c : { topLeft: c.bottomLeft, topRight: c.bottomRight, bottomRight: c.topRight, bottomLeft: c.topLeft }
+  return forward
+    ? { topLeft: c.bottomLeft, topRight: c.topLeft, bottomRight: c.topRight, bottomLeft: c.bottomRight }
+    : { topLeft: c.topLeft, topRight: c.bottomLeft, bottomRight: c.bottomRight, bottomLeft: c.topRight }
+}
+
+/** Bar `bar`'s rect corners: the far pair only where its stack ends, the base pair only on the baseline, each held inside the bar. */
+export function barCorners(
+  state: { readonly cornerRadius: CornerRadiusResolved; readonly cornerStyle: CornerStyleResolved; readonly horizontal: boolean },
+  bar: BarGeometry,
+  forward: boolean,
+  length: number
+): { cornerRadius: Corners<number>; cornerStyle: CornerStyleResolved } {
+  const grounded = bar.grounded ?? true
+  const r = state.cornerRadius
+  const ends = (bar.round ? 1 : 0) + (grounded ? 1 : 0)
+  const cap = Math.max(0, Math.min(bar.thickness / 2, ends > 1 ? length / 2 : length))
+  const fit = (v: number, on: boolean) => (on ? Math.max(0, Math.min(v, cap)) : 0)
+  const upright: Corners<number> = {
+    topLeft: fit(r.topLeft, bar.round),
+    topRight: fit(r.topRight, bar.round),
+    bottomRight: fit(r.bottomRight, grounded),
+    bottomLeft: fit(r.bottomLeft, grounded),
+  }
+  return { cornerRadius: orient(upright, state.horizontal, forward), cornerStyle: orient(state.cornerStyle, state.horizontal, forward) }
+}
+
 /** A figure as the bar prints it when the chart gives no caption. */
 export function barCaption(value: number): string {
   return value === 0 ? "" : formatMarker(value)

package/src/bar-chart/shared.ts

@@ -1,4 +1,14 @@
-import { Types, fillOps, type DataRecord, type Fill } from "@motionscript/sdk"
+import {
+  Types,
+  fillOps,
+  type DataRecord,
+  type Fill,
+  // Named so the emitted marks types reach these through the sdk, not core.
+  type CornerRadiusResolved as _CornerRadiusResolved,
+  type CornerStyleResolved as _CornerStyleResolved,
+  type RectCornerRadius as _RectCornerRadius,
+  type RectCornerStyle as _RectCornerStyle,
+} from "@motionscript/sdk"
 
 import { niceRange, num, text, type ChartSeries, type Range } from "../kit/shared"
 
@@ -110,12 +120,17 @@ export function inkOn(fill: Fill): string {
   return luminance > 0.4 ? "#0a0a0a" : "white"
 }
 
-/** A bar chart's own look: how round and how wide the bars are. */
+/** A bar chart's own look: its corners, and how wide the bars are. */
 export const BAR_MARKS = {
-  /** Radius of each bar's far corners; a stacked segment inside the stack stays square. */
-  barRadius: Types.number(10, { min: 0, max: 64, step: 1, unit: "px" }),
+  /**
+   * Each corner as for a bar standing up from the baseline: the top pair round
+   * its far end, the bottom pair its base. Inside a stack, a segment's far end
+   * stays square unless it ends the stack, and its base unless it starts it.
+   */
+  barCornerRadius: Types.cornerRadius({ topLeft: 10, topRight: 10, bottomRight: 0, bottomLeft: 0 }),
+  barCornerStyle: Types.cornerStyle("rounded"),
   /** How much of its category slot a bar group fills, the rest spacing the groups. */
-  barWidth: Types.number(0.7, { min: 0.05, max: 1, step: 0.05 }),
+  barWidth: Types.number(0.7, { min: 0.05, max: 1, step: 0.05, unit: "%", scale: 100 }),
   /** Space between the bars of one group, side by side. */
   barGap: Types.number(6, { min: 0, max: 40, step: 1, unit: "px" }),
 }

package/src/kit/cartesian.ts

@@ -12,24 +12,26 @@ import {
   type TextStyle,
 } from "@motionscript/sdk"
 
-import type { CartesianStyle, LegendPosition } from "./style"
+import { sizeOf, type CartesianStyle, type LegendPosition } from "./style"
 
 /** Space between the frame's rows and columns: the plot and the legend, the axes and the legend. */
-export function frameGap(style: Pick<CartesianStyle, "fontSize">): number {
-  return Math.round(style.fontSize * 0.9)
+export function frameGap(style: Pick<CartesianStyle, "legendText">): number {
+  return Math.round(sizeOf(style.legendText) * 0.9)
 }
 
 /** Room above the plot for the top value marker, which is centred on the top grid line. */
-export function headroom(style: Pick<CartesianStyle, "fontSize">): number {
-  return Math.ceil(style.fontSize * 0.7)
+export function headroom(style: Pick<CartesianStyle, "yLabelText">): number {
+  return Math.ceil(sizeOf(style.yLabelText) * 0.7)
 }
 
 /** How far an end marker of a horizontal value axis may hang past the plot: half a short caption. */
-export function overhang(style: Pick<CartesianStyle, "fontSize">): number {
-  return Math.ceil(style.fontSize * 1.1)
+export function overhang(style: Pick<CartesianStyle, "xLabelText">): number {
+  return Math.ceil(sizeOf(style.xLabelText) * 1.1)
 }
 
 interface CartesianParts {
+  /** Behind the whole chart, axes and legend included. */
+  readonly background?: () => Fill
   /** The axis beside the plot, on its left. */
   readonly left?: Node2D
   /** An invisible twin of `left` under the plot, so the row there starts at the plot's left edge. */
@@ -72,6 +74,7 @@ export function cartesianFrame(parts: CartesianParts): Node2D {
     height: "fill",
     gap: parts.gap,
     padding: parts.padding,
+    ...(parts.background ? { fill: parts.background } : {}),
     children: [
       ...(legend && parts.legendAt === "top" ? [across(legend)] : []),
       main,