@bezda/rhp-mcp 0.1.9 → 0.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bezda/rhp-mcp",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "description": "Make charts with rhp from any AI agent: an MCP server with rhp's guide, references and recipes, and a checker that renders a chart in a browser and reports what is wrong, with screenshots",
   "keywords": [
     "rhp",
@@ -51,7 +51,7 @@
   },
   "dependencies": {
     "@babel/core": "^7.29.7",
-    "@bezda/rhp": "^2.1.0",
+    "@bezda/rhp": "^2.2.0",
     "@modelcontextprotocol/sdk": "^1.32.0",
     "babel-preset-solid": "^1.9.15",
     "esbuild": "^0.28.2",

package/skill/SKILL.md

@@ -269,7 +269,7 @@ Download saves the full poster, including the headline and note, even when the v
 - A request about the user's own data with none given ("chart my spending") gets illustrative numbers in one obvious data block at the top of the script, with the note's text in the same block, so the user changes both in one place.
   The headline and the dek compute their numbers from that data, so they stay true for the user's own.
   The handoff says exactly how to put their own numbers in, or offers to read a file they point to.
-- Compute the scale from the data: `nice(Math.min(0, ...values), Math.max(0, ...values))` (rule 2 below).
+- Compute the scale from the data: `nice(...extent([0, ...values]))`, which skips missing values (rule 2 below).
 - Compute the ranks, the leader and every number in the headline and the dek from a sorted copy of the data, never from its input order: a Plot's `order` sorts only what it draws.
 - Text computed from the data (the headline, the dek, a readout, an `aria-label`) must stay true for any data it may get:
   - A change from a zero or missing base prints "new" or "up from none", never ∞%, NaN% or "as many as"; a change in a rate is in percentage points ("down 0.8 points").
@@ -375,12 +375,12 @@ A complete chart in the plain HTML format (the format of every recipe), with a p
 <body>
 <div id="chart"></div>
 <script type="module">
-import { Chart, Plot, Bar, Label, Poster, slat, nice, html, render, createSignal } from "@bezda/rhp/standalone";
+import { Chart, Plot, Bar, Label, Poster, slat, nice, extent, html, render, createSignal } from "@bezda/rhp/standalone";
 
 // Data, and what depends on it
 const fruit = ["Bananas", "Apples", "Cherries", "Pears", "Plums"];
 const sold = [18, 12, 7, 5, 3];
-const scale = nice(Math.min(0, ...sold), Math.max(0, ...sold)); // 0 to 20, ticks every 5
+const scale = nice(...extent([0, ...sold])); // 0 to 20, ticks every 5
 const lead = sold.indexOf(Math.max(...sold)); // the fruit the headline names: lit until the reader picks another
 
 // Slat type: one slat per row; its CSS reaches only these slats
@@ -449,7 +449,7 @@ Data:
 
 1. **Data names must match.** A slat reads `d.sold` only if the Plot has a prop `sold`. A list of objects goes in `rows={[...]}`, never `data={...}`: `data` would just be a column named "data". Any prop a Plot does not know (`id`, `title`, `onClick`) is a column too, and an array is always a column, item i for row i: to give every slat the same list, pass a function of the row (`shown=${(d) => shown()}`).
 2. **The scale must hold the data.** `scale={[min, max]}` with min below max covers every value: a Bar past it is cut off, and Dots, Ticks, Places and the points of an Area or a Line past it land outside or squeeze the outline.
-   Build it from the data, `const s = nice(Math.min(0, ...values), Math.max(0, ...values))`, which keeps 0 and holds negative values too, and give the Chart `scale=${[s.min, s.max]} ticks=${s.ticks}`.
+   Build it from the data, `const s = nice(...extent([0, ...values]))`, which keeps 0, holds negative values and skips missing ones, and give the Chart `scale=${[s.min, s.max]} ticks=${s.ticks}`.
 3. **Rows that come and go need a `key`** on the Plot (`key="city"`), or slats swap data instead of leaving. `d.index` can change then, so read it in a function: `data-row=${() => d.index}`.
 4. **Format numbers** with `Intl.NumberFormat` (thousands, units, percentages, currency) and use `font-variant-numeric: tabular-nums` where numbers line up. In the JS version (`animate`), values in between are fractional: round what you print.
 

package/skill/references/api.md

@@ -659,6 +659,31 @@ const ChangeChart = () => html`
 render(ChangeChart, document.getElementById("chart"));
 ```
 
+### Missing data
+
+`null`, `undefined`, `NaN` and infinite numbers are missing values, and rhp never draws one as 0.
+
+- A block given a missing value for its place draws nothing: a Bar's `from` or `to`, the `at` or `cross` of a Dot, Tick, Label or Place, a Cell's `value`.
+  Its slat and the slat's other blocks stay.
+- Only given values count: a Bar with no `from` starts at 0, and a Label at an `edge` is always drawn.
+- A Line or an Area breaks at a point that is `null` or has a missing x or y, and draws each run of two or more points.
+  To join the line across a gap, leave the point out: `points.filter(([, y]) => y != null)`.
+- The helpers leave missing values out, and `sortBy` puts them last in either direction (section 9).
+- A value that comes back is drawn where it is, without moving from where it was.
+- Read a CSV's empty cells as `null`, never 0: `(s) => (s.trim() === "" ? null : +s)`.
+
+Say "no data" where the value would be, in the slat and in any readout:
+
+```js
+const shown = (v) => (Number.isFinite(v) ? v.toLocaleString() : "no data");
+const Country = slat({ room: { start: 90, end: 60 } }, (d) => html`
+  <div>
+    <${Label} edge="start">${() => d.country}<//>
+    <${Bar} to=${() => d.rate} />
+    <${Label} edge="end">${() => shown(d.rate)}<//>
+  </div>`);
+```
+
 ### ManyDots (experimental point collection)
 
 `ManyDots` draws a bulk collection of points directly inside a `Chart` with `scale` and `cross`.
@@ -947,15 +972,15 @@ When their input changes, call them inside `createMemo` so they run once per cha
 | Helper | Returns | Example (real output) |
 |---|---|---|
 | `nice(lo, hi, count = 5)` | a round scale `{ min, max, step, ticks }` | `nice(0, 87)` → `{ min: 0, max: 100, step: 20, ticks: [0, 20, 40, 60, 80, 100] }`; `nice(-23, 41)` → min -40, max 60, step 20 |
-| `extent(values)` | `[smallest, largest]` (`[Infinity, -Infinity]` when empty) | `extent([5, -2, 9])` → `[-2, 9]` |
+| `extent(values)` | `[smallest, largest]` (`[Infinity, -Infinity]` when empty) | `extent([5, null, -2, 9])` → `[-2, 9]` |
 | `every(step, { ends })` | a ticks function of `[min, max]` (a step not above 0 throws) | `every(25)([0, 100])` → `[0, 25, 50, 75, 100]`; `every(5, { ends: true })([0, 27])` → `[0, 5, …, 25, 27]` |
-| `stackUp(values)` | `{ from, to }`: positives stack up from 0, negatives down | `stackUp([5, -3, 4])` → from `[0, 0, 5]`, to `[5, -3, 9]` |
+| `stackUp(values)` | `{ from, to }`: positives stack up from 0, negatives down; a missing value's are `null` | `stackUp([5, -3, 4])` → from `[0, 0, 5]`, to `[5, -3, 9]` |
 | `shares(values, total = 100)` | each value's share of the sum of absolute values, scaled to `total` | `shares([1, 1, 2])` → `[25, 25, 50]` |
 | `running(changes)` | `{ from, to }`: running totals (waterfall) | `running([100, -30, 45])` → from `[0, 100, 70]`, to `[100, 70, 115]` |
 | `summary(samples)` | `{ min, q1, median, q3, max, low, high, mean, outliers }`; low and high are the whisker ends (within 1.5 × IQR) | `summary([1, …, 9, 40])` → median 5.5, high 9, outliers `[40]` |
 | `bins(samples, { domain, count = 10 })` | `{ x0, x1, tally }`: bin k covers x0[k] to x1[k] | `bins([1, 2, 2, 3, 9, 10], { count: 3 })` → x0 `[1, 4, 7]`, tally `[4, 0, 2]` |
 | `density(samples, { domain, points = 40, bandwidth })` | `[[x, density], …]` for an Area (Gaussian kernel, Silverman's bandwidth) | keep `domain` inside the Chart's scale |
-| `sortBy(key, "asc" or "desc")` | an `order` function; `key` is a group name or `(d) => value`; ties keep their places on screen | `order=${sortBy("sold", "desc")}` |
+| `sortBy(key, "asc" or "desc")` | an `order` function; `key` is a group name or `(d) => value`; ties keep their places on screen, missing values go last | `order=${sortBy("sold", "desc")}` |
 | `series(n = 6)` | a data group: `"series-1"`… by row index | `color=${series(4)}` |
 | `cycle(list)` | a data group repeating `list` over the rows (does not set the number of rows) | `color=${cycle(["#111", "#999"])}` |
 | `at(group, i)` | item i of a data group (a list wraps around, a single value is every row's) | `at([1, 2, 3], 4)` → `2` |
@@ -967,6 +992,8 @@ When their input changes, call them inside `createMemo` so they run once per cha
 | `restyle(slatType, css)` | gives a slat type made with `css` new CSS; its slats restyle in place | for style editors |
 | `linkedCss()` | tells rhp the page links `@bezda/rhp/rhp.css` itself | call before the first chart; without the link rhp warns and adds its CSS anyway |
 
+`extent`, `summary`, `bins` and `density` leave missing values out (section 6, Missing data); `stackUp` and `running` give one `null` for `from` and `to`, and `shares` gives it no share (`null`).
+
 A shape must start with `M`.
 Further `M` commands start separate subpaths, allowing disconnected pieces or holes with the opposite winding direction.
 These work with native CSS `shape()` and the polygon fallback; curves in the fallback retain the existing approximation.
@@ -1364,7 +1391,8 @@ const VoteChart = () => {
 render(VoteChart, document.getElementById("chart"));
 ```
 
-**A top-N race whose rows leave and come in.**
+### A top-N race whose rows leave and come in
+
 A row that leaves the top N slides to place N, just below the last place, fades there, and is hidden at the next step; a row that comes in fades in at its place.
 Rows a source leaves out (a table of the top four each year) are `null` in the data.
 Three parts do it:
@@ -1635,8 +1663,8 @@ Every one of these was found by running rhp 2.0.1.
 15. **`scale` needs `min < max`.**
     An equal or reversed pair draws Bars with no length and no axis.
     To run bars right to left, use negative values and `format=${(v) => Math.abs(v)}`.
-16. **NaN, `undefined` and `null` draw at the scale's start without an error**, and a Label prints "NaN".
-    Clean the data first.
+16. **A missing value draws nothing, and a Label prints it as "NaN" or "null".**
+    Print "no data" for it (section 6, Missing data).
 17. **A numeric Dot `size` makes an ellipse** (a share of the slat's width and height).
     Give a length: `size="12px"`.
 18. **`series()` counts 6 colors whatever the theme holds.**

package/skill/references/design.md

@@ -619,6 +619,9 @@ const Reference = slat({
 - **Units** once, where the reader looks first: in the dek, the Chart's `label` and the axis `format`.
   A short symbol ($, %, °C) may repeat on every value; a unit word ("megawatts", "TWh") goes in the dek or a column head, or after the first value only.
 - **Numbers** rounded to what matters (two or three significant figures), with the same decimals down a column.
+- **Missing data said, never drawn as 0.** A row with no value keeps its name and says "no data" where its value would be (api.md, "Missing data"), and a line breaks at a gap.
+  Join a line across a gap only when the dek or note says the points are joined.
+  When many values are missing, the note says how many and why ("no survey in 2020").
 
 ## 8. Inside an existing app
 
@@ -708,12 +711,12 @@ Whatever they did not mention keeps the defaults: text at 4.5:1 and marks at 3:1
 - A size that fits the content (about 480 to 640px wide for a few bars), centered with room around it (`#chart { max-width: 480px; margin: 0 auto; }` and `body { padding: 64px 16px; }`), not pinned to the top of an empty page.
 
 ```js
-import { Chart, Plot, Bar, Label, Tick, slat, nice, html, render } from "@bezda/rhp/standalone";
+import { Chart, Plot, Bar, Label, Tick, slat, nice, extent, html, render } from "@bezda/rhp/standalone";
 
 // Data
 const NAME = ["A", "B", "C"];
 const VALUE = [3, 7, 5];
-const scale = nice(Math.min(0, ...VALUE), Math.max(0, ...VALUE));
+const scale = nice(...extent([0, ...VALUE]));
 
 // Slat types: columns with their numbers (no axis numbers) and square feet, and a baseline, a Tick at 0 across the plot
 const Column = slat({

package/skill/references/pitfalls.md

@@ -38,17 +38,17 @@ Start from a recipe, never from what another library does.
 3. **`render` got the result instead of a function.** Write ``render(() => html`<${MyChart} />`, element)``.
 4. **The slat returns two elements, text, or nothing** [30]. Return one root element (`<div>`) holding the blocks.
 5. **The Plot is outside a Chart** [29], or the Plot got the bare function instead of what `slat()` returned (the slat then has no CSS or layout).
-6. **Data groups are empty** or the Plot has none of the names the slat reads: every slat reads `undefined` and draws at the start of the scale [16]. Check the names: `d.sold` needs a Plot prop `sold`; a list of objects goes in `rows`, not `data` [7].
+6. **Data groups are empty** or the Plot has none of the names the slat reads: every slat reads `undefined`, a missing value, and its blocks draw nothing [16]. Check the names: `d.sold` needs a Plot prop `sold`; a list of objects goes in `rows`, not `data` [7].
 
 ## Bars, dots or labels in the wrong place
 
 1. **The scale does not hold the data** [13]: bars are cut at the end, dots and ticks land outside the plot.
-   Build it from the data: `const s = nice(Math.min(0, ...values), Math.max(0, ...values))`, then `scale=${[s.min, s.max]} ticks=${s.ticks}`.
+   Build it from the data: `const s = nice(...extent([0, ...values]))`, then `scale=${[s.min, s.max]} ticks=${s.ticks}`.
 2. **Negative values on a scale that starts at 0**: a value below the scale's min draws nothing; the scale above takes its min below 0.
    A Bar whose `to` is below its `from` runs backward.
 3. **Area or Line points past the scale squeeze the whole outline** [14]: keep every x inside the scale; give `density()` a `domain` inside it.
 4. **A reversed or equal scale** (`[100, 0]`, `[5, 5]`) draws nothing [15]. For bars that run the other way, use negative values and print them with `format=${(v) => Math.abs(v)}`.
-5. **NaN, undefined or null** draw at the scale's start and print "NaN" [16]: clean or filter the data first.
+5. **A Label prints "NaN", "null" or "undefined"**: its value is missing, and the blocks it places draw nothing [16]. Print "no data" for it (api.md, "Missing data"), and check the data when the value should be there.
 6. **Every slat got one item of a list meant for all of them**: an array given to a Plot is a column, item i for row i. To give every slat the same list (the series still shown, a set of picked names), pass a function of the row: `shown=${(d) => shown()}`.
 7. **Lists of different lengths** wrap around without an error [8]: the third slat of a 3-item list shown beside a 5-item list repeats the first values. Give every data group the same length.
 8. **A Dot is an oval**: its `size` was a number [17].

package/src/check/README.md

@@ -114,7 +114,8 @@ The tests read this table: every code in it must have a chart in `test/broken/`
 | `plot-typo` | warning | A Plot prop that is a typo of a Plot setting, with a value of that setting's kind (`overlpa=${true}`): rhp takes it as a data group. | The setting it means. |
 | `group-lengths` | warning | A Plot's data groups (lists of 3 or more, not palettes) have different lengths, and rhp repeats the shorter ones. | One item per row in every group. |
 | `no-component` | error | A Solid, React or module file exports several components and no default one. | Export the chart as the default. |
-| `nan-value` | error | A block's number is NaN; a block's `at` or `to` is given but null or undefined (a row with no value, drawn at the start of the scale); a `--rhp-*` value of a block or the Chart came out as NaN, undefined or Infinity; or a text in a chart prints NaN, undefined or Infinity. | Check the data the value is worked out from; leave rows with no value out, or draw the block in a `Show`. |
+| `missing-value` | info | A block given a missing value (null, undefined, NaN or an infinite number) for its place (`from`, `to`, `at`, `cross`, `value`), which rhp doesn't draw; or a Line or Area point that is missing, where the outline breaks. | Say "no data" in the slat for a row with none; join a line over a gap by leaving the point out; otherwise check the data the value is worked out from. |
+| `nan-value` | error | A block's number that is not a place (`across`, `peak`, `base`) is NaN; a `--rhp-*` value of a block rhp draws, or of the Chart, came out as NaN, undefined or Infinity; every value a chart would draw is missing, so it draws no data; or a text in a chart prints NaN, undefined or Infinity. | Check the data the value is worked out from (a misspelled name, numbers read as text, a division by zero), and format numbers before printing them. |
 | `stale-read` | error | A slat read `d.x` once, while it was drawn and outside any function (`${d.x}` in an html template), and the interaction pass changed it: the slat still shows the old value. | `${() => d.x}`, and never destructure `d`. |
 | `static-chart` | error | A static Chart or Plot whose per-row function (`on=${(d) => on() === d.index}`) changed during the interaction pass: static draws each row once, so the interaction changes nothing. | Take `static` off. |
 

package/src/check/findings.js

@@ -27,6 +27,7 @@ export const SEE = {
   "value-past-scale": PITFALLS("Bars, dots or labels in the wrong place"),
   "points-past-scale": PITFALLS("Bars, dots or labels in the wrong place"),
   "nan-value": PITFALLS("Bars, dots or labels in the wrong place"),
+  "missing-value": 'api.md, "Missing data"',
   "dot-size": PITFALLS("Bars, dots or labels in the wrong place"),
   "sticks-out": PITFALLS("Text sticks out, is cut off or overlaps"),
   "text-cut-off": PITFALLS("Text sticks out, is cut off or overlaps"),
@@ -95,6 +96,7 @@ export function fromProbe(f, context) {
         fix: f.vertical ? "Give the Chart a height (height={320}) or an aspect (aspect={16 / 9}), and its parent the room for it." : "Give the chart more width: its parent is too narrow, or the room for labels (room start and end) takes it all.",
       };
     case "nan-value":
+      if (f.everything) return { level: "error", code: f.code, message: `Every value ${f.chart} would draw is missing (${f.count} blocks given null, undefined, NaN or an infinite number), so it draws no data.`, fix: "Check the data the values come from: a misspelled data group or key, numbers read as text and not converted, or a division by zero." };
       if (f.printed) return { level: "error", code: f.code, message: `${f.what} in the chart shows ${q(f.text)}: a value it prints is missing or not a number.`, fix: "Check the data the label prints (a missing value, a misspelled name, a division by zero), and format numbers before printing them." };
       return { level: "error", code: f.code, message: `${f.block}'s ${f.prop} is ${f.value}.`, fix: `Give ${f.block} a number for ${f.prop}: check the data it is computed from (a missing value, a name that is misspelled, a division by zero).` };
     case "plot-outside-chart":

package/src/check/inpage.js

@@ -391,6 +391,12 @@ export function install() {
       // or a Plot of slats with none, draws no data
       const empty = (p) => ![...p.children].some((s) => !s.hidden);
       if (plots.length && (plots.every(empty) || plots.some((p) => empty(p) && !p.hasAttribute("data-rhp-overlap")))) add({ code: "empty-plot", chart: describe(c) });
+      // every block that could show a value has a missing one: the chart draws no data (a misspelled name, values read
+      // as text), though each block alone is a note
+      const gone = c.querySelectorAll(".rhp-body [data-rhp-missing]").length;
+      if (gone && !c.querySelector(".rhp-body :is(.rhp-bar, .rhp-dot, .rhp-tick, .rhp-cell, .rhp-place, .rhp-label[data-rhp-at], .rhp-line, .rhp-area):not([data-rhp-missing])")) {
+        add({ code: "nan-value", everything: true, count: gone, chart: describe(c) });
+      }
       for (const p of plots) {
         const shown = [...p.children].filter((s) => !s.hidden);
         if (!shown.length) continue;
@@ -409,10 +415,11 @@ export function install() {
       }
     }
 
-    // CSS variables that came out as NaN or undefined, and values past the Chart's scale
+    // CSS variables that came out as NaN or undefined (not a block rhp hides for a missing value), and values past the
+    // Chart's scale
     const VALUE = { "--rhp-from": "from", "--rhp-to": "to", "--rhp-at": "at", "--rhp-value": "value", "--rhp-size": "size", "--rhp-across": "across", "--rhp-cross": "cross", "--rhp-min": "scale", "--rhp-max": "scale", "--rhp-thick": "thick" };
     for (const c of all) {
-      for (const el of [c, ...c.querySelectorAll("[style]")]) {
+      for (const el of [c, ...c.querySelectorAll("[style]:not([data-rhp-missing])")]) {
         for (let i = 0; i < el.style.length; i++) {
           const name = el.style[i];
           if (!name.startsWith("--rhp-")) continue;

package/src/guard/rhp.js

@@ -42,6 +42,11 @@ const show = (v) => {
 const isColor = (c) => typeof CSS !== "undefined" && typeof CSS.supports === "function" && CSS.supports("color", c);
 const SPAN = new Set(["from", "to", "value"]);
 
+// A missing value (null, undefined, NaN or infinite), as rhp sees one: a block given one for its place draws nothing,
+// and a Line or an Area breaks at a point with one
+const missing = (v) => v == null || (typeof v === "number" && !Number.isFinite(v));
+const PLACED = new Set(["from", "to", "at", "cross", "value"]);
+
 // A number a block draws at: finite, or left out
 function checkNumber(name, prop, v) {
 
@@ -321,12 +326,16 @@ function inspectBlock(name, props) {
 
   for (const prop of spec.numbers) {
     const v = read(props, prop);
-    checkNumber(name, prop, v);
-    // a place given with no value (a row with no data) is drawn at the start of the scale, with no error
-    if (v == null && (prop === "at" || prop === "to") && given.includes(prop)) {
-      note("error", "nan-value", `${name}'s ${prop} is ${v} (a row with no value), so rhp draws it at the start of the scale.`,
-        `Leave rows with no value out of the data, or draw the ${name} only when there is one: <\${Show} when=\${() => d.value != null}>...<//>.`);
+    // a place given a missing value (a row with no data) is not drawn, which is right, so it is a note: the slat should
+    // say there is no data (a Label at an edge is drawn there and doesn't use its at)
+    if (PLACED.has(prop) && given.includes(prop) && missing(v)) {
+      if (!(name === "Label" && read(props, "edge") != null)) {
+        note("info", "missing-value", `${name}'s ${prop} is ${v}, a missing value, so rhp draws no ${name} there.`,
+          `For a row with no data that is right: say so in the slat (a Label at its edge: "no data"). If the row should have a value, check the data it is worked out from (a misspelled name, an empty cell, a division by zero).`);
+      }
+      continue;
     }
+    checkNumber(name, prop, v);
   }
 
   for (const prop of LENGTHS[name] ?? []) {
@@ -358,22 +367,33 @@ function checkPoints(name, points) {
 
   if (points == null) return;
 
-  const pairs = isList(points) && Array.from(points).every((p) => isList(p) && p.length >= 2);
+  // (a point may be null: a missing one)
+  const list = isList(points) ? Array.from(points) : null;
+  const pairs = list && list.every((p) => p == null || (isList(p) && p.length >= 2));
   if (!pairs) {
     note("error", "bad-prop", `${name}'s points is ${show(points)}, not a list of [x, y] pairs.`, `Give points as [[x, y], [x, y], ...]: x on the value axis, y across the band.`);
     return;
   }
 
-  const bad = Array.from(points).findIndex((p) => !Number.isFinite(p[0]) || !Number.isFinite(p[1]));
+  const shownPoint = (p) => (p == null ? String(p) : `[${p[0]}, ${p[1]}]`);
+  const bad = list.findIndex((p) => p != null && [p[0], p[1]].some((v) => !missing(v) && !Number.isFinite(v)));
   if (bad >= 0) {
-    note("error", Number.isNaN(points[bad][0]) || Number.isNaN(points[bad][1]) ? "nan-value" : "bad-prop", `${name}'s point ${bad} is [${points[bad][0]}, ${points[bad][1]}].`, "Give every point two finite numbers.");
+    note("error", "bad-prop", `${name}'s point ${bad} is ${shownPoint(list[bad])}, not two numbers.`, "Give every point two numbers (null for a value that is missing).");
     return;
   }
 
+  const gap = list.findIndex((p) => p == null || missing(p[0]) || missing(p[1]));
+  if (gap >= 0) {
+    note("info", "missing-value", `${name}'s point ${gap} is ${shownPoint(list[gap])}, a missing value, so the ${name === "Line" ? "line" : "shape"} breaks there.`,
+      `For a gap in the data that is right: a break shows the reader where it is. To join the points around it, leave the missing point out of the list. If it should have a value, check the data it is worked out from.`);
+  }
+
   if (name === "Area") {
-    const unsorted = points.findIndex((p, i) => i > 0 && p[0] < points[i - 1][0]);
-    if (unsorted > 0) note("error", "bad-prop", `Area's points are not sorted by x (point ${unsorted} comes before point ${unsorted - 1}).`, "Sort an Area's points by x.");
-    if (points.some((p) => p[1] < 0)) note("error", "bad-prop", "Area has a point with y below 0.", "An Area's y is 0 or more; for values on both sides use a Line on a cross scale.");
+    // the points that are there, with their places in the list
+    const kept = list.map((p, i) => [i, p]).filter(([, p]) => p != null && !missing(p[0]) && !missing(p[1]));
+    const unsorted = kept.findIndex(([, p], k) => k > 0 && p[0] < kept[k - 1][1][0]);
+    if (unsorted > 0) note("error", "bad-prop", `Area's points are not sorted by x (point ${kept[unsorted][0]} comes before point ${kept[unsorted - 1][0]}).`, "Sort an Area's points by x.");
+    if (kept.some(([, p]) => p[1] < 0)) note("error", "bad-prop", "Area has a point with y below 0.", "An Area's y is 0 or more; for values on both sides use a Line on a cross scale.");
   }
 }