Hue Draw

Charts API

The library's own list of its exports, read as it ships. Draw a chart in a few lines, then look up the rest.

Hue Charts is in beta and free to use: every everyday chart, for any use, with the Hue Charts credit on its pictures. A Business or Enterprise plan covers a whole organisation, gives it the paid packages, which draw no credit and draw the charts of science, and the Power BI visual, and brings the company behind it: £1,000 a year or £100 a month, or £5,000 a year or £500 a month. Every other feature is in every plan, Display P3 and the print PDF included. The plans are on pricing.

  • 61 charts
  • 1191 API entries
  • 973 runtime exports
  • zero dependencies
  • same bytes in node and the browser

Start

Import it, theme it, draw it

import { charts, toSRGB } from "hue-charts";

// a theme: which read-out, which ground, where the series sit, and the renderer's lightness and chroma share
const theme = { readOut: toSRGB, mode: "dark", start: charts.START, lightness: charts.LIGHTNESS.dark, chroma: charts.CHROMA };

const def = charts.byId("column")!;
const drawn = charts.render(def, theme, { width: 760, height: 420 }, { stack: true, values: true }, myData);

drawn.raster;          // RGBA bytes in ImageData's layout: a canvas, a PNG, a GPU texture
drawn.raster.digest(); // eight hex digits: within a major version, the same spec gives the same digest
drawn.labels;           // text for the page to set, already laid out
drawn.hits;             // one region per datum: tooltips, and the accessible data table
  • Colour that reads

    Every series stands 3:1 against the background, whatever theme is set.

  • The same chart everywhere

    Within a major version, one spec gives the same digest on every engine the SLA covers.

    The SLA

  • Motion you can test

    An animated chart's frame at each turn is a function of that turn, and carries its digest.

  • Readable by everyone

    Each datum has a region, for the tooltip and the data table a screen reader walks.

Use it anywhere

In code, on a page, or on a server

Three ways in, one library: charts.render in code, a <hue-chart> tag on any page, and the PNG, SVG and PDF writers on a server.
<script type="module">
  import { defineHueChart } from "hue-web-components";
  defineHueChart();
</script>
<hue-chart chart="column" mode="light" locale="fr-FR" width="640" height="360"></hue-chart>

Its attributes, read from the element itself: chart, options, data, grow, mode, readout, locale, timezone, dir, width, height, brand, palette, shape, fullscreen, controls, play. The readout takes oklch, p3 or hsl; palette takes okabe-ito, viridis or cividis; the data table under each chart downloads as CSV.

Columns, in Display P3, in the Okabe–Ito palette. Digest drawn: …

What ships with the package
What ships with the package.
PackageWhat ships
hue-chartsESM with type declarations, an exports map, no side effects and no runtime dependencies, with the hue-charts-mcp command; npm run pack:check lists its files and size
sbom.cdx.json, sbom.spdx.jsonCycloneDX 1.5 and SPDX 2.2: the package, its files each with a SHA-256, and what it carries from others, each with its licence
scripts/release.tscuts the release in a clean clone: its version, its ship dates and the Power BI visual, all from the tagged tree; the release check then installs the packed library as a stranger would and draws every chart in Node, Deno and Bun

For assistants

An MCP server, with no SDK

The library is also a Model Context Protocol server: an assistant finds a chart, checks a recipe and draws it, with its digest.
# from this repository, without a build
npm run mcp

# from the published package
{ "mcpServers": { "hue-charts": { "command": "npx", "args": ["-y", "-p", "hue-charts", "hue-charts-mcp"] } } }

Until Hue Charts is on npm, a free account downloads the package; the commands here run once it is published.

Its 8 tools
Every MCP tool the library's server exposes.
ToolWhat it doesArguments
list_chartsThe charts Hue Charts draws, by the question each answers (each question with its charts: id, name, summary, and the chart a preset is of), then its own that answer no one question: the recipes and the kernel's own. With a request in words, the charts that fit it best, with the options the words asked for.request
chart_schemaThe JSON Schema of what one chart takes: its options with their kinds and bounds, and the shape of its data, plain named values where it reads them, and a table where it reads one (its rows' fields named).chart
recipe_schemaThe JSON Schema of a recipe: a chart as one file, your own chart as layers of marks over rows, on one or two axes, with annotations. Write one, keep it, change it, share it: every recipe is checked against this schema and drawn to WCAG 2.2 AA whatever it asks, so a file from anyone draws nothing malformed or unreadable.none
validate_recipeCheck a recipe against its schema, one you wrote or one shared with you: valid, or every problem as a sentence and as data (its path, kind, what is allowed, what was found) to correct it by.recipe
suggest_recipeA recipe proposed from rows (JSON rows, or CSV text), by stated rules: x, series, marks and a second axis chosen from the fields' kinds and sizes; a file to keep, change and share.rows, csv, title
render_chartDraw a Hue Charts chart, of its catalogue or its own beyond it (list_charts names them), or a recipe (chart "recipe" with the recipe as data), and return it as a PNG lettered by the kernel, an SVG, a PDF or its data table as CSV, with its digest: the same chart, from the same package, gives the same digest on every machine. Beside options: format (png, svg, pdf or csv; png when left out), readout (oklch, p3 or hsl), palette (okabe-ito, viridis or cividis), shape (crisp or rounded), mode (a dark or light ground), brand (a #hex colour for series one), locale and timeZone, width and height (760 × 420 when left out). Every chart is drawn to WCAG 2.2 AA whatever is asked: every series at 3:1 against the ground and solved apart for every kind of vision, the ground between series where they touch, and each series after the first hatched, dashed or shaped as well as coloured; a colour asked that would sink into the ground is drawn at its nearest lightness that does not, and said in moved. A picture that draws observation keeps its observed lightness: its series are named by dash and marker shape, and a mark below 3:1 carries its value in text, said in faint. Data may be the chart's own shape, plain named values, or a table of rows, one to each key, as a spreadsheet or a report holds it (chart_schema names each chart's fields).chart, options, data, mode, format, readout, shape, palette, width, height, locale, timeZone, brand
candle_tickTrades folded into candlestick data as a live chart takes them, in the order given: inside the forming bar's interval its high, low, close and volume move and its open holds; past it a new bar opens at the trade's price, on the interval's boundary counted from origin (milliseconds since 1970 UTC; 1970 itself when left out, a Thursday, so give a Monday's origin for weeks from Monday). A trade before the last one taken is late and counted in the reply: inside the forming bar it is folded into its high, low and volume, and its open where it is the earliest, never its close; before it, it changes nothing. Candles as candlestick takes them, with lastTrade and openedAt as the last reply gave them (empty to begin); dates in UTC, YYYY-MM-DD or with THH:MM, THH:MM:SS or THH:MM:SS.sss, the last a bar of the interval. Each trade { t: milliseconds since 1970 UTC, price, size of naught or more }; the interval in milliseconds (60000 a minute, 86400000 a day). Returns the candles, to draw with render_chart as candlestick, and how many trades were taken and late.candles, trades, interval, origin
check_themeThe accessibility report of a theme for n series: contrast against the ground and separation under simulated colour-vision deficiencies, for the theme as given and as drawn (made compliant, with what was moved to make it so), with the drawn theme's CSS design tokens. A brand colour sets series one.series, mode, brand

Protocol revisions 2025-06-18, 2025-03-26, 2024-11-05. Nothing an assistant writes is run: every spec and recipe is checked against its JSON Schema before it is drawn.

Every tool's arguments, the protocol it speaks, and how the server's credit is set: the MCP server.

Reference

Every runtime export, by area

1191 entries in 18 areas, read from the library. Open an area for each name, its signature and what it does.

Render · 195

Draw a chart and read its options.

The Render area of the chart API.
NameSignatureWhat it does
doorfunctiondoor(charts: readonly ChartDef[]): DoorThe one pipeline a host draws through, handed its registry: a chart by its id, options read as the registry reads them, the theme a host's settings make, and the picture flat, finished, mirrored and lettered.
readingOffunctionreadingOf(locale: unknown, zone: unknown): { locale?; zone? }A reader's locale and time zone as a host read them as text (an attribute, a call's argument): each given one carried, either alone, for the door's Showing.
sampleForfunctionsampleFor<D>(def: ChartDef<D>, options?: Options): DA chart's sample under its options: its own for the options where it gives one (a choropleth's region set, each set its sample), else its sample; one object each time for the same options.
renderfunctionrender<D>(def: ChartDef<D>, theme: Look, size: Size, options?: Options, data?: D, emphasis?: (h: Hit, i: number) => boolean | number): DrawnDraw one chart. Options the caller leaves out take their declared defaults; data left out is the chart's own sample under its options (sampleFor); with emphasis, the data it keeps (each whole, or a share of it) are drawn as they are and the rest drawn back toward the ground.
registryfunctionregistry(catalogue, recipes, own): { drawable, byId, chartsFor }The registry of a catalogue, its house recipes and your own recipe: those and the kernel's own by id, the catalogue and the recipes found by words; every entry declares what it colours by, or it is refused at load.
byIdfunctionbyId(id: string): ChartDef | undefinedFind a chart or component by its id: the catalogue's, a preset, a house recipe, your own recipe, or one of the kernel's own.
MONEY_EXAMPLESconstantreadonly MoneyExample[]Money done as an accounting package does it, in seven examples each proving one thing (DESIGN-MONEY §4): the bridge, budget against actual, revenue by channel, three currencies, the rounding card, five readers and the export; each its name, what it proves and its charts, the one list the lab's page and huedraw.com's draw.
MONEY_BRIDGEconstantWaterfallDataA quarter's cash in pounds, opening to a closing of £0.00 given as 0, which its steps sum to exactly; its labels in whole pounds a pound off it, so it says the footing note.
MONEY_READERSconstantreadonly ["en-GB", "de-DE", "fr-FR", "en-IN", "ar-EG"]The five readers the bridge is drawn for, each in its own writing.
sampleCardfunctionsampleCard(id: string, options?: Options): SampleCardThe words a chart's own sample is shown with, under the options it is shown with: its card's title and context, and its figure where its card shows one; a calendar's name the month shown.
drawFlatfunctiondrawFlat<D>(def, theme, size, options?, data?): DrawnDraw one chart on the page, as movement moves it, unbordered, with no mark row: one of the parts a host builds its own drawing from and finishes; it says what render says of the picture (series told apart by pattern), so a host drawing its own way from here says it too.
renderFlatfunctionrenderFlat<D>(def, theme, size, options?, data?, emphasis?): DrawnThe flat picture render finishes, before its mark row: drawn for finish, and with emphasis drawn back toward the ground. A host that grows a chart hands this to the grower and finishes each frame.
drawFlatToFinishfunctiondrawFlatToFinish<D>(def, theme, size, options?, data?): DrawnA chart drawn flat for finish, at the size asked: where it is credited (credited), laid out in the room above the mark row (markRoom), a refusal naming the size asked that draws it; else as drawFlat draws it. A host that draws flat first draws by this.
creditedfunctioncredited(options: Options): booleanWhether a picture drawn with these options carries the Hue Charts credit in its mark row, as the package decides it: always in the free package, never in the paid, and in the site's own build unless hueCredit is false. A host that lays its own controls under the picture knows by it, before drawing, whether the row is there.
EDITIONconstantEditionWhich package this is: "free", which draws the Hue Charts credit on every picture, or "paid", which draws none, for an organisation on a Business or Enterprise plan; fixed when the package is built, never read from a call.
withReaderfunctionwithReader(options: Options, locale?: string): OptionsOptions carrying the reader's locale, a BCP 47 tag, for a chart whose week is left to the locale (weekStart "locale", its default) to begin it on that locale's first day, said where it is not Monday. Nothing else of the picture is read from it. A door carries the locale it is shown in; a host drawing by its own call carries its reader's, and Power BI the report's. The options as given where no locale is.
CREDITconstant"Hue Charts"The credit's words, lettered in the mark row of every picture drawn with the credit on.
CREDIT_HREFconstant"https://huedraw.com/charts"Where the credit's link in <hue-chart> leads.
askedfunctionasked(size, side): numberA side of the size a host asked for: the chart's own and the room round it (Size.around), what a refusal names.
resolvefunctionresolve(defs: OptionDef[], given?: Options): OptionsFill a chart's options with their defaults where nothing was given.
boolfunctionbool(o: Options, key: string): booleanRead a toggle option.
numfunctionnum(o: Options, key: string, fallback?: number): numberRead a range option.
strfunctionstr(o: Options, key: string, fallback?: string): stringRead a text or choice option.
isLivefunctionisLive(def): booleanWhether a chart keeps changing after it is drawn: its Live capability.
isClockedfunctionisClocked(def, data, options): booleanWhether a view reads the time and, under these data and options, changes by itself: a host plays it by its readings (its Clocked capability).
picksfunctionpicks(def): booleanWhether a chart answers a reader's click: its Picks capability.
zoomsfunctionzooms(def): booleanWhether a reader can zoom and pan a chart: its Zooms capability.
readsTablesfunctionreadsTables(def): booleanWhether a chart reads a host's table, by its own reading or its named form.
roundedBoxfunctionroundedBox(x0, y0, x1, y1, r, round: [boolean, boolean, boolean, boolean], steps): [number, number][]A box as a polygon with the corners named rounded to r, a quarter turn in steps a corner: the corners in order top right, bottom right, bottom left, top left; a calendar's cells and the rounded marks are drawn through it.
hourWordsfunctionhourWords(hour: number, clock: string): stringAn hour as a punch card's foot says it: "09" by a 24-hour clock, "9 am" by a 12-hour one.
nthfunctionnth(d: number): stringA day of the month by its number: "1st", "22nd", "15th".
nthWordsfunctionnthWords(d: number): stringA day of the month as a figure says it: "the 15th".
noneWordsfunctionnoneWords(n: number): stringThe days a period chart's total holds with no value, said beside it, so a day with none is never read as naught: " · 1 day with no value", or nothing.
changeWordsfunctionchangeWords(now: number, then: number): stringA change as a period chart says it: "up 5.1 %", "down 12 %", "level", or up or down from naught.
MONTH_NAMESconstantreadonly string[]The months by their names, January first.
MONTHSconstantreadonly string[]Each month by its first three letters, January first: a foot's, a tip's and a key's.
WEEKDAY_NAMESconstantreadonly string[]The weekdays by their names, Monday first, as ISO 8601 counts them.
WEEKDAYSconstantreadonly string[]Each weekday by its first three letters, Monday first.
PERIODSconstantreadonly Period[]The periods a chart compares: week, month, quarter and year.
Periodtype"week" | "month" | "quarter" | "year"A period a chart compares one against another.
periodOffunctionperiodOf(day: number, period: Period, start?: WeekStart): { first: number, last: number }The period holding a day, its first and last day: a week from its first day, a quarter from January, April, July or October.
periodNamefunctionperiodName(first: number, period: Period): stringA period as a legend names it by its first day: "Week of 6 Oct 2025", "October 2025", "Q4 2025", "2025".
yearBeforefunctionyearBefore(day: number): numberThe same date a year before, held to the last day of a shorter month (29 February a year before is 28 February).
isOwnfunctionisOwn(data): booleanWhether data is a live chart's own stand-in, which its step may move: data given by any door is drawn as given, never stepped.
asOwnfunctionasOwn(data, state?): dataA copy of data marked as a live chart's own stand-in, by a mark no door carries (JSON and a spread drop it); the mark carries the state its step runs on from, where it has one.
ownOffunctionownOf(data): state | undefinedThe state a stand-in carries on its mark: none where the data is not a stand-in, or is one that carries none.
withFieldfunctionwithField(data, key, value): dataData with one field set, a frozen copy keeping the own mark: a map's view or base as its host sets them.
instantOffunctioninstantOf(v, zone?): number | undefinedThe instant a date names, in milliseconds, read one way (DESIGN-DATE-TIME §2.2): ISO 8601 text with its offset or Z the instant it states; with none, a wall time on the zone's clock, the device's where none is named (a calendar day its start there); or a host's Date; nothing else, so "06/01/2026" is no date.
wallInstantOffunctionwallInstantOf(v, zone?): WallInstant | undefinedThe instant a date names, as instantOf reads it, with what a change of the zone's clock did to a time with no offset: the minutes it was read later by where the clocks skip it, and whether they show it twice (read at its first), as instantAt reads them.
clockChangeWordsfunctionclockChangeWords(changed: Iterable<ClockChange>): string[]What changes of the clocks did to the wall times a chart read, as its said strip says it: "1 time the clocks skip, read an hour later", a line to each step; "2 times the clocks repeat, read at their first"; none where they did nothing.
localDayOffunctionlocalDayOf(ms): numberAn instant's local calendar day, as days since 1970-01-01, by the local clock: never by the digits of its UTC text.
WeekStarttype"monday" | "sunday" | "saturday" | "friday"The week's first day a chart lays its weeks from: Monday (ISO 8601, most of Europe), Sunday (the United States, Canada, Japan, most of Latin America), Saturday (several Arab states) or Friday (the Maldives).
WEEK_STARTSconstantreadonly WeekStart[]The week starts a chart can name, in that order; the charts that lay weeks offer "locale" before them, their default.
weekStartInfunctionweekStartIn(locale?: string): WeekStartThe first day of the week in a locale ("en-US" Sunday, "ar" Saturday, "dv" Friday, "en-GB" Monday): by its region where it names one, else by the territory its language, in its script, is likeliest in, else Monday. Read from CLDR's own data held in the library, the same on every machine, never through the runtime.
nowMsfunctionnowMs(): numberNow, in milliseconds, by the clock in force: the runtime's, or one a test set (setTimeNow).
setTimeNowfunctionsetTimeNow(f?: () => number): voidSet the clock the charts read now by (a test's), so a test owns its clock; none gives it back to the runtime.
monoNowfunctionmonoNow(): MillisNow on the monotonic clock in force, in milliseconds since its page began: it never falls and no change of the wall clock moves it; a timer counts by it (DESIGN-CLOCKS §3.2).
setMonoNowfunctionsetMonoNow(f?: () => number, origin?: number): voidSet the monotonic clock in force and the wall clock's instant its page began at (a test's); none gives both back to the runtime.
clockReadingfunctionclockReading(): ClockReadingThe wall clock and the monotonic clock in force, read together, with the page the monotonic clock counts in: what a host hands a clocked view (DESIGN-CLOCKS §3.1).
nextChangefunctionnextChange(wall, every: "second" | "minute"): MillisThe next wall-clock instant at which a clock's picture changes: the next whole second or minute.
offsetOffunctionoffsetOf(ms, zone?): numberA zone's offset from UTC at an instant, in minutes east of it; the device's where no zone is given.
offsetSaidfunctionoffsetSaid(minutes): stringAn offset as a clock says it: UTC, UTC+1, UTC+5:30, UTC-3.
offsetIsofunctionoffsetIso(minutes): stringAn offset as ISO 8601 writes it after an instant: Z at naught, else ±HH:MM.
timerStoppedfunctiontimerStopped(reading): TimerStateA timer stopped at naught, of the page a reading names.
timeRunfunctiontimeRun(state, reading): MillisThe time a timer has run at a reading it has read: its time banked and, while it runs, the monotonic time since its run began, so it never falls. A browser that rounds its monotonic clock (Firefox's resist-fingerprinting, to 100 ms) gives its hundredths in steps.
timerReadfunctiontimerRead(state, reading): TimerStateA timer's state at a reading: while it runs, the wall clock's lead of a second or more over the monotonic clock banked (a sleep, or a wall clock stepped forward, which the readings cannot tell from one); one stepped back takes nothing; a state of another page anchored once on this page's wall clock, its time run kept.
timerPressedfunctiontimerPressed(state, press, reading): TimerStateA timer's state after Start, Pause, Lap or Reset at a reading, read at it first; a Lap while paused refused. A page that keeps the controls row out drives a timer by it.
offsetFiledfunctionoffsetFiled(minutes): stringAn offset as a clock's file writes it: UTC+01:00, UTC-03:30, UTC+00:00, UTC before it so no spreadsheet reads it as a sum.
timeWordsfunctiontimeWords(ms, zone, form, cycle?): stringA clock's time in the house's words in its zone, what its picture is drawn in where no locale writes it: 14:03, 14:03:12, 2:03 pm by a 12-hour clock, Fri 17 Oct 2026, Fri 17 Oct.
isoAtfunctionisoAt(ms, zone?): stringAn instant as ISO 8601 writes it in a zone, to the second, with that zone's offset at it: what a clock's file and <time datetime> write.
durationIsofunctiondurationIso(ms): stringA length of time as an ISO 8601 and HTML duration, days at most (PT1H30M, P12DT4H10M22S, PT1M23.45S).
subSecondfunctionsubSecond(ms): numberAn instant's part under a second, 0 to 999 ms, the same in every zone: what a hand that glides reads.
instantAtfunctioninstantAt(fields, zone?): WallInstantA wall time in a zone read to its instant: a time the clocks skip read as the time they moved to, one they show twice as the first, each said, as Temporal's "compatible" reads them.
timeOfDayfunctiontimeOfDay(text): number | undefinedA time of day alone as a routine gives it ("23:00"), in minutes after midnight; none for text that is no time, 24:00 among them.
zoneCityfunctionzoneCity(zone, at, label?): stringA zone as a clock names it: the host's label, else its city (London from Europe/London, Los Angeles from US/Pacific), UTC, or a fixed offset's (UTC+14).
zoneOffunctionzoneOf(options): string | undefinedThe zone a chart reads its instants in: the host's zone option, an IANA name (Europe/London), UTC or a fixed offset, or none for the device's clock; a zone the runtime does not know, or one named by an abbreviation (BST, CST, EST), refused, naming it (DESIGN-DATE-TIME §2.2).
zoneSaidfunctionzoneSaid(zone?): stringThe zone's name as the chart says it: the one given, or the device's clock's.
partsInfunctionpartsIn(ms, zone?): ZonedPartsAn instant's year, month (0 to 11), day of the month, hour, minute and second in a zone, read once by the runtime's own Intl; on the device's clock where none is given.
dayInfunctiondayIn(ms, zone?): numberThe calendar day of an instant in a zone, as days since 1970-01-01; the device's local day where no zone is given.
hourInfunctionhourIn(ms, zone?): numberThe hour of an instant in a zone, 0 to 23; the device's where no zone is given.
minuteInfunctionminuteIn(ms, zone?): numberThe minute of its day an instant stands at in a zone, 0 to 1439; the device's where no zone is given.
dayAlonefunctiondayAlone(v): booleanWhether a date is given as a day alone, ISO 8601 with no time: an all-day event's, a whole day's.
dayOfTextfunctiondayOfText(v): number | undefinedThe day a day alone names, as days since 1970-01-01, whatever the zone: a day is the calendar's, not a clock's.
clockTextfunctionclockText(minute: number): stringA minute of a day as a 24-hour clock says it: 570 is 09:30.
dateTicksfunctiondateTicks(lo: number, hi: number, room: number, start?): { day: number, text: string }[]Ticks along a run of days by the calendar: days, weeks, months, quarters or years, the finest whose words stand apart in the room.
placeInfunctionplaceIn(v, zone?): { at: number, timed: boolean, instant?: number, moved?: number, twice?: true } | undefinedA date as a place on a run of days in a zone: a day alone the day it names; a time read on the zone's clock (wallInstantOf), its day and the part of it its time is, with its instant and what a change of that clock did to it.
dayMonthfunctiondayMonth(day: number): stringA day by its day and month, as a foot and a week's name say it: "7 Oct".
dayWordsfunctiondayWords(day: number): stringA day as a tip says it: "7 Oct 2025".
whenWordsfunctionwhenWords(at: number, timed: boolean): stringA place on a run of days as a tip says it: its day, and its clock where it gave a time ("7 Oct 2025 08:30").
elapsedWordsfunctionelapsedWords(minutes: number): stringElapsed minutes as a reader says them, the Gantt's words: "8 h", "2 d 3 h 15 min"; backwards, a minus before them ("-1 h 30 min").
rangeSpanfunctionrangeSpan(lo: number, hi: number, range: string): { lo: number, hi: number }The days a range shows on a run of days: back from the last date by the months of 1M, 3M, 6M or 1Y, from its year's first day for YTD, or the whole run.
todayInfunctiontodayIn(zone?): numberToday in a zone, as days since 1970-01-01, by the clock in force.
ymdOffunctionymdOf(day): { y, m, d }A day's year, month (0 to 11) and day of the month; days since 1970-01-01 name a calendar day.
monthFirstfunctionmonthFirst(y, m): numberThe day a month begins on, as days since 1970-01-01; a month past December is the next year's.
monthKeyfunctionmonthKey(y, m): stringA month as a host names it, "2025-10".
monthOfKeyfunctionmonthOfKey(key): { y, m } | undefinedThe month a name gives, or none for a name that is no month.
weekdayFromfunctionweekdayFrom(day, start: WeekStart): numberThe weekday of a day counted from a week's first day, 0 on that day.
weekdayAtfunctionweekdayAt(c: number, start: WeekStart): numberThe weekday, Monday 0 to Sunday 6, a week beginning on its start holds at a column from 0: a calendar's head.
weekStartOffunctionweekStartOf(day, start: WeekStart): numberThe day a week begins on, the week containing the day, from the week's first day.
weekNumberOffunctionweekNumberOf(day, start: WeekStart): numberA week's number by the rule its first day belongs to: ISO 8601 under Monday; under Sunday, Saturday or Friday week 1 the week holding 1 January, beginning on that day (DESIGN-DATE-TIME §4).
weekRuleSaidfunctionweekRuleSaid(start: WeekStart): stringHow a chart says the rule its week numbers follow.
localMidnightfunctionlocalMidnight(day): numberThe local midnight that begins a local calendar day; where a clock change skips it, the first instant of the day.
calendarAtfunctioncalendarAt(ms): numberAn instant on the local calendar: its local day and the part of that day its time is, time since local midnight over the day's own length (23, 24 or 25 hours).
atMidnightfunctionatMidnight(ms): booleanWhether an instant falls at the start of its local day.
dayTextfunctiondayText(day): stringA local calendar day written YYYY-MM-DD.
localTextfunctionlocalText(ms): stringAn instant by the local clock: its day, and its time where it is not at midnight.
spanWordsfunctionspanWords(from, to): stringHow long from one instant to another, as a reader says it: whole local days where both fall at local midnight ("2 d"), else the time it ran ("3 h", "1 h 30 min", "30 s"), a clock change said beside it.
secondsOffunctionsecondsOf(what, lists): { seconds: number[][]; from?: number }Times as seconds for a chart that reads elapsed time: numbers kept as seconds, instants as seconds after the earliest of every list, with that instant; a mix, or a time that is neither, refused.
datesAbsentfunctiondatesAbsent(dates, zone?): DatesAbsent | undefinedThe dates a date category leaves out, each date its day in the zone (the device's where none is named; a day alone the day it names), counted against the data's own step: days of its own week (the weekdays present in more than half its weeks; none counted over fewer than four weeks), weeks or months; any other step, or times of day, counted by no rule and said.
absentWordsfunctionabsentWords(absent, what): stringWhat a chart says of its absent dates: the count and the first three named; or why none were counted.
dateAxisWordsfunctiondateAxisWords(dates, axis, what, off, zone?): { text, finding, weight? }[]A date category's words, its dates read in the zone: its axis, one step to each date given, the dates it leaves out, a finding a host raises, and that a day off cannot be told from a missing row; none where the category is no date.
GROUPS_MOSTconstant12The most keys a chart holds of what it colours by: the range this library's compliance is tested to and its patterns cover.
TooManyGroupsclassnew TooManyGroups(title, grouping, count)A chart holding more than twelve of what it colours by, refused naming it and the count; a host writes its own remedy from its fields.
heldGroupsfunctionheldGroups(chart, count): voidA chart's grouping held to twelve: refused, naming the grouping, where more keys are held; none for a chart of a fixed count or the kernel's own.
groupsOffunctiongroupsOf(chart, data, options): numberHow many keys of its grouping a chart holds, hidden ones among them: its concepts, or the keys it holds otherwise (a recipe's series, a pyramid's two sides): the series its theme is made compliant for, as many as it inks.
OPEN_METEO_UNITSconstant{ temperature: "°C", rain: "mm", wind: "km/h" }The units the Weather board's own source gives its forecast in, asked with Open-Meteo's defaults; a table gives none, and none is printed.
OneValueOnlyclassnew OneValueOnly(count, keys)A Gauge handed more than one value: refused, naming the count and the first keys, never summed; a host writes its own remedy.
groundColourOffunctiongroundColourOf(on): { mode; hex }A ground as its mode and its colour: a theme's own ground where it gives one (a report theme's background), else the kernel's for the mode.
groundRGBfunctiongroundRGB(on): RgbThe colour of the ground a mark stands on, which every ink, word and edge is measured against.
TEXTconstant4.5WCAG 1.4.3's least contrast for words: 4.5:1 against what they stand on.
textInkfunctiontextInk(hex, ground): stringA word's ink on a ground: the colour itself where it stands at 4.5:1, else the nearest lightness of its own hue that does, searched to black and to white, so 4.5:1 is always met.
labelInkfunctionlabelInk(label, page): stringThe ink a word is set in: read against a mark's ground, that ground's for its role; else its own (a series' name at its marks); else its role's on the page (wordInks). Every writer and host sets a word by it.
wordTransformfunctionwordTransform({ align, base, angle? }): stringThe CSS transform a page sets a label over the canvas by: where the word stands from its anchor, turned by its angle.
wordInksfunctionwordInks(ground): { inks; moved }The words' inks by role on a ground, each at 4.5:1 against it, and those moved to get there, to be said as any moved colour is.
separationOffunctionseparationOf(inks, space?, apart?): separation[]The closest pair of inks for normal vision and each deficiency, in Oklab, and whether it stays 0.06 apart: where colour alone tells series apart, and where a chart says they are told apart by pattern.
NO_SLOTSconstantSlotMapAn empty slot map: no key held.
slotMapOffunctionslotMapOf(v: unknown): SlotMap | nullA slot map a host kept, read back whole, or null for anything that is not one (a key or a slot twice, a slot past the most, seen after its tick), so the host begins a new map.
slotsForfunctionslotsFor(map, present): { map; added; evicted }The keys present given their slots: those held keep theirs; new ones take the lowest free in the keys' own order; past twelve, the key absent longest gives its slot up, said.
slotsOffunctionslotsOf(map, present): { of; n; labels }How the keys present are drawn through a slot map, for a theme's slots: each one's slot, among as many as the map holds, so a filter moves no other series' ink or pattern.
slotLogSaidfunctionslotLogSaid(log): stringWhat a slot map's log says in a warning: its last twelve moves and evictions, and how many earlier.
Findingtype{ title, text }One thing a render found to say, for a host's warning.
warningOffunctionwarningOf(findings, most): Finding | nullA host's one warning of every finding, in order, held to its bounds on title and text; whole findings cut from the end and counted.
orderWordsfunctionorderWords(order): stringWhat a chart says of its table's order, in its caption: "in the order written", "ordered by the report's sort on F", or "in the keys' own order" with what would state one.
hitKeyTextfunctionhitKeyText(def, key: { category?, across?, to? }, options?): stringA datum's key as one text, resolved as the chart's table reader resolves its keys: a host finds the row a region was drawn from by its hit's key, never by its words.
hostOrderedfunctionhostOrdered(chart): booleanWhether a chart's order is the host's (a Line's categories, a Funnel's stages), said in its caption; a chart with its own order (a date, a time, a bearing, a number) keeps its own.
orderedRowsfunctionorderedRows(chart, rows, order, laid?): TableRow[]A table's rows in the host's order: by each row's place where every row gives one, and, where no order is stated, the categories of a host-ordered chart in the keys' own order, or, given laid (a window's categories as the whole reading lays them, windowOf), in that order, a category it does not lay refused; every sort ends with the key.
namedShapefunctionnamedShape(chart): string | nullThe shape a chart reads named values in (series, parts, stages, a gauge, countries…), or null for one that does not.
clockZonefunctionclockZone(): stringThe zone of the clock the chart reads days by: the machine's, said on the chart.
heldKeysfunctionheldKeys(title, what, keyed: KeyedRows): voidEvery row's key held: a blank one refused, counted and naming its rows; one given twice refused, naming both rows and their spellings, and saying they are one where they are spelled apart; never combined, summed or kept first.
KeyedRowstype{ n; parts; key(i, part): string | undefined; spelled(i): string }The rows' keys, read by each row's place from 0, part by part: each part's identity once resolved, undefined where blank, and how the row spells its key, read only for a refusal.
keyComparefunctionkeyCompare(keys): (a, b) => numberThe key's own order: as numbers where every key given reads as one, else by code point, never by locale, so a result never depends on the order rows arrive in.
keyOrderfunctionkeyOrder(keys): string[]Keys in their own order, each once.
keyRanksfunctionkeyRanks(keys): Map<string, number>Each key's rank in the key's own order: a slot a colour is kept by, whatever order the keys came in.
categoryOrderfunctioncategoryOrder(def, rows, order, laid?): string[]The categories in the order orderedRows lays their rows, each once, without laying the rows; held and refused as orderedRows is.
finishfunctionfinish(flat, theme, options?): DrawnA flat picture finished as render finishes it, with the options it was drawn by: the credit lettered in its mark row where it is credited (credited, by the package), the flat picture drawn by drawFlatToFinish; a host that draws flat first finishes by this, and mirrors what it finishes.
emptyViewfunctionemptyView<D>(def: ChartDef<D>, theme: Look, size: Size, options?: Options, refusal?: unknown): DrawnA chart's card with nothing drawn in it: the header the host gave, its title and context, and the plot's room saying why. A view the host's filter left no data in says EMPTY at the plot's centre; a refused render (refusal, what it threw) says the refusal's words in the foot as refusalSaid says them, carried whole in fitted. Finished as render finishes.
EMPTYconstantstringWhat an empty view says at its plot's centre: "No data for this view".
SLOPEDconstant1e-12A line is sloped past this rise in y: the raster and the GPU both ask it, so both lay the same pixels.
byRankfunctionbyRank<T>(items: readonly T[], rankOf: (t: T) => number | undefined, ranks: number): T[]Items laid by their rank in one pass, never compared: a stable sort by rank, those with no rank last.
holdContractfunctionholdContract(contract, data, path?): voidThe contract door every chart's data passes before it is drawn, whichever door it came by: a number the contract asks for is a finite number, or it is refused, naming its path; a missing number is never read as 0, and is drawn as a gap only where the contract says so.
numbersOffunctionnumbersOf(field: Contract, value, path?): { path; kind }[]Every place in data where a chart's contract holds a number, and how: at the door, as the chart's gap, or in the chart's own words.
Contracttype"number" | "decimal" | "gap" | "own" | "text" | "flag" | "any" | [Contract] | { key: Contract }A chart's data contract, declared once as data: what each field is ("decimal" a number, or a decimal written as text so a double never holds it), a key ending in ? one that may be left out, { "*": field } a record.
OBSERVEDconstantContractThe observations a chart may carry, which the kernel reads and holds: the contract passes them to it.
SERIES_CONTRACTconstantContractThe contract of a series of named values over categories, its values held by heldSeries in its own words.
playsfunctionplays(def, data): booleanWhether a chart's data moves when stepped: a live chart's own example, never data it was given.
candleDrawnfunctioncandleDrawn(data, drawing | null): CandleDataA candlestick's drawings with one added, or all cleared: the chart's own example stays its own, so its market trades on.
refusedOptionsfunctionrefusedOptions(defs: OptionDef[], given: Options, known: (key) => boolean): OptionRefused[]The options given that a chart cannot read: a name no chart declares (known says which some chart does), a value not of its option's kind, or not among its choices. The door every drawing passes refuses them at once (OptionsRefused); a name another chart declares is a host's shared options, and passes unread.
OptionRefusedtype{ key: string; given: unknown; why: string }An option a door was given and cannot read: its key, the value given, and why it is refused.
OptionsRefusedclassclass OptionsRefused extends RangeError { refused: OptionRefused[] }Options refused at the door every drawing passes, each named with why: a misspelt key (with the chart's nearest, where one is near), a value of the wrong kind, a choice not among its own. Never dropped and never read as the default in its place.
PlanRefusedclassclass PlanRefused extends RangeErrorA chart of science, or a format its decoders read, refused by the free package where every picture is drawn and at the decoder's entry, by its name: it comes in the paid packages, with a Business or Enterprise plan. The paid packages draw and read every one.
Refusedtype"data" | "room" | "options" | "settings" | "brand" | "words"What a refusal refused.
sizeHeldfunctionsizeHeld(size: Size): voidA host's size held before anything is drawn: each side a whole number of pixels from 1 to SIDE_MOST, the picture at most AREA_MOST pixels; else refused as a setting (SettingsRefused), named.
SIDE_MOSTconstant16384The most pixels a side of a picture takes.
AREA_MOSTconstant67108864The most pixels a picture holds, 2²⁶.
refusalOffunctionrefusalOf(e: unknown): { what: Refused; name: string; message: string }A refusal read by what it refused: room (RoomRefused), options (OptionsRefused), settings (SettingsRefused), the brand (BadBrand), words the face cannot letter (WordsRefused), a chart of science or its format in the free package (PlanRefused), and the data for every other (Malformed, the contract's, a chart's hold).
WordsRefusedclassnew WordsRefused(where, script); script: stringA chart refused for a word of its host's own (a title, a name, a category) in a script its face does not letter: where the word stands and its script named (Arabic, Hebrew, Han…, or a character's number), never the word itself. A locale's own words, written after the chart is drawn (localised), are never refused.
refusalSaidfunctionrefusalSaid(e: unknown, def: { name; dataType }): stringA refusal said as every host says it, by what it refused: the data's names what the chart takes, the room's, the options', the settings' and the brand's their own; never every refusal the data's. The MCP and the element say it so.
heldfunctionheld(def, data, options?): voidData held at the door every drawing passes, without drawing: its reading, contract, grouping and the refusals its hold makes; a host drawing a window holds the whole reading by it. Every chart drawn a window at a time refuses all it refuses there; some others still refuse more as they draw.
parseForecastfunctionparseForecast(json, city): WeatherDataOpen-Meteo's forecast as the weather board's data.
CITIESconstantRecord<string, [lat, lon]>Places a host may ask a forecast for, each by its latitude and longitude.
forecastQueryfunctionforecastQuery(lat, lon, days?): stringThe query a host asks Open-Meteo's forecast with for a place: every field parseForecast reads, and no address; the host names the address it asks, under its own terms.
hiddenOffunctionhiddenOf(options): string[]The series the hide option names, one label to a line: the series a reader switched off at the legend. render draws the rest, each in the ink it has among all, and the legend keeps every series, the hidden ones empty.
NAMED_SCHEMAconstantJSON SchemaThe plain form of data a chart can take: { named: [{ label, value, series?, group? }], unit?, observations?: { [concept name]: observations }, measure?: observations }.
OBSERVATIONS_SCHEMAconstantJSON SchemaA concept's observations as data declares them: { bonds?: number[] each strictly between 0 and 1, carried?: string[], landed?: string[] }, which the kernel makes into its L and S.
takesNamedfunctiontakesNamed(def): booleanWhether a chart reads named values: series, parts, stages, steps, a gauge, countries or cities.
fromNamedfunctionfromNamed(def, named, about?: { unit?; label? }, observations?, labels?, options?): dataNamed values read in a chart's own shape: several series pivoted, a gauge on a round scale, a map's labels found as regions of the set its options draw; a label it cannot place is named in the error. Their unit and name go to a chart that takes them, a lone series and a map's key named by the name. Observations handed with them go to each concept by its name, and to the one measure.
regionKeysfunctionregionKeys(def, options): RegionKeysHow a chart of regions reads its keys in the set its options draw: what a region is called, a name or code resolved to its id, an id's name, and the words refusing a label it cannot place.
namedConceptsfunctionnamedConcepts(def): "series" | "parts" | "groups" | "measure" | nullWhat a chart's concepts are when it reads named values, which observations handed with them are keyed by: its series, its parts, its groups, or its one measure.
NamedObservationstype{ observations?: { [concept name]: Observations }; measure?: Observations }The observations that go with named values: each concept's by its name, and a chart of one measure's.
windowOffunctionwindowOf(def, data, categories, from, count): TableDataA window of a table's categories in the chart's order: its rows, its categories as the whole reading lays them (laid), and for a chart whose data run (a waterfall), the running total of the steps before it, summed exactly and written as decimal text ("48199.71").
fromTablefunctionfromTable(def, { table: TableRow[], unit?, observations?, measure? }, options?): dataTable rows read in a chart's own shape: every chart of the catalogue reads a table, the form a report, a spreadsheet or a platform's fields hand over. A chart of named values reads category, series and value; the rest read their own fields (x, y, size, target, bands, error, open, high, low, close, volume, start, end, progress, to, rain, wind, code), and a row set without a field a chart needs is refused, naming it.
tableFieldsfunctiontableFields(def): { needs: TableField[]; takes: TableField[] }The fields a chart reads from a table beyond the category: those it needs and those it takes when given.
tableSchemafunctiontableSchema(def): object | nullThe JSON Schema of a chart's data as a table, one row to each key: the category and the fields it needs on every row, those it takes where given, each row's place in the host's order, the unit, the order and observations by name; none for a chart that reads no table. chartSchema offers it beside the chart's own shape.
TableRowtype{ category?; series?; to?; value?; x?; y?; size?; target?; bands?; error?; open?; high?; low?; close?; volume?; start?; end?; progress?; rain?; wind?; code?; across?: string; longitude?: number; latitude?: number; toLongitude?: number; toLatitude?: number; order?: number }A table row, by field.
TableFieldtypekeyof TableRowA field a table row can carry.
TableDatatype{ table: TableRow[]; unit?; unitOne?: string; label?: string; observations?; measure?; order?: TableOrder; times?: string; before?: number | string; laid?: string[] }The table form of a chart's data: its rows, their unit and its singular, and their name as the host names its measure (a map's key, a lone series and an amount's column take it).
normalisefunctionnormalise(def, data, options?): dataData as handed in: the named form and the table form read in the chart's shape, anything else as it is. render calls it, so every chart that can takes named values.
linkedfunctionlinked(set: LinkedSet): LinkedReadCharts over one table, each a filter for the others: each view's own data and options, ready to draw. Every field's values in one order; a view sees every choice but its own; a hidden value through hide where the view inks it, else its rows dropped; grouped and summed or counted; an emptied category a gap or 0; a view the chart would refuse shown as the empty view's words.
choosefunctionchoose(set: LinkedSet, view: number, key: HitKey | null, add: boolean): LinkedSetA press on a linked view's datum, or on nothing: a plain press makes the value its field's one choice or lets the one chosen go; with Ctrl, Cmd or Shift it adds the value or takes it away.
chosenAfterfunctionchosenAfter(now: readonly string[], key: HitKey | null, add: boolean): readonly string[]The values chosen after a press on a datum, or on nothing, given those chosen now: the law choose applies to a linked view's field, for a chart that stands alone. A plain press makes the value the one choice or lets the one chosen go; with Ctrl, Cmd or Shift it adds the value or takes it away; a press on nothing lets every choice go.
hideValuefunctionhideValue(set: LinkedSet, field: string, value: string): LinkedSetA legend press in a linked set: the value hidden in every view, or shown again; the last value shown stays shown, and hiding a chosen value lets it go.
clearfunctionclear(set: LinkedSet): LinkedSetEvery choice of a linked set let go; hidden values stay hidden.
leavingfunctionleaving(set: LinkedSet): readonly LinkedRow[]The rows a linked set's choices and hidden values leave: what a host totals.
LINKED_CHARTSconstantreadonly string[]The ten charts a linked view can be: each sets a datum's key and reads named values (Line, Area, Streamgraph, Column, Bar, Waterfall, Radar, Donut, Treemap, Funnel).
LINKED_SCHEMAconstantJSON SchemaThe JSON Schema of a linked set: its table, its views, and what is chosen and hidden by field.

Catalogue · 35

The charts, their ladder and the options they share.

The Catalogue area of the chart API.
NameSignatureWhat it does
PICTUREconstantreadonly OptionDef[]The options every picture takes, whatever its chart declares: none in the free or the paid package, whose edition decides the credit; in the site's own build, hueCredit, the credit's toggle, on by default. A door holds their kinds as it holds a chart's own, and chartSchema lists them.
CATALOGUEconstantreadonly ChartDef[]The catalogue: Hue Charts' charts and their presets, then the components of Hue Web Components.
RUNS_ONconstantreadonly RunsOn[]Where entries run, the web first, then each app that carries a part: web, powerbi.
runsOnfunctionrunsOn(def: ChartDef): readonly RunsOn[]Where an entry runs: on the web always; in Power BI too where it reads a table and is a chart or a view of <hue-map>.
TABLE_VIEWSconstantreadonly ChartDef[]What a host that hands over tables alone carries, the Power BI visual: the catalogue's entries that run in Power BI.
QUESTIONSconstantreadonly { id; name; asks }[]The six questions the catalogue's charts answer, in its order: change, compare, part of a whole, distribution, relationship, against a target.
CHARTSconstantreadonly ChartDef[]The catalogue's thirty-three charts, by the question each answers.
PRESETSconstantreadonly ChartDef[]The presets of the catalogue's charts, each drawn by its chart's module (presetOf): the live feed, the period, error bars, the streamgraph, the population pyramid, the punch card.
HUE_CHARTSconstantreadonly ChartDef[]Hue Charts: the catalogue's charts and their presets.
COMPONENTSconstantreadonly ChartDef[]The components of Hue Web Components: maps, calendars, lanes, the weather, and the clocks and timers, each with its element.
HUE_RECIPEconstantChartDef<RecipeSpec>Hue Charts' own recipe, in a recipe's own axes: the charts' registry draws a recipe so, where a host draws no component.
HUE_RECIPESconstantreadonly ChartDef<RecipeSpec>[]The house recipes in a recipe's own axes, Hue Charts' own: two of them the catalogue lists as charts.
COMPONENT_RECIPESconstantreadonly ChartDef<RecipeSpec>[]The components' house recipes: the map's, drawn in its forms.
RECIPE_FORMSconstantreadonly RecipeForm[]The forms the components lend a recipe beyond its own axes: the map's plane and map; the catalogue draws your own recipe in them.
chartsAskingfunctionchartsAsking(q: Question): readonly ChartDef[]The catalogue's charts that answer a question, in its order.
KERNEL_CHARTSconstantreadonly ChartDef[]The kernel's own charts, the columns of a chamber and the series of a loop, found by slug beside the catalogue. Their samples are a recorded run of the core, not a measurement.
depthChartconstantChartDef<BookData>An order book's depth (market-depth): each side's size summed outward from the spread, drawn as steps, the bids in the rise's ink and the asks in the fall's, the mid price marked.
chamberColumnsconstantChartDef<ChamberData>The columns of a chamber (chamber): each concept's L as a column in its own colour, its height L, and its S beside it as a grey mark. Its sample is a recorded run of the core, not a measurement.
loopSeriesconstantChartDef<LoopData>The series of a loop (loop): each concept's L turn by turn, a line in its own colour that only climbs toward the top line it never reaches. Its sample is a recorded run of the core, not a measurement.
OPTconstantRecord<string, OptionDef>The options most charts share: the header (title, context, the headline figure as written or worked out by a rule the chart answers, and its delta), axes and their titles, grid, the series' names and key, the stripes (every series in its pattern, for print), value labels, and how a series' line goes (curve: smooth, straight or in steps).
CARTESIANconstantreadonly OptionDef[]The option set of a chart with two axes and its series named.
CALENDAR_CELL_LEASTconstantnumberThe least a Calendar's day is drawn, 2 px each way: a calendar its room cannot give this is refused, naming the height or width it needs, never drawn past its canvas.
CALENDAR_MARKSconstantreadonly ["bar", "dot", "tint", "none"]The ways a Calendar shows a day's value: a bar along the cell's foot, a dot for presence, the cell tinted, or the number alone (DESIGN-DATE-TIME §4).
PAGE_GAPconstantnumberThe gap between a Calendar's month pages, 12 px.
calendarChartconstantChartDef<CalendarData>The Calendar: a month of days, a row to each week it spans, each day's cell tinted by its value's step of the sequential scale (or a bar, a dot, or the date alone), a day with no record outlined, today ringed by the zone's clock and a selected day filled; several months as pages; its weeks from the reader's locale's first day unless one is named; the keys a week a row (DESIGN-DATE-TIME §4).
timelineChartconstantChartDef<TimelineData>The Timeline: events and milestones on a date axis, one lane a group, a moment a mark and a stretch a bar, each named above its lane or below where above would touch; a today line.
statusChartconstantChartDef<StatusData>The Status timeline: each row's state over time, a lane a row, each stretch a band from its start to its end in its state's ink, the states the legend, a gap left as ground; overlaps in a row refused; the candles' range; a today line; one zone (DESIGN-DATE-TIME §5).
punchcardChartconstantChartDef<PunchData>The Punch card: when things happen, the weekdays down and the hours across, each cell a dot whose area is its count or the cell tinted with the ramp; instants binned in one zone, named, or cells as given (DESIGN-DATE-TIME §5).
hourRingChartconstantChartDef<HourData>The Hour ring: when things happen round the day, twenty-four sectors from midnight at the top, clockwise, each standing on an inner circle a third of the ring's radius, its area beyond it its hour's count, or every sector whole and tinted with the ramp; instants binned in one zone, named, or hours as given; a chart of a table, never clocked (DESIGN-CLOCKS §5).
TIMELINE_RANGESconstantreadonly ["All", "1M", "3M", "6M", "YTD", "1Y"]The ranges a timeline shows, as the candles' are.
DATE_RANGESconstantreadonly ["All", "1M", "3M", "6M", "YTD", "1Y"]The ranges a chart along dates shows, as the candles' are: every date, the months back from the last, or the year to date (time.ts).
PUNCH_CELL_LEASTconstantnumberThe least a punch card's hour is drawn, in px each way; less is refused, naming the size that draws it.
periodChartconstantChartDef<CalendarData>The Period chart: a week, month, quarter or year through its last date against the period before it or the same period a year earlier, the comparison thinner and dashed, every figure said to the same day of both, a day the earlier period lacks with no partner (DESIGN-DATE-TIME §5).
DAYS_TABLEconstantTableReadingThe table door of a chart of days, the Calendar's and the Period chart's: a row a date (its category, each date once) and its value.
DRAWABLEconstantreadonly ChartDef[]Every chart the library can draw by its slug: the catalogue, this library's own beyond it, the house recipes, your own recipe and the kernel's own; each a paid feature with its own date.

Theme and ink · 78

Where every colour comes from: a concept on the cycle, read out, in sRGB or Display P3; and the named palettes a house style can ask for.

The Theme and ink area of the chart API.
NameSignatureWhat it does
seatOffunctionseatOf(t: Look, i: number, n: number): numberWhere series i of n sits: a seat on one odd ring about the theme's start, its source holding none, up to eight series; past eight, on two rings of nine places, the second turned half a seat; series 2k and 2k + 1 partners, mirrored about their ring's source.
mirrorAboutfunctionmirrorAbout(p: number, axis: number): numberThe mirror of a position about the line through an axis: the kernel's reflection through the zero point, turned to the axis; an involution fixing the axis and its antipode.
divergingfunctiondiverging(t: Look, v: number, reversed?: boolean): RgbA value in [−1, 1] on the diverging scale: a red-orange against a purple or a blue, the pair `divergingPair` finds for the theme's start, the red-orange above the midpoint (below where reversed), |v| from 0.3 drawn as the renderer's lightness away from the ground at `divergingShare`, and under 0.3 on the straight line in OKLab to the ground itself, the middle; under the P3 read-out the sRGB inks carried, the same colour.
divergingPairfunctiondivergingPair(t: Look): DivergingPairThe theme's diverging pair: of the pairs that pass the four conditions on the drawn bytes (DIVERGING_PAIRS), the one nearest the theme's partners by the least sum of moves, then the higher balance, then the lower positive ring; found once a start.
divergingSharefunctiondivergingShare(t: Look): numberThe chroma share the diverging scale is drawn at: the theme's, or its pair's least passing share where the theme's is below it (a move `themeForChart` lists and every host says); a palette or the HSL read-out is never held.
carriedP3functioncarriedP3(rgb: Rgb): RgbAn sRGB ink carried into Display P3 from its bytes: rounded to 8 bits a channel, then carried, the same colour.
DIVERGING_REVERSEDconstantstringThe Scale option's third choice on the Heatmap and the Calendar, "diverging, reversed": the diverging scale with the red-orange below the midpoint, offered only where it acts.
divergesByfunctiondivergesBy(o: Options): booleanWhether a chart's options draw the diverging scale, either way round: a chart's `diverges`.
groundForfunctiongroundFor(on: Rgb, space?): "dark" | "light"The ground a label set on a mark of this ink, in its space, reads against: the one whose value ink contrasts more with the mark, so the label departs from the mark and not the page.
readfunctionread(t: Look, position: number, l: number, s: number): RgbAn observed concept read out in the theme: at its position, its own L and its S, at the theme's chroma share: how the kernel's own charts, which draw observation, draw.
statedfunctionstated(t: Look, position: number, lightness: number): RgbA concept of a chart of values read out in the theme: its position at the renderer's stated lightness, its L unread.
seriesLightnessfunctionseriesLightness(t: Look, i: number, n: number): numberThe lightness the renderer draws series i of n at: the theme's, stepped by its light steps when it has them.
stepLightnessfunctionstepLightness(L: number, k: number): numberA lightness a step lighter (k > 1) or darker (k < 1): 1 − (1 − L)^k.
OBSERVATION_GROUNDconstantstringThe ground observation is drawn on in every theme: a surface that draws observation keeps its dark; a light page is chrome. The site's --observation-ground token is this.
LIGHTNESSconstant{ dark: number; light: number }The lightness the charts draw their series at by default, the renderer's own choice, on each ground.
CHROMAconstantnumberThe share of the gamut's chroma the charts use by default, the renderer's own choice.
STARTconstantnumberWhere the series start on the cycle by default, in radians, the renderer's own choice.
groundOffunctiongroundOf(def, theme, data?, options?): "dark" | "light"The ground a chart stands on: dark, in every theme, for a picture that draws observation; the theme's for a chart of values, a value scale among them.
drawsObservationfunctiondrawsObservation(def, data?, options?): booleanWhether a chart drawn from this data draws observation: the kernel's own two always, any other chart when its data states observations, for its inks then read out an S.
conceptOffunctionconceptOf(t: Look, i: number, n: number): PlacedThe concept series i of n stands for: at its seat on the ring, with the L and S its data's observations make of it; no L claimed where it declares none.
observedAtfunctionobservedAt(t: Look, i: number, n: number): Declared | undefinedWhat concept i of n holds, its L and S, made from the observations the chart's data declares for it; undefined where it declares none.
measureObservedfunctionmeasureObserved(t: Look): Declared | undefinedWhat a chart of one concept, its one measure, holds, when its data declares observations for it.
declaredObservationsfunctiondeclaredObservations(o: Observations): DeclaredWhat a concept's declared observations make of it: every bond checked before any lighten and refused by name (crisp-bond, malformed-bond), a declaration with neither a bond nor a carried content refused (no-observations), never clamped; L by Colour.lighten of each bond times the lighten rate, in order, and S by the kernel's saturation of the bonds' disagreement and the unaccounted share.
oklchReadOutconstantReadOutThe OKLCH read-out as encoded sRGB: a position, a lightness and a share of the gamut's chroma to a colour.
p3ReadOutconstantReadOutThe OKLCH read-out as encoded Display P3.
hslReadOutconstantReadOutThe HSL read-out, the key, as encoded sRGB.
tintfunctiontint(t: Look, strength: number, i?: number, n?: number): RgbThe fill of series i of n: its ink where its concept holds observations, an observed lightness never moved; else its hue at the renderer's lightness for the strength.
fillOffunctionfillOf(t: Look, rgb: Rgb, amount: number, observed: boolean): RgbAn ink moved toward its ground for a fill beside its line; the ink itself where it reads out observations.
recordConceptsfunctionrecordConcepts(key): ConceptsA chart whose concepts are records of its data under a key (its series, groups or parts), each named by its label: what hiding a series removes.
groupConceptsfunctiongroupConcepts(key, groupOf): ConceptsA chart whose concepts are the groups its records name, in the order they first appear, a record naming none in the group —: what hiding a group removes.
observationsOffunctionobservationsOf(records): (Observations | undefined)[]The observations of a chart's concepts that are records of its data (series, groups, parts), each its own, in order: what a chart's observations() hands back.
observationsByNamefunctionobservationsByName(names, of: Record | undefined): (Observations | undefined)[]The observations of a chart's concepts named in its data (groups, origins), each looked up by its name, in order.
inkfunctionink(t: Look, i: number, n: number): RgbThe colour of series i of n: the read-out of its concept; where its data declares observations, its own L and S, never a stated lightness; else at the renderer's lightness. Every series colour comes from here; a colour the author chose, and a named palette, are read as given, outside the read-out, and carry no S.
chosenOffunctionchosenOf(t: Look, i: number, n: number): Rgb | undefinedThe author's own colour for series i of n, by its place among all the chart's series, if the theme's chosen names one.
edgeInkfunctionedgeInk(t: Look, i: number, n: number): RgbThe lit edge's ink of series i of n, along a filled mark's value end: its lightness lit by the light law at EDGE_LIGHT, the same hue lighter; a series that reads out its observation keeps its ink.
edgeOfInkfunctionedgeOfInk(rgb: Rgb, space?: Space): RgbThe lit edge's ink of a mark in an ink that is no series' own (a tint, a colour brought): the ink at its own lightness lit.
litLightnessfunctionlitLightness(L: number): numberA stated lightness lit by the light law at EDGE_LIGHT: the lit edge's, lighter and never white.
shadefunctionshade(t: Look, v: number, i?: number, n?: number): RgbA value in [0, 1] of series i of n on a scale of values: its concept's hue at the renderer's lightness for the value, which stands further from the ground the larger it is; a value mark, reading out no S.
SEQ_STEPSconstantSEQ_STEPS: 5The steps a sequential scale's cells are inked in, seq-1 to seq-5: the shades at 0, ¼, ½, ¾ and 1.
seqStepfunctionseqStep(v: number): numberA value in [0, 1] at its nearest step of the sequential scale, so a cell's words stand in ink or card on it.
semanticfunctionsemantic(t: Look, which: "rise" | "fall" | "neither", measured?: boolean): RgbThe colour of a mark that means up, down or neither: rise and fall a pair of partners, each the mirror of the other about their circular mean; neither the pivot opposite the mean, belonging to neither side. A data mark of a chart of one measure is measured: the meaning is its hue, and where its data declares observations, the measure's S with L1's lightness.
greysfunctiongreys(t: Look): { axis; grid; gridMajor; rim; faint; chip; ink }The renderer's greys for a dark or light ground: the baseline's ink, the grid's, the mm grid's five-millimetre lines' and the chip's shares of ink over the ground, the ground between parts, the faint ink, and ink itself for a target's tick. They carry no depth.
greyStepfunctiongreyStep(t: Look, k: number, n: number): RgbGrey k of n, for bands that stand for no concept.
bandInkfunctionbandInk(t: Look, k: number, n: number): RgbBand k of n behind a measure, poor to good: band-1 to band-3 laid over the ground, and the steps between them where there are more or fewer.
countInkfunctioncountInk(t: Look, k: number): RgbA density's count step k, 0 to 4: count-1 to count-5 on the ground, count-1 standing 3:1 on the card and on the chip over it.
SHAPESconstantReadonly<Record<Shape, string>>The shapes a chart's marks take, by name: Crisp and Rounded. A theme's shape sets one; any shape takes any theme.
DEFAULT_SHAPEconstantShapeThe shape a host draws in where none is asked: Rounded. A theme made by hand names its own, crisp where it names none.
isShapefunctionisShape(v): v is ShapeWhether a value names a shape, as a setting, an attribute or an argument may give it; a report saved with a shape no longer offered reads as crisp.
COLOURconstant{ seed; page; card; line; grid; base; ink; muted; faint; chip; band1…3; series…; rise…; fall…; seq1…5 }The design system's colours (library/design-system/tokens.json) by name, per ground where the grounds differ.
FAMILYconstantstringThe face words are set in, and the families a page falls back to, as a stylesheet names them.
TYPEconstant{ headline; headlineNarrow; title; context; label; value; chipText; note; displaySmall; display; displayLarge }The type scale (tokens) by style: size in px, weight, line height as a share of the size, tracking in em.
SPACEconstant{ card; cardNarrow; header; chip; chipX; tick; foot; label; part }The space between parts (tokens), in px.
RADIUSconstant{ card; tooltip; bar; tile; cell; slice; chip }Corner radii (tokens), in px.
STROKEconstant{ line; edge; hairline; focus }Line weights (tokens), in px.
SIZEconstant{ point; scatter; chip; chipDot; candleBody; band; hole; keyRamp; handle }Mark sizes in px, and shares (tokens).
OPACITYconstant{ area; dim; pressed }Shares of an ink (tokens).
DURATIONconstant{ enter; morph; stagger }Motion's durations (tokens), in ms.
EASINGconstant{ enter; morph }Motion's curves (tokens), as CSS writes them.
SEEDconstantstringThe default seed, the Hue mark's zero point: series one stands at its hue in every chart a host gives no colour of its own.
seededStartfunctionseededStart(hex: string, n: number): numberThe start that sets series one of n at a colour's hue: the hue set back by series one's seat on the first ring, so series one is that hue at every n. A host's theme takes it for the seed.
EDGE_LIGHTconstantnumberThe light on a filled mark's lit edge, as optical depth: its ink lit by the light law (DESIGN-SYSTEM §2.5).
valueLightnessfunctionvalueLightness(t: Look, v: number): numberThe lightness a value in [0, 1] is drawn at on a scale of values: the renderer's own choice, a straight run away from its ground, lighter on a dark ground and darker on a light one. A scale of values is not observation, and this lightness claims none.
valueInkfunctionvalueInk(t: Look, v: number, at: number, lightness?: number): RgbThe ink of a value on a scale of values: the hue at a position at the renderer's lightness for the value, stated to the read-out; a value mark, reading out no S. Sequential and diverging scales, shades and lit faces are drawn here.
observedThemefunctionobservedTheme(t: Look): LookThe theme a picture that draws observation is drawn in: its dark ground and the kernel's read-out alone, every renderer's channel at its defaults (its start the seed's, set back by series one's seat among the concepts it holds), the same on every page, so no brand, high contrast, shape, pattern, named palette or chosen colour; render and drawFlat apply it.
settingsFromfunctionsettingsFrom(given: { mode?; readout?; palette?; shape?; brand?; high? }): ThemeSettingsThe settings a host read as text, each held to its choices: one reading of an element's attributes, a call's arguments or a pane for every host, high contrast (true or false) among them. One left out (undefined, null or empty) is the kernel's own; one that names none of its choices is refused (SettingsRefused).
isReadoutfunctionisReadout(v: unknown): v is "oklch" | "p3" | "hsl"Whether a value a host read names a read-out.
isPalettefunctionisPalette(v: unknown): v is PaletteNameWhether a value a host read names a palette.
PALETTE_NAMESconstantreadonly ["okabe-ito", "viridis", "cividis"]The named palettes, by name.
GROUNDconstant{ dark; light }: hexThe ground behind a chart.
askedInkfunctionaskedInk(theme, i, n): Rgb | undefinedThe colour a reader brought for series i of n, as given: a chosen colour or a named palette's; none for the kernel's own.
SettingsRefusedclassclass SettingsRefused extends RangeError { refused: string[] }A host's settings that name none of their choices (a mode, read-out, palette or shape misspelt), each named with its choices and what was given: refused by settingsFrom, never dropped.
OKABE_ITOconstantreadonly string[]The Okabe–Ito colour-blind-safe colours, without black.
VIRIDISconstantreadonly string[]Viridis at ten even steps.
CIVIDISconstantreadonly string[]Cividis at five even steps.
rampfunctionramp(name, v): RgbViridis or cividis at v in [0, 1], interpolated between its samples in Oklab.
paletteInkfunctionpaletteInk(name, i, n, mode): RgbSeries i of n in a named palette; a ramp leaves out the end that would sink into the ground.
paletteShadefunctionpaletteShade(name, v, i, n, on: Look | "dark" | "light"): RgbA value in [0, 1] in a named palette, more standing out more on either ground; Okabe–Ito's colour carried from the ground itself (a look's own, or the card's) toward full.
slottedfunctionslotted(theme, i, n): [i, n]Series i of n as it stands among all the series when some are hidden, so the drawn series keep their colours and patterns.

Scales and layout · 152

From values to pixels, and the room a chart makes for its text.

The Scales and layout area of the chart API.
NameSignatureWhat it does
linearfunctionlinear(lo, hi, a, b, target?, exact?): LinearA linear scale over nice ticks, from a value domain to a pixel range.
placedfunctionplaced(scale: Linear, a: number, b: number): LinearA scale placed on the pixel range [a, b], its domain, ticks and form kept, linear or log: a chart declares its scale's ticks as its lead's words before the plot is placed, then places the scale on it (DESIGN-SYSTEM §2.11).
bandfunctionband(n, a, b, pad?): Bandn equal bands across a pixel range, for categories.
widenedfunctionwidened(lo: number, hi: number): [number, number]A span with room in it: [lo, hi] where hi is above lo, else widened round its one value by a tenth each way (one each way about naught), as an axis widens it.
niceTicksfunctionniceTicks(lo, hi, target?, inside?): { lo; hi; step; ticks }Round tick values: a step of 1, 2, 2.5 or 5 times a power of ten, the least that holds the axis in at most target steps (four to six ticks at five), counting only the ticks inside the domain where the axis shows only those.
formatfunctionformat(v: number, step?: number): stringA number as a label writes it: k from ten thousand, M from a million, B from a billion, its thousands set apart ("9,620").
unitForfunctionunitFor(top: number, k?: number): readonly [number, string]The unit numbers up to top are written in, its divisor and suffix: B from a billion, M from a million, k from ten thousand (from k where asked): the one rule format, oneForm and tickForm read.
tickFormfunctiontickForm(ticks: readonly number[], step: number, k?: number): (v: number) => stringA scale's ticks in one form: every tick in the unit the largest takes, at the step as format writes it there, naught as 0 ("0", "2.5k", "5.0k", "7.5k", "10.0k").
oneFormfunctiononeForm(values: readonly number[], step?: number): (v: number) => stringOne number form for a chart's value labels: every value in the unit the largest takes ("0.5k" beside "42k"); under ten thousand, format as it is.
inFullfunctioninFull(v: number, step?: number): stringA number as a tip and a data table write it, in full: never in k, M or B, its thousands set apart, at the decimals format gives it in units of one (12,345.6 is "12,346"), so a mark labelled "12k" reads 12,346 when it is pointed at.
asGivenfunctionasGiven(v: number): stringA value written as it was given, to six decimals at most and no more than it has, rounded there in decimal: a time of 0.25 s is "0.25", never "0.3".
countedfunctioncounted(n: number): stringA whole count with its thousands set apart: 2000 is "2,000".
viewOffunctionviewOf(n: number, from: number, to: number): readonly [number, number]The categories a view from `from` to `to` shows of n, as first and last index, at least two: one reading for the chart and the host that windows it.
withUnitfunctionwithUnit(text: string, unit?: string): stringA value's words with its unit, one rule for every chart: a currency sign before, an angle's sign against it (12°C), every other unit after a space, a percentage's too (3.8 %).
SI_PREFIXESconstantreadonly (readonly [symbol: string, power: number])[]The SI prefixes a chart writes, a thousand apart from quecto to quetta, each its symbol and its power of ten; micro the micro sign (µ).
SiUnittype{ unit: string; power: number; per: string }A unit as SI writes it: its own unit, the power of ten its prefix gives, and what follows it over a solidus ("mm/s" is m at -3, then "/s").
SECONDconstantSiUnitThe second, as a time axis writes it.
siUnitOffunctionsiUnitOf(unit: string | undefined): SiUnit | undefinedA unit read as an SI unit and its prefix ("mV", "uV", "kHz", "mm/s"); none where SI does not prefix it ("kg", "cm", "km²", "dB", "%"), which is written as given.
siTicksfunctionsiTicks(ticks: readonly number[], step: number, u: SiUnit): (v: number) => stringA scale's ticks in an SI unit: every tick in the prefix the largest takes, at the step's decimals there ("0 µV", "50 µV", "100 µV"); no power of ten beside the axis.
siValuefunctionsiValue(v: number, u: SiUnit, figures?: number): stringA value in an SI unit as a measurement writes it: in its own prefix, to four significant figures with their naughts kept ("12.50 µV", "1.235 kHz", "800.0 ms").
siFullfunctionsiFull(v: number | Decimal, u: SiUnit): stringA value in an SI unit written in full, as a tip and a table write it: in the prefix its own size takes, every figure it has ("1.2345678 kHz", "12.5 µV").
siLabelsfunctionsiLabels(values: readonly number[], u: SiUnit): (v: number) => stringOne form for a chart's value labels in an SI unit: every value in the prefix the largest takes, its figure as oneForm writes one ("12 µV", "4.5 µV", "0.25 µV").
secondsStepfunctionsecondsStep(raw: number): numberThe least step a time axis takes at or past raw seconds: 1, 2 and 5 of a power of ten under a second; 1, 2, 5, 10, 15 and 30 s and min, 1, 2, 3, 6 and 12 h from one; days past a day.
secondsWordsfunctionsecondsWords(ticks: readonly number[], step: number): (t: number) => stringA time axis's words: under a minute in SI seconds ("250 ms", "1.5 s"), from one in days, hours, minutes and seconds ("1 min 15 s", "1 h 30 min"), never with colons, so an elapsed time is never read as a clock's.
secondsTicksfunctionsecondsTicks(lo: number, hi: number, most?: number): { step: number; ticks: readonly number[]; write: (t: number) => string }A time axis's ticks over a view in seconds, its ends kept: each multiple inside it of the least step that sets at most `most` across it, and their words.
clockSecondsOffunctionclockSecondsOf(iso: string | undefined): number | undefinedThe seconds after midnight on a record's own clock at its start, from the time of day its ISO 8601 text writes, any offset not applied; none where it writes no time of day.
clockTicksfunctionclockTicks(lo: number, hi: number, most?: number): { step: number; ticks: readonly number[]; write: (c: number) => string }A clock's ticks over a view in seconds after a midnight, at the time axis's steps, each written as its time of day ("14:02:10"), its seconds to the places a step under a second takes; past midnight, the next day's.
valueSaidfunctionvalueSaid(v: unknown): stringA value as a refusal says it: missing, a list or an object by what it is, a number as written, text in quotes and said as text.
manySaidfunctionmanySaid(n: number, one: string): stringHow many, said: "1 value", "2 values".
WORD_STYLEconstantRecord<WordRole, { size; weight; line; tracking }>Each role's style on the type scale (tokens): a title 15/600, a context 12.5/400, the headline figure 26/700 (22/700 narrow), a label 11.5/500, a value 12/600, a chip 12/500, a note 11/400, and a clock's display figures 40, 64 and 96/600.
wordHeightfunctionwordHeight(role?: WordRole): numberThe height a word's box stands in its role's style: the face's ascender and descender at its size.
wordCSSfunctionwordCSS(role: WordRole, px?: string): WordCSSA role's words in CSS (the face, the role's size, weight and tracking, contextual alternates off), so a host's words over the picture stand where the picture measured them; px, a CSS length, where the picture is shown scaled.
WordCSStype{ fontFamily; fontSize; fontWeight; letterSpacing; fontFeatureSettings; lineHeight }A word's style as a host's page sets it over the picture.
wordPlacedfunctionwordPlaced(label): { set; x; baseline }A word placed as a page sets it: set in its role's style, its pen's start by its align and its baseline by its base on the face's ascender and descender. The PNG, the PDF and the SVG place every word by it.
wordWidthfunctionwordWidth(s: string, role?: WordRole): numberThe width words take set in their role's style (WORD_STYLE), as the face measures it: its advances and kerning, a number's figures tabular, each run ending at a 64th of a pixel as a browser lays it. Every word is measured so where it is set.
wrapTextfunctionwrapText(text: string, width: number, role?: WordRole): string[]A text broken at its spaces into lines no wider than width, as wordWidth measures at the role's size; a word wider stands on a line of its own. Every chart's words are broken so (wrappedSaid).
wrappedSaidfunctionwrappedSaid(said: Said[], room: number, role?: "axis" | "title"): SaidLine[]A chart's words broken at their spaces to a room across: the words whole on the first line of those broken over several, a finding raised on its first, each line after marked as carrying them on.
saidLinesfunctionsaidLines(said: Said[], at: WordsAt): SaidLine[]A chart's words as they are set where they stand: broken to the room from x to the canvas's edge (or as given); a word wider than the room refused, naming the width that sets the widest, so words are never drawn past the canvas.
cutToWidthfunctioncutToWidth(text, width, role?): { shown; cut }A text fitted to a width in its role's style: whole where it fits, else its longest start that fits with an ellipsis, and whether it was cut.
fittedTicksfunctionfittedTicks(scale, fmt, room): { ticks; write }A value axis's ticks fitted to their column: the first form that fits, as given, the thousands suffixed from one thousand, every other tick, then the exponent form; no tick cut. The column is as wide as the ticks declared up to a quarter of the canvas (DESIGN-SYSTEM §2.11), so a form past the first is taken only past that.
SaidWeighttype"fault" | "reading" | "note"The weight of a word in the said strip: a fault in the data the host must see first, then what the reading rests on, then the chart's notes.
Familytype"cartesian" | "across" | "grid" | "radial" | "map" | "fill" | "board" | "calendar" | "strip"A chart's family: which slots its plot has round it; every chart of a family at a size shares one layout.
FAMILIESconstantreadonly Family[]The families, in the design's order.
LayoutAskstype{ gutter?: number; chipRows?: number; measurementLines?: number; lead?: number; lead2?: number; end?: number; trail?: number; overview?; title?; context?; figure?: number; delta?; caption?; yTitle?; xTitle?; y2Title?; centre?; classStrip?; head?; weeks?; scaleless?; card?; around?; credit?: number }What a layout is asked for beyond its family: the host's bands (a title, a caption, axis titles) and the chart's own structure (the end gutter's width or the chips' rows, the lead, a second value axis, a strip chart's end column and overview, the room a word centred on the plot's right end takes past the padding, a centre column, a class legend's strip, a head row, a week column, no tick row where no scale is written; the card drawn round it, and the mark row under the size it reaches down over).
Layouttype{ family; class; plot; room; card?; header?; title?; context?; figure?; gutter?; chips?; measurements?; said?; caption?; value?; value2?; category?; row?; end?; trail?; overview?; tickRow?; head?; month?; weekday?; weeks?; yTitle?; xTitle?; y2Title?; classStrip? }A layout: the plot box and every slot's box, each present where the family or the asks reserve it: the end gutter on the right where the series are named at their marks, the chips' row under the plot where they are in chips or a key.
layoutOffunctionlayoutOf(family, size, asks?): LayoutThe layout of a family at a size under the host's asks: a pure function of the three, so the same size gives the same pixels.
asksOffunctionasksOf(options): LayoutAsksThe asks a host makes through a chart's options: a title, a caption, the axis titles, the legend's place.
sizeClassfunctionsizeClass(width): SizeClassThe size class of a width: wide from 640 px, mid from 400, narrow below.
SizeClasstype"wide" | "mid" | "narrow"A size class, by the width asked; the slots in characters change by class, the bands do not.
cardPadfunctioncardPad(width): numberThe card's padding at a width: SPACE.card, SPACE.cardNarrow below 400 px; inside the card, or where there is none. In px (tokens.ts).
Roomtype{ top; right; bottom; left }Room each side, in px.
CARD_ROOMconstantCARD_ROOM: RoomThe room the card leaves round it for its shadow, each side: a deviation of each layer's blur past its offset, the most of either ground's; past it the shadow's tail is under a pixel's step (tokens.ts).
NO_ROOMconstantNO_ROOM: RoomNo room round the chart: the card off (tokens.ts).
ShadowLayertype{ x: number; y: number; blur: number; rgb: Rgb; a: number }A layer of a shadow: its offset across and down, its blur as CSS states it, its ink and its share.
shadowLayersfunctionshadowLayers(css: string): ShadowLayer[]A shadow as CSS writes it (the design system's SHADOW), read into its layers; a layer written otherwise refused, named.
innerWidthfunctioninnerWidth(width, card: boolean): numberThe width a chart's words and marks are laid in at a width: inside the card's padding, and its shadow's room where the card is drawn (layout.ts).
SAID_STRIPconstantSAID_STRIP: 15The said strip at the foot, one line, always. In px (tokens.ts).
CAPTION_STRIPconstantCAPTION_STRIP: 15The caption strip, one line, when the host gives a caption. In px (tokens.ts).
AXIS_TITLE_BANDconstantAXIS_TITLE_BAND: 18An axis title's band, when a title is given. In px (tokens.ts).
HEADER_LINEconstant{ title: 20; context: 18; headline: 29; headlineNarrow: 25 }The header's lines: the title's, the context's under it, and the headline figure's, wide and narrow; the header as tall as its taller side, the header's space under it. In px (tokens.ts).
TICK_ROWconstantTICK_ROW: 23The row of tick words under the plot: the tick gap and a label's line. In px (tokens.ts).
CLASS_STRIPconstantCLASS_STRIP: 36The height of a class legend's strip: its label above, its swatches, its edges' words below. In px (tokens.ts).
TICK_GAPconstantTICK_GAP: 8A tick word's distance from the plot (SPACE.tick). In px (tokens.ts).
GUTTER_MOSTconstantGUTTER_MOST: 240The most the end gutter takes, whatever the canvas: past it the names at the marks wrap. In px (tokens.ts).
GUTTER_MOST_SHAREconstantGUTTER_MOST_SHARE: 1 / 3The most of the canvas's width the end gutter takes, as a share (tokens.ts).
NAME_LINEconstantNAME_LINE: 16A line of a name at the marks, the value role's: a name wrapped to the gutter steps down by this. In px (tokens.ts).
NAME_APARTconstantNAME_APART: 15The least from one name at the marks to the next, middle to middle: the design's 14 or the name's own height where that is more. In px (tokens.ts).
CHIPconstant{ height: 28; dot: 8; start: 10; end: 12; gap: 6 }A chip's figures: its height, its dot, its padding at the dot's side and at its end, the dot to its words and chip to chip. In px (tokens.ts).
KEY_MARKconstantKEY_MARK: 10A key item's mark: a square this wide, its corners RADIUS.keyMark; a tick this tall. In px (tokens.ts).
chipWidthfunctionchipWidth(words: number, mark?: number): numberA chip's width for its words' width: its padding, its mark (the dot, or a key's mark as wide as given), the gap and the words (tokens.ts).
MARK_ROWconstantMARK_ROW: 23The frame's mark row at its foot, the foot's room and a line, where the Hue Charts credit stands in a picture the package credits (credited). In px (tokens.ts).
LeadWordtypestring | { text: string; role: WordRole }A word of the lead: a tick's or a name's, measured at the tick size, or one a chart sets there in another role.
tickWordsfunctiontickWords(scale: Linear, write?: (v: number) => string): string[]A scale's ticks as its value axis writes them, by write or at the scale's step: the words of a value column.
axisLeadfunctionaxisLead(options, words): readonly LeadWord[]The lead's words where the lead is the chart's y axis: none where the host turns the axis off, so the column collapses (DESIGN-SYSTEM §2.8, §5).
rowColumnWidthfunctionrowColumnWidth(rows: readonly string[], groups: readonly string[], width: number): { width; outer }A strip chart's row column for its names: its rows' names against its inner edge and, where its groups stand together, their names in its outer part; at most a quarter of the canvas, the outer part giving way first.
rowsLaidfunctionrowsLaid(top: number, foot: number, groups: readonly number[], first?: number, least?: number): RowsLaidA strip chart's rows laid in its plot: as many as fit at size-row each from the first asked, groups that stand together space-group apart, the room shared evenly, each its baseline at its middle; a plot that holds no row refused by name.
standTogetherfunctionstandTogether(groups: readonly number[]): booleanWhether a strip chart's groups stand together: every group's rows run unbroken.
leadColumnWidthfunctionleadColumnWidth(words: readonly LeadWord[], width: number): numberThe lead's width for its words: its widest word, the tick gap and a pixel, rounded up, at most a quarter of the canvas (LEAD_COLUMN_MOST_SHARE); no words, none (DESIGN-SYSTEM §2.11).
gutterWidthfunctiongutterWidth(widest: number, width: number): numberThe end gutter's width for its widest name: the tick gap, the name and a pixel, at most a third of the canvas and GUTTER_MOST, past which the names wrap.
nameLinesfunctionnameLines(label: string, room: number, role: WordRole): { lines: string[]; cut: boolean }A name in lines no wider than its room, broken at its spaces; a word wider than the room cut with an ellipsis.
nameHeightfunctionnameHeight(lines: number): numberThe height a name of so many lines takes at the marks: NAME_APART and a NAME_LINE for each past the first.
endsApartfunctionendsApart(want: { y; h }[], y0: number, y1: number): (number | undefined)[]Names at their marks' ends held apart: each as near its end as the rest allow (the least sum of squared moves, pooling the names that would cross), in their order, none crossing, between y0 and y1; where the height cannot hold them, the last given gives way. The middle of each first line.
ChipPlacedtype{ x: number; y: number; w: number; it: I; shown: string; cut: boolean }A chip placed: its corner, its width, the entry, its words as shown and whether they were cut.
chipRowsfunctionchipRows(items: { label: string; said?: string; across?: number; steps?: unknown[]; from?: string }[], width: number): numberThe rows a chips' row so wide needs to hold every chip at its whole words and its mark's width.
markAcrossfunctionmarkAcross(it: { across?: number; disc?: number; steps?: unknown[]; from?: string; words?: true }): numberA chip's mark across: its dot, or a key's scale bar's time across or a sized point's disc where that is wider; a scale's steps, the first step's words and a swatch a step; none for a key item of words alone.
STEP_SWATCHconstantSTEP_SWATCH: 20A count step's swatch in a key's row of them, twice a key's mark wide, the card a part's space between them. In px.
chipsHeightfunctionchipsHeight(rows: number): numberThe chips' row's height for its rows: a chip's height each, CHIP.gap between.
chipsAcrossfunctionchipsAcross(items, slot: Box): ChipPlaced<I>[]The chips across their row: left to right, each its whole name, to a next row where the next would pass the end; a name wider than the row cut to it.
markRoomfunctionmarkRoom(size): SizeThe room a chart is laid out in above the frame's mark row: the size asked less MARK_ROW, carrying the row as the room round it.
MONTH_BANDconstantMONTH_BAND: 27A calendar page's month band at its head, the chart's own: the month and year centred in the title font (DESIGN-DATE-TIME §4). In px (tokens.ts).
WEEKDAY_ROWconstantWEEKDAY_ROW: 18A calendar page's weekday row under its month band: the seven names over their columns. In px (tokens.ts).
WEEK_COLUMNconstantWEEK_COLUMN: 24The week column down a calendar's left side, where week numbers are asked. In px (tokens.ts).
PAGE_LEASTconstantPAGE_LEAST: 168The least a calendar page stands wide for a second page to stand beside it: seven cells of 24 px (tokens.ts).
CELL_GAPconstantCELL_GAP: 2The gap between a calendar's day cells, in px (tokens.ts).
DAY_RINGconstantDAY_RING: 22The ring round today's number in a calendar, its diameter in px (tokens.ts).
DAY_DOTconstantDAY_DOT: 8The dot under a day's number in a calendar, for presence, its diameter in px (tokens.ts).
DAY_BARconstantDAY_BAR: 3The bar along a calendar day's foot, its height in px (tokens.ts).
LEAD_COLUMN_MOST_SHAREconstantLEAD_COLUMN_MOST_SHARE: 1 / 4The most of the canvas's width the lead (and a second value column) takes, as a share: past it a value's ticks take a shorter form and a name is cut, carried whole (tokens.ts).
wordsAtfunctionwordsAt(said: Said[], at: WordsAt): Label[]A chart's words set as labels, one shared way: broken and refused as saidLines, a line a step down from y, or up to y, at their start or their end. Every chart's words of its reading are set through it (Stage.words), and the stage's words above the plot.
spacedfunctionspaced(run: Label[], along: "x" | "y", stands?: (box) => boolean): Label[]A scale's words along one line, every k-th kept for the least k that holds each clear of the next, and of those each where it stands clear of the words already set: a scale's numbers or names never set over each other however narrow it is drawn; the grid lines they name stay every one.
APARTconstant"series told apart by pattern"What a picture says in its said strip where its series' inks stand closer than the separation mark under any vision and a series is drawn in its pattern, neither its name nor its place telling it.
PLACEDconstant"each series in its own place in every group, in the chips' order"What a picture says in its said strip where every series keeps its place in every group, the place its cue (grouped columns): for a reader of the data table.
saidOffunctionsaidOf(d: { labels: Label[]; fitted?: Fitted[] }): string[]A picture's words as it says them, each whole however its lines are set: what a reader, a host or a test reads of it.
charsOffunctioncharsOf(lo: number, hi: number): numberThe widest tick label over a domain, in characters.
extentfunctionextent(values: number[], withZero?: boolean): [number, number]The smallest and largest value, including zero unless told otherwise.
barDomainfunctionbarDomain(d: SeriesData, stack: boolean): [number, number]The value domain of bars, stacked or side by side.
SAMPLES_CONTRACTconstantContractThe contract groups of samples are held to at the door: each group a label, its numbers, a key to each and its observations where given (the Histogram's and the Box plot's data).
samplesTablefunctionsamplesTable(name: string): TableReadingThe table door of groups of samples for the chart named: a row a sample, its value; its series its group ("Value" where none).
stackedfunctionstacked(values): { base, lo, hi }Values stacked in their order, each standing where the ones of its sign before it end (a positive on the positives, a negative under the negatives), a gap nowhere: each one's base, and the stack's reach below naught and above it.
legendForfunctionlegendFor(t: Look, labels: readonly string[], own?: (label, i) => Partial<LegendItem>): LegendItem[]A legend's entries, each label in the ink of its place among them, and what is each one's own where a chart gives it: hidden, the words its chip says. legendOf is it on series data.
legendOffunctionlegendOf(d: SeriesData, t: Look): LegendItem[]Legend entries for series data, each in its series' ink.
RoomRefusedclassnew RoomRefused(lead, side, bound, fewer?); at(n, side?): RoomRefused; both(n, m): RoomRefused; none(upTo): RoomRefusedA picture refused for want of room along one side (fills too thin to edge meeting under 3:1, a line too short for its dash), the drawing's estimate given where it has one; drawFlat finds the least size from the one asked that draws the picture, by drawing it, and names that, the same from whatever size it was refused at, where one up to sixteen times the side asked draws: one side, or, where only both grown draw it, both; past that it names no size, and says none up to there draws it.
Stageclassnew Stage(size, options, look, { family, legend?, telling?, chipped?, placed?, lead?, lead2?, trail?, centre?, classStrip?, head?, weeks?, scaleless?, measurements?: Measurement[] | ((plot: Box) => Measurement[]), rows?, end?, sense?, keyed?: LegendItem[] }); layout: Layout; box: Box; valueAxis(side, scale, fmt?, pane?); numericAxis(scale, how?); panes(laid); rows(laid, read); endValues(texts); categoryAxis(side, names, band); handle(h); physicalScale(pxPerMm); traced(waveform, trace); wanted(want); rules(baseline?: { axis, at } | { axis, at }[] | boolean); ticks(run, along); word(...labels); value(x, y, text); clear(label): boolean; clearFirst(...places): Label | undefined; name(cx, cy, at, text): boolean; words(said, at); wordsClear(said, at, sides, lead, fewer): number; said(words, weight?); attribution(text); ends(at); seriesNamed(k, ...places): boolean; partNamed(k, at, under?): boolean; placeNamed(k, at): boolean; classLegend(inks, edges, label, at); series(i, n): Rgb; surface(k, surface); furnish(part); furnished(part, draw); part(part, draw); datum(); hit(x0, y0, x1, y1, text); rises(axis, scale); risesAt(axis, px); risesFrom(cx, cy); labels: readonly Label[]The stage a chart is drawn on, and the small interface it draws through: the plot, the axes, a mark's claim, a word in its slot, the key. Lays out room for the title, axes, the series' names and caption, and at the foot what the chart asks, by its family at the size, draws them, and collects the words and pointer regions; a chart sets every word through it, so the stage sees each one, and lays its marks through the marks on it, never the recorder. A legend of classes (classLegend): its label, a swatch an ink, and the edges' words between them. A word set over the picture (a value, a name, a scale's word) is set only where it crosses no word already set nor the chips, else left out and counted (Drawn.crowded), its mark keeping it in its hit; words a chart must say (wordsClear) are set only where every line stands so, else the picture is refused for want of room along the side that gives it (RoomRefused). When the marks draw the picture (drawn), every word is held against the pixels under its box: it keeps its ink where that stands at 4.5:1 against all of them, takes the card's own colour where that does (of ink and card, whichever stands), else stands on a plate of the picture's ground, its box and 2 px round it, laid after the marks (part "word ground"); a plate that would hide more than half of a datum's mark other than a line is not laid, and its word is left out and counted. The series are told apart besides colour as the chart declares (telling): named at their marks' ends in the end gutter (ends, given once the scales stand), named over their own marks at the first place the chart gives that stands there (seriesNamed: a pyramid's sides, a scatter's groups, a stack's segments across; chips where a series is hidden), a part named on its own mark with its share under its name (partNamed: a donut's slice), the parts with no room there in chips with their share (chipped, LegendItem.said), each in a chip under the plot, or the entries a key of what the marks mean, a key item whose marks are a line drawn as a line in their dash (LegendItem.line); a grouped chart's first group carries its names at its bars where every one fits (placeNamed); a series is drawn in its pattern only where neither its name nor its place (placed) tells it, or where the reader asks for the stripes. As it draws, a chart declares whose marks come next: series i of n (a surface at its concept's position, its ink handed back), a surface of its own, or the furniture, each mark of the furniture named for the part it is (the baseline, the grid, a chip, a leader, a rim), which movement knows it by, never its ink; and the base its marks rise from, a value scale's zero, a line both sides rise from, or a round chart's centre.
drawnfunctiondrawn(stage: Stage): DrawnA stage's picture, drawn by the marks when its chart is done: the legend in its slot and the said strip laid, its marks laid in the look's shape as the chart laid them, every mark a series claimed in its pattern (patterned) and the ground's edges between the series (separated), or on a picture that draws observation its fills' outline dashes (outlined); a picture whose series would be told by colour alone, or whose fills would meet under 3:1 too thin to edge, refused for want of room (RoomRefused); then every word held against the marks under it and the picture played onto its raster. Every chart ends in it.
RAMP_LEASTconstantRAMP_LEAST: 48The least a scale key's ramp is drawn across, where its strip cannot give it SIZE.keyRamp. In px (ramp.ts).
valueScalefunctionvalueScale(t, lo, hi, diverging?, reversed?): { inkOf, stepInk }A value scale over [lo, hi]: a value's ink along the key's ramp, and the ink of its step (seq-1 to seq-5) a cell is filled with; sequential from the least, or diverging about the middle.
rampKeyfunctionrampKey(stage, given, lo, hi, unit, inkOf, none, write?, middle?): voidThe scale key in the stage's class legend strip, from its left: the least's words, a ramp SIZE.keyRamp wide and 8 px tall with rounded ends, the greatest's words with the unit; drawn alike by the Heatmap, the Calendar under tint and the Punch card under tint. A diverging key marks its middle (middle, its words): a hairline in ink across the ramp there, 3 px past its edges, its words 5 px over it, the ramp standing low enough in the strip that they stay in it.
rampKeyNeedsfunctionrampKeyNeeds(given, lo, hi, unit, none, write?): numberThe width a scale key needs in its strip with its least ramp, so a chart refuses a room too narrow for it, naming the width that holds it.
logScalefunctionlogScale(lo, hi, a, b): LinearA scale in log ten, on any value axis and on a numeric x: each decade the same length; ticks at 1, 2, 5 a decade over a decade or more, the decades alone past a dozen, the nice linear ticks within one; a least at or below naught refused.
annotationLinefunctionannotationLine(p, a, z, box, look, said?): voidA line an annotation marks, in the look the chart names: the recipe's dashed 4 and 8 at 1.2 px; the candlestick's solid at 1.25 px, cut to its plot, a hit read out by what it marks; the science charts' a hairline in ink dashed 4 on and 3 off.
annotationLevelfunctionannotationLevel(p, box, y, look, words?, said?): voidA level across the plot in its look, its words at its right end (the recipe's), its left where it stands in the plot (the candlestick's), or a tag at its right end on a plate of the card (the science charts', a trigger's T).
annotationTriggerfunctionannotationTrigger(p, box, x, words): voidThe trigger's mark: a point down in ink over the plot's top where the trigger was found, its words beside it.
annotationMomentfunctionannotationMoment(p, box, x, look, words?): voidA moment down the plot in its look, its words beside its top.
annotationBandWordsfunctionannotationBandWords(p, box, y, words): voidA band's words under its edge, at the plot's left, in the label role.
annotationWordsfunctionannotationWords(p, x, y, words, look): voidWords at a point in their look: the recipe's over it, the candlestick's beside it to its right.
measurementLinesfunctionmeasurementLines(ms: readonly Measurement[], width: number): numberHow many lines the measurements row takes across a width: each measurement whole, 14 px apart, the next on a new line where it would pass the end.
measurementWordsfunctionmeasurementWords(box: Box, ms: readonly Measurement[]): Label[]The measurements row's words in its box: each name in the label role, then its value in the value role, no pill, line by line.
LANEconstantLANE: 30A caliper's lane under the plot: a handle's height and 3 px either side. In px.
snappedfunctionsnapped(x: number, marks: readonly number[], reach?: number): numberWhere a cursor put at x stands: on the nearest of a host's marks within size-hit of it, else where it was put.
cursorLaidfunctioncursorLaid(p, pane, x, name, span, more?: CursorWrites): DrawnHandleA cursor across a pane: a hairline in ink down it from 6 px over its top, its handle's grip over that, named, on the span it moves along, saying the options its place writes, those that take it away and the places a step moves it between.
CursorWritestype{ writes?: HandleWrite[]; removes?: Options; steps?; value? }What a cursor's handle says of itself past its place: the options its place writes, those that take it away, the places a step moves it between, and its place as the picture writes it.
caliperOnStripfunctioncaliperOnStrip(p, a, b, y, words, names, span): [DrawnHandle, DrawnHandle]A caliper alone on a strip at its handles' height: its bracket, its interval's words on it on a plate of the card, and its two ends' handles.
pxPerMmOffunctionpxPerMmOf(given: number | undefined, width: number, mm: number): numberThe pixels a millimetre takes on screen: the host's calibration where given, else the CSS millimetre times the zoom that fits the record's millimetres across the plot.
trueSizeSaidfunctiontrueSizeSaid(d: { pxPerMm? }, options: Options): string | undefinedWhat a screen host says beside a picture at a physical scale, not in it, where it has no calibration of its screen (no pxPerMm): not at true size, its millimetre the one that fits the view, its PDF at true size; none otherwise.
mmGridfunctionmmGrid(p, box, pxPerMm: number): voidThe mm grid under a plot: a hairline each millimetre in grid and each five in grid-major; the millimetres dropped under 2 px a millimetre, the grid under 0.8 px, the said line saying so.
pulseMmfunctionpulseMm(speed: number): numberThe calibration pulse's room in millimetres at a speed in mm/s: 200 ms at it and a millimetre either side.
pulseLaidfunctionpulseLaid(p, x0, baseline, pxPerMm, speed, gain, rgb, up?: 1 | -1): numberA row's calibration pulse, a 1 mV step as tall as the gain makes it and 200 ms wide at the speed, at stroke-signal in the row's ink, down where the row is drawn negative up; where the row's trace starts.
MM_LINES_LEASTconstantMM_LINES_LEAST: 2The least a millimetre takes for its own lines to stand in the mm grid; under it the five-millimetre lines alone. In px.
MM_GRID_LEASTconstantMM_GRID_LEAST: 0.8The least a millimetre takes for the mm grid to stand at all. In px.
overviewLaidfunctionoverviewLaid(p, rms: readonly number[], laid: RowsLaid, name: string, write: (v: number) => string): { lo; hi; inkOf }A strip chart's overview in its column: every row a cell of its RMS on the sequential scale, a pixel row the loudest of the rows it holds; a frame in ink round the rows shown, on a window handle that moves down the column; its scale keyed in the class strip, five swatches and the RMS between each pair as write writes it.
calipersInLanesfunctioncalipersInLanes(p, top, baseline, calipers, span): DrawnHandle[]Calipers sharing a stretch, a lane each under the plot: a bracket, its words past its end, dashed guides from the waveform's baseline to the lowest lane at each end, and every end's handle.
eventFlagfunctioneventFlag(p, box, x, over, label, said, whole): voidAn event's flag in the candlestick's look: a 19 px staff from 3 px over its mark, a pennant and its label, a hit read out by its words; where there is no room, a 3 px stub at the plot's top.
Flagtype{ x: number; to?: number; words: string; said: string | Cell[]; line?: false }An event as the science charts flag it: where it stands across and, a span, where it ends; its words; what its hit reads out; and, without its line (a bend's number), its plate alone, centred over its moment.
FLAG_ROWSconstantFLAG_ROWS: 3The most rows of flags the science look stands at a plot's top; past them the said line counts the rest.
FLAG_ROWconstantFLAG_ROW: numberA row of flags: a plate 2 px round words of the value role, and 2 px under it. In px.
flagRowsfunctionflagRows(flags: Flag[], end: number, most?: number, taken?: number[]): number[]Each flag's row in the science look, left to right with their plates ending by end: the first where its plate stands 4 px clear of the last set there, or of where the words already in that row end (taken, a pane's name in its first); -1 past the rows.
flagsLaidfunctionflagsLaid(p, area: Box, flags: Flag[], rows: number[], rise?): voidThe flags in the science look: each line a hairline in ink from its row down through every row, a span's end a second, then its words on a plate of the card and a hit on it; a flag without its line its plate alone; each row under the last, or a lane over it where they rise; a flag past the rows its hit alone, so the table holds it.
panesLaidfunctionpanesLaid(top: number, foot: number, asks: readonly PaneAsk[]): PaneBand[]The bands of a picture's panes, top to bottom: one the rest; those under it from the foot up, each its share of the room over it or its pixels, its gap over it; those over it from the top down; the rest between.
numericXfunctionnumericX(lo, hi, a, b, how?: { log?, unit?, most? }): LinearA numeric x across, its ends kept: log ten where asked; in seconds its ticks in SI's and the clock's steps; else the nice ticks a value axis takes.
acrossWordsfunctionacrossWords(s: Linear, unit?: string): (v: number) => stringA numeric x's tick words by its unit: seconds as a time axis says them, an SI unit in the prefix the largest tick takes (on log ten each in its own), any other unit after the number; no power of ten beside the axis.
LogRefusedclassnew LogRefused(message)A value a log scale cannot place, at or below naught, named with where it stands: a RangeError.
loggablefunctionloggable(values, placeOf, leaveOut?): numberHow many of the values a log scale is to draw stand at or below naught: the first refused by name with its place, unless the host asks such values left out, then counted for the said line.

Marks · 24

The drawing primitives, each with a covered rim.

The Marks area of the chart API.
NameSignatureWhat it does
pathfunctionpath(target, rings: Loop[], rgb): voidClosed rings filled together by the nonzero rule, every pixel covered by the exact area inside it: a word's glyphs, their counters open. Onto a recorder it is a path op every writer plays.
blendfunctionblend(r: Raster, x, y, rgb, a?)Lay colour over one pixel with a coverage. The inside of a mark is exact; only its rim is mixed.
rectfunctionrect(r, x0, y0, x1, y1, rgb, a?, hatch?)A rectangle, edges on the pixel, with its series' hatch when patterns are on.
linefunctionline(r, x0, y0, x1, y1, rgb, w?)A segment whose rim is covered by distance, so it reads smooth at any angle.
polylinefunctionpolyline(r, points, rgb, w?)Segments through a list of points.
dashfunctiondash(r, points, rgb, w, [on, period])Segments through a list of points in dashes, every dash at its own distance along the whole path, so the dashes run on round its corners and the last ends where the path does.
discfunctiondisc(r, cx, cy, radius, rgb)A filled disc with a covered rim.
circlefunctioncircle(r, cx, cy, radius, rgb, w?)A circle's outline.
polygonfunctionpolygon(r, points, rgb, hatch?)A filled polygon, even-odd, with its series' hatch when patterns are on.
gradientfunctiongradient(r, points, rgb, from: [x, y], to: [x, y], cover0: number, cover1: number)A polygon in one ink fading along a straight run, cover0 at from and cover1 at to, held past either end: an area's fill fading from its line to its base. Onto a recorder it is a gradient op every writer plays.
clockSpanfunctionclockSpan(a0: number, a1: number): [number, number]A sector's clock angles in the one form every writer reads: its start brought into [0, 2π) by whole turns, its end turned with it, so a sector past twelve o'clock is one sector.
coveredBoxfunctioncoveredBox(x0, y0, x1, y1, width, height): [x0, y0, x1, y1] | nullThe pixels a mark can cover, its last row and column included, clipped to a picture: the box a GPU path draws it over, or null where none lies in the picture.
pixelBoxfunctionpixelBox(x0: number, y0: number, x1: number, y1: number): [number, number, number, number]A rect's box on the pixel grid, the one every writer fills: each corner to its nearest pixel line, the low edge first whichever way the rect was given.
shadowReachfunctionshadowReach(blur): numberHow far past its moved box a shadow reaches: three of its Gaussian's deviations, past which it lays nothing a pixel shows.
shadowClearOverfunctionshadowClearOver(s: Shadow, w: { x0; y0; x1; y1 }): booleanWhether a shadow lays nothing over a window: the window a pixel inside the shadow's own box and clear of its corners' rows, where the box takes the shadow away whole. Words inside a card ask no softening of its shadow.
shadowfunctionshadow(r, x0, y0, x1, y1, radius, dx, dy, blur, rgb, a)The shadow a box casts, as CSS's box-shadow draws it: the box (its corners round) moved dx and dy, in one ink at a cover, softened by a Gaussian of half the blur CSS states, laid outside the box only: its cover found at four samples a pixel, softened by three box passes each way that stand for the Gaussian; an SVG blur filter, a PDF stack of eight translucent boxes at the Gaussian's quantiles. The card's shadow.
clipBandfunctionclipBand(points, lo, hi, axis?): [x, y][]A polygon cut to the band between lo and hi along an axis (y unless x is named): what of a filled shape lies in a slice of it, as a highlight's part is laid; fewer than three points where nothing does.
polygonSpansfunctionpolygonSpans(points, width, height, each: (y, x0, x1) => void)The runs of pixels a filled polygon covers, row by row, even-odd at pixel centres: what the raster fills and the GPU fills alike.
sectorBoxfunctionsectorBox(cx, cy, r0, r1, a0, a1, width, height): [x0, y0, x1, y1] | nullThe pixels the raster visits for an annular sector, last row and column included: what the raster and the GPU both visit.
sectorFullfunctionsectorFull(a0, a1): booleanWhether a sector closes the full circle, with no edge to shade.
sectorfunctionsector(r, cx, cy, r0, r1, a0, a1, rgb, hatch?)An annular sector from angle a0 to a1, clockwise from twelve o'clock: a donut slice, a gauge arc, a rose petal; with its series' hatch when patterns are on.
clockAnglefunctionclockAngle(x, y, cx, cy): numberThe angle of a point about a centre, from twelve o'clock, clockwise.
onClockfunctiononClock(cx, cy, radius, angle): [x, y]The point at a clock angle and radius.
imagefunctionimage(r, x, y, w, h, rgba)A block of pixels: a field sampled pixel by pixel, recorded as one op.

Tone · 8

The tones every lighter or darker form of a mark is made of: an ink's lightness, its share of the gamut's chroma and its hue, carried toward the ground or to another lightness, and a picture drawn back round what it keeps.

The Tone area of the chart API.
NameSignatureWhat it does
toneOffunctiontoneOf(rgb: Rgb, space?): { L; share; h }An ink's OKLCH lightness, its share of the gamut's chroma at that lightness (its S times the renderer's share), and its hue, read back through the read-out's geometry.
atLightnessfunctionatLightness(rgb: Rgb, L: number, space?): RgbAn ink at another lightness, its hue and chroma share held: what every lighter or darker form of a mark is made of.
towardGroundfunctiontowardGround(rgb: Rgb, t: number, mode: "dark" | "light", space?): RgbAn ink carried a share t of the way toward the ground's lightness, its hue and chroma share held: an outline's tint, a dimmed series, a hatch's stripe, an overlap's fill.
emphasisedfunctionemphasised(d: Drawn, keep: (h: Hit, i: number) => boolean | number, ground): DrawnA flat drawing with the data keep names drawn as they are and the rest drawn back toward the ground: a bar follows its own datum, a line its series; the furniture, legend and words stand; a bar kept in part is drawn back whole with that part, from its base, over it in full ink. render takes keep as its emphasis.
DIMMEDconstantnumberHow far toward the ground a mark not emphasised is drawn: the other series under hover or focus stand at the design system's dim opacity (opacity-dim, 35 %), so 0.65.
toneTowardfunctiontoneToward(tone: Tone, t: number, mode: "dark" | "light", space?): RgbA tone carried a share t of the way toward the ground's lightness, written as an ink: towardGround with the tone read once for many steps, such as a reflection's rows.
inkAtfunctioninkAt(tone: Tone, L: number, space?): RgbA tone at lightness L, its hue and chroma share held, written as an ink.
Tonetype{ L: number; share: number; h: number }An ink's tone as toneOf reads it: its OKLCH lightness, its share of the gamut's chroma, and its hue.

Maps · 16

A coordinate system that is not ours: projections, regions, graticules, great circles.

The Maps area of the chart API.
NameSignatureWhat it does
PROJECTIONSconstantreadonly Projection[]Equal Earth, equirectangular and Mercator.
projectfunctionproject(p: Projection, lon, lat): [x, y]Longitude and latitude to a projection's plane, by this repo's own formulas; Equal Earth after Šavrič, Patterson and Jenny.
fittedfunctionfitted(p: Projection, box): (lon, lat) => [x, y]A projection fitted to the plot, aspect kept.
ringPointsfunctionringPoints(ring: number[], at): [x, y][]A flat ring of longitudes and latitudes as projected points.
regionfunctionregion(stage, rings, at, fill, edge?, furnished?, holes?): boundsA country or any region, filled and outlined, its holes left open where it has any (a region inside it, another country's enclave); hands back its bounds and its rings, holes among them, for the pointer.
graticulefunctiongraticule(stage, at, rgb, step?, p?, within?: { cut, lon })Meridians and parallels every step degrees: on the world, with the globe's edge; within a map of smaller regions, over the longitudes they span (past 180° where a country crosses the dateline), cut to what the map shows, with no edge.
greatCirclefunctiongreatCircle(lon0, lat0, lon1, lat1, n?): [lon, lat][]The shortest path on the sphere between two places, by spherical interpolation.
pathOnMapfunctionpathOnMap(stage, points, at, rgb, w): { x0; y0; x1; y1 }A path in degrees, projected and broken where it crosses the antimeridian; it hands back the bounds of what it drew.
WORLDconstantreadonly Country[]The world's countries at 1:110m from Natural Earth (public domain), simplified: ISO code, name, continent, population, GDP and outer rings.
PLACESconstantreadonly City[]About a hundred cities business charts name, with country, longitude, latitude and other names; the tests hold each inside its country's outline or on its coast.
placeOffunctionplaceOf(name): City | undefinedA city by any of its names, ignoring case and accents.
degreesHeldfunctiondegreesHeld(what, lats, lons): voidLatitudes and longitudes held as degrees: one outside ±90 or ±180 refused, counted and named.
byNameSaidfunctionbyNameSaid(n): stringWhat a map says of the places it placed by name: how many, and the list they come from.
placesInfunctionplacesIn(text): City[]Every city a text names, in order: "London to Dubai to Singapore" as a route.
countryOffunctioncountryOf(name: string): CountryKey | undefinedA country by its name or ISO 3166 code, alpha-3 or alpha-2, whether the 1:110m map draws it or not; a name or code in neither list is none.
notDrawnSaidfunctionnotDrawnSaid(n: number, what: "countries" | "regions" | "routes"): stringWhat a map says in one line of what it could not draw; the names go in a host's warning.

Millions of points · 307

M4 for lines and a density image for points: exact, deterministic, on the CPU.

The Millions of points area of the chart API.
NameSignatureWhat it does
PixelOftype{ a; lo; k }An axis's mapping taken apart once: a value v stands at pixel a + (v − lo)·k of the plot.
pointCountsfunctionpointCounts(groups, x: PixelOf, y: PixelOf, w: number, h: number, cells?: number): { counts; regions }Points counted into the pixel under each, by group, and into a grid of regions over the plot; scatter's density reads them.
COUNT_TOPconstantCOUNT_TOP: 4294967295The top a density's count holds at, 2³² − 1: it is never wrapped.
rowsAtfunctionrowsAt(samples, first: number, rate: number, columns: number, timeAt, rowOf): Float64ArrayThe row an acquisition falls in at each column's middle, its value a sample's own where the middle lies on one, else on the line between the samples either side; none past its samples or where a sample it reads is a gap.
CountGridclassnew CountGrid(columns, rows)Acquisitions counted into cells, allocated once: each marks every cell from the last column's row to this one's, once; a count held at its top, the cells held there counted. One counted out by the rows it was added by, where no cell is held.
countStepsfunctioncountSteps(d?: number): [number, number, number, number]The least count of count-2 to count-5: 2, then the whole decades that part those under the top most evenly, then ten to the top decade d (3 by default: 2, 10, 100, 1,000).
countStepfunctioncountStep(n: number, steps: [number, number, number, number]): numberA count's step by the steps' least counts: 0 for count-1 to 4 for count-5, −1 for no count.
BIGconstant4000Past this many points a series stops drawing a marker, a value label and a region per point.
m4functionm4(n, xAt, v): number[]M4 aggregation: of the points in each pixel column keep the first, last, lowest and highest; the line through them shows every column's exact range.
densityfunctiondensity(data, x, y, box, theme, cells?): { w; h; rgba; top; regions }Many points as a density, counted per pixel: each pixel the group with the most points there, its hue and trace at the renderer's lightness for its count on a log scale, opaque and never a mix of groups; exact and deterministic, and the regions of a cells × cells grid counted for the pointer.
bigSeriesfunctionbigSeries(n, seed?): number[]A long seeded random walk, for trying a line with millions of points.
bigScatterfunctionbigScatter(n, seed?): ScatterDataA large seeded point cloud in three groups.
VIEWconstantreadonly OptionDef[]The view options a zoomable chart declares: from and to, the window of the data shown.
Extremesclassnew Extremes(values[, { sums }])A series' extremes: the least and greatest of any range in logarithmic time, from blocks of 64 and their pairs, so M4 over any zoom window stays real-time; with `sums`, each block keeps its sum and sum of squares, so a range's mean and RMS come back in the same time.
TriggerKindtype"edge" | "glitch" | "runt" | "window"The software triggers: an edge through a level; a glitch, a pulse narrower than a width; a runt, a pulse that does not reach its upper level; a window, a sample leaving [level, upper].
TRIGGER_KINDSconstantreadonly TriggerKind[]The trigger kinds, in the order the controls row offers them.
TriggerSettingtype{ kind: TriggerKind; level: number; upper?: number; slope?: "rising" | "falling"; polarity?: "positive" | "negative"; width?: number }A trigger's setting, its levels in the values the samples are given in, a glitch's width in samples.
TriggerStatetype{ phase: "armed" | "single" | "held"; next: number; last?: number; opened?: number; reached?: true }Where a trigger stands: armed (Run), single (one moment, then held) or held; the place of the next sample, and what it carries from the samples before.
triggerAtfunctiontriggerAt(phase: TriggerState["phase"], next?: number): TriggerStateA trigger set going at a place in the record, nothing carried from before it.
rearmedfunctionrearmed(s: TriggerState, phase?: TriggerState["phase"]): TriggerStateA trigger set going again where it stands, armed or single, or with a new setting: its place and last sample kept, no pulse carried.
triggeredfunctiontriggered(samples: ArrayLike<number>, setting: TriggerSetting, state: TriggerState): { state: TriggerState; found: readonly number[] }The moments a software trigger finds in the samples that arrived, each a place in the record on the line between two samples, and its state after them: samples in any pieces find what the whole finds.
Waveformtype{ name: string; unit?: string; rate: number; start?: number; clock?: string; scale?: number; offset?: number; samples?: ArrayLike<number>; byRange?: ByRange; gaps?: WaveGap[]; made?: Making; prefiltering?: string }A series sampled at a steady rate: its rate in samples a second, its start and clock time, its samples held in the type they were written in with the scale and offset that make them physical, or the host's, fetched by range; where its record breaks, its gaps; how it is made from others where it is made by range; and the filtering its recorder applied, as its file says it.
Makingtype{ from: Waveform[]; lead: number; key: string; maker(): (from: readonly Float64Array[]) => Float64Array }How a waveform is made from others place by place (a montage's row, a row through its filters): its sources at one rate, start and gaps, the places before a place a run reads (a filter's warm-up), its key, and a maker of its runs, made afresh at rest at a run's start and after each gap.
Passedtype{ key: string; extremes: Extremes }The extremes a pass over a record built of a waveform made from the one that carries them, named by its making's key.
WaveGaptype{ before: number; seconds: number }A break in a waveform's record (a discontinuous EDF+ record's): the place of the sample it stands before, and the seconds it lasts. No sample stands in a gap, and a line is not drawn across one.
ByRangetype{ length: number; extremes?: Extremes; held?: { first: number; samples: ArrayLike<number> }; range(first: number, last: number): Promise<ArrayLike<number>>; passes?: Passed[] }A waveform the host keeps: its length, its extremes built as its file streamed (a waveform made from others has them once a pass has built them), the samples held now, how to fetch more, and the passes the door carries for the waveforms made from it.
WaveformRefusedclassclass WaveformRefused extends RangeErrorA waveform the library cannot read, named with what is wrong: no rate, both samples and a range or neither, a scale of naught.
GainUnitRefusedclassclass GainUnitRefused extends WaveformRefusedAn ECG whose leads are in no unit of volts, so its gain in mm a millivolt has no unit to read; a host that takes a unit from its measure's format string says where to set it.
DecoderRefusedclassclass DecoderRefused extends RangeError { field: string; at: string }A file a decoder cannot read, refused by name: the field, its place in the file ("byte 184", "record 37"), and why.
EdfSignaltype{ label; transducer; unit; physical: [number, number]; digital: [number, number]; prefiltering; perRecord }A signal as an EDF header gives it: its label, transducer, physical dimension, physical and digital ranges, prefiltering and samples a record.
EdfHeadertype{ form: "EDF" | "EDF+C" | "EDF+D"; patient; recording; clock; headerBytes; records; recordSeconds; signals: EdfSignal[] }An EDF header as read: its form, the patient and recording fields, its start as an ISO 8601 clock (EDF+'s whole year, else 1985 to 2084), its length, its records and their seconds, and its signals.
EdfAnnotationtype{ at: number; words: string; duration?: number }An EDF+ annotation: its onset in seconds from the file's start time, its duration where it gives one, and its words; a strip chart takes it as an event.
EdfDecodedtype{ header: EdfHeader; waveforms: Waveform[]; annotations: EdfAnnotation[]; said: string[] }An EDF file decoded: its header, its ordinary signals as waveforms, held or by range, its annotations, and what the reading says of it.
EDF_ANNOTATIONSconstant"EDF Annotations"The label of EDF+'s annotations signal.
edfHeaderfunctionedfHeader(bytes: Uint8Array): EdfHeaderAn EDF file's header read, or refused by name: its version, its length against its signals, its counts, start, and each signal's fields.
edfDecodedfunctionedfDecoded(bytes: Uint8Array): EdfDecodedAn EDF or EDF+ file decoded from its bytes, with no request: each ordinary signal a waveform held in its 16-bit samples with the scale and offset that make them physical (a negative gain read as one), its rate, its first record's start and the file's clock, a discontinuous record's breaks its gaps; EDF+'s annotations; refused by name where its records do not fit the file, it holds no whole record, a signal has no samples, or a record's time breaks EDF+C's continuity or starts before EDF+D's record before it ends.
ByteReadertype(from: number, length: number) => Promise<Uint8Array>The host's file read again, for a decoder reading a file too large to hold: the bytes from a place, answered later.
EdfStreamclassnew EdfStream(read: ByteReader) { push(chunk: Uint8Array): void; done(): EdfDecoded }An EDF or EDF+ file too large to hold, read as it streams, with no request: the host pushes its bytes in order, a chunk at a time (the same buffer refilled if it likes); done gives each ordinary signal a waveform by range, its extremes and their sums built in the one pass, whose range reads the records holding the samples asked through the host's reader. Refused by name as edfDecoded refuses.
TdmsValuetypenumber | string | booleanA TDMS property's value: a number (a 64-bit integer as the nearest), words, a truth, or a time as ISO 8601 in UTC.
TdmsGrouptype{ name: string; properties: Record<string, TdmsValue>; waveforms: Waveform[] }A TDMS file's group: its name, its properties, and its channels that are waveforms at a steady rate.
TdmsDecodedtype{ version: number; properties: Record<string, TdmsValue>; groups: TdmsGroup[]; said: string[] }A TDMS file decoded: the version its first segment writes, its properties, its groups in the order first written, and what the reading says of it.
tdmsDecodedfunctiontdmsDecoded(bytes: Uint8Array): TdmsDecodedNI's TDMS decoded from its bytes as NI's description of its internal structure gives it, with no request: segment by segment, little- or big-endian, contiguous or interleaved, its metadata in full, the one before or none; each channel of a numeric type with wf_increment a waveform held in its own type, its unit, timing and linear scales its properties'; what is no waveform left out and said; refused by name where a tag, version, offset, chunk, data type or scale cannot be read, and for DAQmx raw data.
TdmsStreamclassnew TdmsStream(read: ByteReader) { push(chunk: Uint8Array): void; done(): TdmsDecoded }A TDMS file too large to hold, read as it streams, with no request: the host pushes its bytes in order, a chunk at a time (the same buffer refilled if it likes); done gives each numeric channel with wf_increment a waveform by range, its extremes and their sums built in the one pass, whose range reads the bytes from the first value asked to the last through the host's reader. Refused by name as tdmsDecoded refuses.
Wanttype{ waveform: Waveform; first: number; last: number }What a draw of a waveform fetched by range wants and has not: the samples of its view, naming the very waveform its data holds.
WaveTracetype{ at: Float64Array; v: Float64Array; fromBlocks: number; wants?: Want; breaks?: number[] }A waveform's view as a line draws it across pixel columns: its points in order, each a place in samples and a physical value, how many columns were drawn from blocks, what the view wants, and where a gap breaks it, each later run's first point.
tracePiecesfunctiontracePieces<T>(trace: WaveTrace, points: T[]): T[][]A trace's points cut into the runs its gaps leave, each drawn alone, so no line crosses a gap.
waveTracefunctionwaveTrace(w: Waveform, first: number, last: number, cols: number): WaveTraceA waveform's view across pixel columns: each column's first, least, greatest and last, or every sample under four; columns on blocks' edges where it is fetched by range and holds a block a column; under a block a column and not held, each column its block's least to greatest and the view wanted; where gaps break the view, each run traced alone across its share of the columns.
LineDatatypeUnitSeriesData | WaveformsDataWhat the Line draws: categories and their series, or waveforms, the capture.
WaveformsDatatype{ waveforms: Waveform[]; trigger?: CaptureTrigger }The Line given waveforms: one line each on one time axis, all in one unit, and the trigger where one was found.
CaptureTriggertype{ at: number; level?: number }Where a capture's trigger was found, in seconds from the record's start, and the level it crossed in the waveforms' unit: its mark at the plot's top, its level dashed with a T at its end, and with the around option a second pane of its neighbourhood sample by sample.
captureSamplefunctioncaptureSample(): WaveformsDataThe capture's sample, made once: a motor's phase current, 1 s at 1 MS/s with its switching ripple and a transient ringing at 25 kHz, triggered where the software trigger finds the edge through 15 A.
placesWithinfunctionplacesWithin(w: Waveform, t0: number, t1: number): readonly [number, number] | undefinedThe first and last places of a waveform's samples within a span of seconds, a sample's own time read as its own place however its double rounds, its gaps stepped over; none where it holds none, a gap among them.
placeFromfunctionplaceFrom(w: Waveform, t: number): numberThe place of a waveform's first sample at or after a time, within its samples: in a gap, the first after it.
samplesHerefunctionsamplesHere(w: Waveform, a: number, b: number): ((i: number) => number) | undefinedA reader of a waveform's stored samples over a range where they are here, held or among its held samples; none where they are the host's.
extentOverfunctionextentOver(w: Waveform, a: number, b: number): ExtentA waveform's extent over a range of its samples in physical values; by range and not here, over the whole blocks that hold them.
valueAtfunctionvalueAt(w: Waveform, t: number): { v: number } | { want: Want } | { gap: true }A waveform's physical value at a time, on the straight line between the samples either side; where they are not here, the two samples wanted to read it; in a gap, none.
StripDatatype{ rows: StripRow[]; groups?: string[]; events?: StripEvent[]; calipers?: StripCaliper[]; marks?: StripMark[] }The Strip chart's data: its rows top to foot, where they stand in groups each group's name, the record's events, the calipers placed on its rows and a host's marks.
StripRowtype{ name: string; waveform?: Waveform; segments?: StripSegment[]; group?: number; scale?: number }A strip chart's row: one waveform for the whole span, or segments; its group; and where it takes its own scale, the value its height holds, said beside its name.
StripSegmenttype{ name: string; waveform: Waveform; from: number; to: number; keys?: string[] }A stretch of a strip chart's row: a waveform over [from, to] seconds of the record, named at its start inside the row, a mark where it changes; and, where the waveform was read from a table, the row key of each of its samples, which the stretch's regions name the rows they draw by.
StripEventtype{ at: number; words: string; duration?: number }An event of a strip chart's record: a moment, or a span where it lasts, in seconds from the record's start, and its words, flagged at the plot's top.
StripCalipertype{ name: string; from: number; to: number; row?: number }A caliper on a strip chart's row, in seconds from the record's start: alone on its row, its bracket at its handles' height and its interval on a plate; several on one row, each in a lane under the plot with its guides.
StripMarktype{ row: number; at: number; words?: string }A host's mark on a row: a moment a caliper's end snaps to within size-hit, its words named over the row where it has them.
StripMoretype{ said?: string[]; measurements?: Measurement[]; rate?: string; scaleSaid?: string }What a preset adds to the strip chart it draws on: its data's maker's words, its measurements in place of the strip's own, the words a caliper's rate is said in, and its values' scale in the context line.
STRIP_OWNconstantreadonly OptionDef[]The strip chart's options past its view: rows from, scale, cursor, polarity, the high-pass, low-pass and notch, speed, sensitivity, the screen's pixels a millimetre, the clock along the foot, the grid's lines (the ticks, each second, the mm grid), what a row's baseline stands for and the calibration pulse; its presets take theirs from it.
STRIP_OPTIONSconstantreadonly OptionDef[]The Strip chart's options: its header, its axes, its view and its own (STRIP_OWN).
heldStripfunctionheldStrip(d: StripData): voidA strip chart's data held, or refused by name: one row or more, each a waveform or segments, groups and scales in range, the rows on one scale in one unit, each event at a time with words.
heldEventsfunctionheldEvents(events: StripEvent[]): voidA record's events held, or refused by name: each at a time, with words, lasting naught or more where it lasts.
stripDrawnfunctionstripDrawn(d: StripData, o: Options, t: Look, size: Size, more?: StripMore): DrawnThe Strip chart drawn, with what a preset adds: its words said, its measurements, its calipers' rate and its scale's words.
stripChartconstantChartDef<StripData>The Strip chart: one time axis, a row a waveform on its own baseline standing for its mean, through its display filters and negative up where asked, every row at one scale said in the key as a bar, or at a physical scale its speed and sensitivity, the bar and the time together; the clock along the foot, events flagged, the cursor's value on each row in the end column, the overview past the rows that fit; it keeps time.
stripSamplefunctionstripSample(): StripDataThe Strip chart's sample, made once: a gearbox rig's 16 accelerometers on three axes, a second at 25.6 kHz, one carrying an outer-race bearing fault.
EegDatatype{ electrodes: Waveform[]; events?: StripEvent[]; montage?: Montage }An EEG's data: a record's held electrodes named as its recorder labels them, its events, and the host's own montage where it gives one.
heldEegfunctionheldEeg(d: EegData): voidAn EEG's data held, or refused by name: one electrode or more, each readable, its events, and a host's montage of chains of rows each two names.
eegDrawnfunctioneegDrawn(d: EegData, o: Options, t: Look, size: Size): DrawnThe EEG drawn: its montage's rows on the strip chart, its sensitivity in µV a millimetre read into the rows' unit, the rows left out said.
eegChartconstantChartDef<EegData>The EEG, the strip chart's preset: the record in a montage, each chain a group, at 30 mm/s and 7 µV/mm on the physical scale, negative up, through 1–70 Hz and a 50 Hz notch, a line each second, events flagged, its clock along the foot.
eegSamplefunctioneegSample(): EegDataThe EEG's sample, made once: a routine record's 19 electrodes, 10 s at 256 Hz from 14:02:10, alpha at the back while the eyes are closed, blinks at the front, mains on two poor contacts.
ECG_LEADSconstantreadonly ["I", "II", "III", "aVR", "aVL", "aVF", "V1", "V2", "V3", "V4", "V5", "V6"]The twelve leads, in the order a record keeps them.
ECG_LAYOUTSconstantreadonly ["3×4 with a rhythm strip", "6×2", "12×1", "one lead"]The layouts the ECG lays its leads out in.
EcgCalipertype{ name: string; from: number; to: number }A caliper a reader or the host placed, in seconds from the record's start: it stands on the rhythm strip.
EcgMarktype{ lead: string; at: number; words?: string }A host's mark on a lead: a moment a caliper's end snaps to, and its words over the lead where it has them.
EcgDatatype{ leads: Waveform[]; keys?: string[][]; measures?: Measurement[]; calipers?: EcgCaliper[]; marks?: EcgMark[] }An ECG's data: a record's held leads named as its recorder labels them, the row key of each of their samples as the table they were read from names it (a list to each lead), the host's measures, the calipers placed and the host's marks.
heldEcgfunctionheldEcg(d: EcgData): voidAn ECG's data held, or refused by name: one lead or more, each readable, each caliper's ends apart, each mark at a time.
ecgDrawnfunctionecgDrawn(d: EcgData, o: Options, t: Look, size: Size): DrawnThe ECG drawn: its layout's rows of segments at its speed and gain on the mm grid, each row opening on its pulse from naught; the calipers on the rhythm strip, the marks on the leads that show them, the leads the record lacks said.
ecgChartconstantChartDef<EcgData>The ECG, the strip chart's preset: twelve leads at 25 mm/s and 10 mm/mV on the mm grid, three rows of four and lead II along the foot, or six by two, twelve, or one lead; the host's rate the header's figure, its measures and the calipers' the measurements.
ecgSamplefunctionecgSample(): EcgDataThe ECG's sample, made once: a resting record's twelve leads, 10 s at 500 Hz in mV, the host's measures and marks, an RR caliper.
ecgSampleBeatfunctionecgSampleBeat(): { from: number; to: number; calipers: EcgCaliper[] }The sample's measured beat as the one-lead layout shows it: its window as shares of the record, and its PR, QRS and QT calipers.
HolterPeriodtype{ from: number; to: number; words: string }A period the host names over a Holter's day (asleep), in seconds from the record's start, drawn as a band behind the rate.
HolterDatatype{ beats: ArrayLike<number>; keys?: string[]; classes?: string[]; normal?: string; periods?: HolterPeriod[]; waveforms?: Waveform[]; clock?: string; duration?: number; recordedTo?: number }A Holter's data: each beat's time, rising; each beat's row key as the table it was read from names it; its class as the host gives it; the host's periods; the channels for the moment; the record's clock and length; and the seconds recorded so far, while it is being recorded.
HolterRatestype{ minutes: number[]; bins: { from; to; rate; least; most }[]; mean: number; least: { rate; minute }; most: { rate; minute } }A record's minutes and bins rated as DESIGN-SCIENCE §4.13 defines: each minute's beats, each bin's beats over its minutes with its least and most minute, the mean over the minutes recorded.
holterRatesfunctionholterRates(beats: ArrayLike<number>, seconds: number, bin: number): HolterRatesA record's rates: each whole minute's beats from its start, each bin of whole minutes, the mean over the seconds recorded, the least and most minute; every beat in those seconds counts.
heldHolterfunctionheldHolter(d: HolterData): voidA Holter's data held, or refused by name: beats rising, a class to each where classes are given, periods with words, channels readable.
holterDrawnfunctionholterDrawn(d: HolterData, o: Options, t: Look, size: Size): DrawnThe Holter drawn: the day over, its bins' band and rate, its periods and its lanes of beats out of place, the moment a cursor through them; under, the moment's channels at their physical scale, each beat named and each interval in ms; the day alone, saying the height, where the moment cannot stand.
holterChartconstantChartDef<HolterData>The Holter: a day of beats in 5-minute bins over the moment at 25 mm/s and 10 mm/mV; the host's classes counted, the mean, least and most rate measured; it classes no beat.
holterSamplefunctionholterSample(): HolterDataThe Holter's sample, made once: a day of beats from 15:00, asleep from 23:40 to 06:50, ectopic beats among them, two channels at 250 Hz about 03:00.
MaskRegiontype[number, number][]A region of a persistence picture's mask: its corners in the chart's own units, x then value; the plot cuts it where it runs past.
Acquisitiontype{ w: Waveform; at: number; per: number }An acquisition as persistence counts it: its waveform, held, and the time at + x · per in its record that the picture's x stands for.
Persistedtype{ acquisitions: Acquisition[]; x: { lo; hi; unit; what; said }; mask?: MaskRegion[]; before: Measurement[]; after?: Measurement[]; said?: string[] }What a persistence picture counts, as its chart reads it from its data: the acquisitions, the x's span and words, the mask, the measurements either side of the mask's count.
PERSISTENCE_OWNconstantOptionDef[]Persistence's own option: the count its darkest step starts at, 1,000 to 1,000,000,000.
PERSISTENCE_OPTIONSconstantOptionDef[]Persistence's options: the frame's words and axes, and the darkest step's least count.
heldAcquisitionsfunctionheldAcquisitions(ws: Waveform[], what?: string): voidAcquisitions as persistence counts them, or refused by name: one or more, each held and of two samples or more, all in one unit.
heldMaskfunctionheldMask(mask: MaskRegion[] | undefined): voidA mask held, or refused by name: each region three corners or more, each corner two numbers.
persistenceDrawnfunctionpersistenceDrawn(a: Persisted, o: Options, t: Look, size: Size): DrawnA persistence picture drawn: the acquisitions counted into the plot's 2 px cells, each in its count step's ink and keyed as five swatches; the mask over them in chip, the counts inside it drawn again over it and their sum stated; a row of the table a tick interval of the x.
PersistenceDatatype{ acquisitions: Waveform[]; mask?: MaskRegion[]; measures?: Measurement[] }Persistence's data: the acquisitions, each held, timed from its trigger; the host's mask; the host's measures (jitter, rise time).
heldPersistencefunctionheldPersistence(d: PersistenceData): voidPersistence's data held, or refused by name: the acquisitions readable, held and in one unit; the mask's regions closed.
persistenceChartDrawnfunctionpersistenceChartDrawn(d: PersistenceData, o: Options, t: Look, size: Size): DrawnPersistence drawn: its acquisitions as they stand from their trigger, counted; the acquisitions, the mask's count and the host's measures stated.
persistenceSamplefunctionpersistenceSample(): PersistenceDataPersistence's sample, made once: a data line's rising edge caught 6,000 times at 40 GS/s, 2 ns either side of the trigger, three runts among them; the host's jitter and rise time.
persistenceChartconstantChartDef<PersistenceData>Persistence: every acquisition overlaid at its trigger, each 2 px cell inked by how many cross it, count-1 to count-5 by decade, so one in thousands still shows; a mask the host gives, its count stated.
EyeDatatype{ waveform: Waveform; edges?: ArrayLike<number>; unitInterval?: number; first?: number; mask?: MaskRegion[] }An eye's data: one waveform, held; its clock's edges, or a unit interval and its first edge; the host's mask in unit intervals and the waveform's unit.
EyeMeasurestype{ mean: number; top?: number; base?: number; decision?: number; ones: number; zeros: number; height?: { inner; sigma }; width?: number; crossings: number; said: string[] }An eye's measures as DESIGN-SCIENCE §4.13 defines them: the record's mean, the top, base and decision levels, the ones and zeros, the height in both forms, the width in unit intervals, and why any is left out.
EYE_HEIGHTSconstantreadonly ["inner", "3σ"]The forms an eye's height is stated in: the inner opening the picture shows, by default, or the 3σ form.
EYE_OPTIONSconstantOptionDef[]The eye's options: persistence's, and the form its height is stated in.
eyeFoldsfunctioneyeFolds(d: EyeData): Acquisition[]The eye's folds: each unit interval whose span from −0.5 to 1.5 of it stands within the record, at a fixed interval or at the clock's own edges.
heldEyefunctionheldEye(d: EyeData): voidAn eye's data held, or refused by name: its waveform held; its edges rising, or its unit interval above naught, one of the two; a fold whole in the record; its mask closed.
eyeMeasuresfunctioneyeMeasures(d: EyeData, folds?: Acquisition[]): EyeMeasuresThe eye's measures over its folds: the levels from the centres either side of the record's mean, the decision level their midpoint, the height inner and 3σ, the width from the crossings against their nearest edges.
eyeDrawnfunctioneyeDrawn(d: EyeData, o: Options, t: Look, size: Size): DrawnThe eye drawn: its folds counted onto −0.5 to 1.5 unit intervals; its bits, height (inner or 3σ), width and mask count stated.
eyeSamplefunctioneyeSample(): EyeDataThe eye's sample, made once: a 10 Gb/s link's PRBS7, 4,000 bits through a one-pole channel at 499.5 GS/s, folded at 100 ps, its mask a hexagon and two bars.
eyeDiagramChartconstantChartDef<EyeData>The Eye diagram, persistence's preset: a link's bits folded onto two unit intervals and counted, its height, width and mask count measured as DESIGN-SCIENCE §4.13 defines them.
TrackedOrdertype{ order: number; label?: string; amplitude: ArrayLike<number>; phase?: ArrayLike<number> }An order as a tracker gives it: its multiple of the shaft's speed, the order as its table spells it where it was read from one, its amplitude at each of the run's speeds, and its phase there in degrees where tracked.
OrderRuntype{ speeds: ArrayLike<number>; keys?: string[]; orders: TrackedOrder[]; unit?: string; measure?: string }A run as order tracking and Campbell read it: its speeds in rpm, rising or falling; each speed's row key as the table it was read from names it; its orders; the amplitudes' unit, and what they measure.
NaturalFrequencytype{ name: string; at: [number, number][] }A rotor's natural frequency as a host gives it: its name, and its frequency in Hz at speeds in rpm, rising, two or more.
Criticaltype{ at: number; speed: number; amplitude: number; band?: { from: number; to: number }; q?: number; said: string[] }An order's critical speed: its sample, speed and amplitude; its half-power band in rpm and its Q where the run holds both sides, else why not.
ORDER_READconstantOptionDefThe order a chart reads its critical speed from, 1× by default, in halves from 0.5× to 100×.
orderNamedfunctionorderNamed(k: number): stringAn order's name: its multiple and ×, "1×", "0.5×".
criticalNamedfunctioncriticalNamed(k: number): stringAn order's critical as a chart names it: "First critical" where the order is 1×, else "Critical of 2×".
heldRunfunctionheldRun(d: OrderRun): voidA run held, or refused by name: two speeds or more in rpm, each past the one before the same way; one order or more, each named once, its amplitude a size and its phase an angle at every speed.
orderReadfunctionorderRead(d: OrderRun, o: Options): TrackedOrderThe order read, by the option: one of the run's orders, refused by name where the run gives none of it.
criticalOffunctioncriticalOf(speeds: ArrayLike<number>, amplitude: ArrayLike<number>, name: string): Critical | undefinedAn order's critical speed over a run's samples, its greatest amplitude's; its half-power band where the amplitude falls to the greatest over √2 either side, each edge on the straight line between its samples; Q the critical over the band's width, unstated where the run ends above that level. None where the order never stands above naught.
unwrappedfunctionunwrapped(phase: ArrayLike<number>): Float64ArrayA phase unwrapped: each angle moved by whole turns to stand within half a turn of the one before, the first as given.
rotorRunfunctionrotorRun(): OrderRunThe sample run, made once: a rotor run up from 300 to 6,000 rpm, tracked every 10 rpm, five orders' velocity in mm/s and phase in degrees through three natural frequencies with a Q of 8.
rotorModesfunctionrotorModes(drift?: number): NaturalFrequency[]The sample rotor's three natural frequencies, from naught to the run's top speed, as its model moves them; the first mode at a share of its own (one where not given), as a bearing warms and cools.
orderTrackingDrawnfunctionorderTrackingDrawn(d: OrderRun, o: Options, t: Look, size: Size): DrawnOrder tracking drawn: each order's amplitude against speed named at its end, the order read's phase unwrapped in a pane under it where it stands, the critical down both, its half-power band behind; its critical speed, amplitude, phase and Q stated.
orderTrackingSamplefunctionorderTrackingSample(): OrderRunOrder tracking's sample, made once: the sample run's first three orders.
orderTrackingChartconstantChartDef<OrderRun>Order tracking, the Line's preset: a run's orders against speed, the order read's phase under them, its critical speed marked through both with its half-power band and Q.
CampbellDatatypeOrderRun & { modes?: NaturalFrequency[] }A Campbell diagram's data: a run as order tracking reads it, and the rotor's natural frequencies the host gives.
heldCampbellfunctionheldCampbell(d: CampbellData): voidA Campbell diagram's data held, or refused by name: its run as order tracking holds it; each natural frequency named, at two speeds or more, rising, each above naught in Hz.
campbellDrawnfunctioncampbellDrawn(d: CampbellData, o: Options, t: Look, size: Size): DrawnThe Campbell diagram drawn: each order's points at their speed and frequency, a point's width apart and sized by amplitude, its line from the origin named at its end; each natural frequency dashed and named; the critical marked and named, read with the most from every sample.
campbellSamplefunctioncampbellSample(): CampbellDataThe Campbell diagram's sample, made once: the sample run's five orders and its rotor's three natural frequencies.
campbellChartconstantChartDef<CampbellData>Campbell, the Scatter's preset: a run's orders as points sized by amplitude against its natural frequencies, the order read's critical named as order tracking names it.
SPECTRUM_CONTRACTconstantContractA spectrum's contract at the door: its name, its two axes, its values each a number or a gap, its x on a steady grid or at points, every number held.
PEAKS_CONTRACTconstantContractA peak list's contract at the door: its name, its two axes, each peak's position and height.
SPECTRUM_FIELDSconstantstringA spectrum's fields as a host or an assistant writes them, said whole in each chart's data type that reads one.
PEAKS_FIELDSconstantstringA peak list's fields, said whole in each chart's data type that reads one.
heldSpectrumfunctionheldSpectrum(s: Spectrum, what?: string): voidA spectrum held, or refused by name: its x steady or at points, one of the two, two points or more, a step other than naught, points strictly rising or falling.
xOffunctionxOf(s: Spectrum, i: number): numberThe x of a spectrum's point: its grid's first plus that many steps, or its point.
xsOffunctionxsOf(s: Spectrum): Float64ArrayA spectrum's x at every point, in order.
heldPeaksfunctionheldPeaks(p: Peaks, what?: string): voidA peak list held, or refused by name: a position and a height each, the positions strictly rising.
finiteSamplesfunctionfiniteSamples(w: Waveform): voidA waveform's held samples all finite, or refused naming the first that is not; checked once and kept while the samples live.
WINDOWSconstantreadonly ["hann", "hamming", "blackman-harris"]The windows a spectrum is taken under, the periodic forms Heinzel, Rüdiger and Schilling define.
WINDOW_LEASTconstantWINDOW_LEAST: 16The shortest a window is, in samples.
WINDOW_MOSTconstantWINDOW_MOST: 16384The longest a window is, in samples: a spectrum costs about N log N, so its length is bounded as the work is.
ANALYSIS_MOSTconstantANALYSIS_MOST: 16777216The most windowed samples (spectra times window length) a draw or the search for its top analyses.
NO_LEVELconstantnumberThe level of a mean square of naught, which has none (minus infinity): a picture draws it at the floor and its table writes "no signal".
REFERENCE_CONTRACTconstantContractA level reference's contract at the door: its rms or its full scale, and the words that name it.
windowedfunctionwindowed(name: WindowName, n: number): WindowThe window of a form and a length, a power of two from 16 to 16,384, its points and sums taken; made once.
planOffunctionplanOf(name: WindowName, n: number): PlanThe plan for windows of one form and length: the mean squares of bins 0 to N/2 of a stretch of samples, by a radix-2 transform whose sines and cosines are the kernel's own; made once.
heldReferencefunctionheldReference(r: Reference): voidA level reference held, or refused by name: a value above naught, as an rms in words or as full scale, one of the two.
referencePowerfunctionreferencePower(r: Reference): numberA reference's mean square: an rms squared, or a full-scale sine's, half the square of its peak.
referenceWordsfunctionreferenceWords(r: Reference): stringWhat the dB are against, in words: the reference's own, or "full scale".
levelOffunctionlevelOf(power: number, r: Reference): numberThe level of a mean square against a reference: 10 log10 of their ratio, NO_LEVEL for naught; a mean square below naught or not finite is refused.
hopOffunctionhopOf(n: number, overlap: number): numberA spectrogram's hop: the window less its overlap, to a whole number of samples, one at least.
spectraCountfunctionspectraCount(samples: number, hop: number): numberHow many spectra a series takes at a hop: one centred on every hop-th sample from the first, none centred past the last.
spentfunctionspent(spectra: number, n: number, what: string, way?: string): voidThe work held to ANALYSIS_MOST: spectra times window length windowed samples; refused naming the count and the way out.
welchfunctionwelch(x: ArrayLike<number>, from: number, to: number, scale: number, offset: number, plan: Plan, out: Float64Array): numberA spectrum's mean squares averaged as power over the whole blocks of N samples, half overlapped, that a stretch holds: written to out, the number of blocks returned; a stretch short of one block is refused.
straightBetweenfunctionstraightBetween(xs: ArrayLike<number>, ys: ArrayLike<number | null>, lo: number, hi: number): (x: number) => numberThe straight line between a series' values at two limits, each on the line between the samples either side of it; a missing point there is refused.
integratefunctionintegrate(xs: ArrayLike<number>, ys: ArrayLike<number | null>, lo: number, hi: number, baseline?: (x: number) => number): numberThe area between a series and a baseline over limits, by the trapezoid rule on the width of each step, so the same positive area whichever way x runs; the baseline the host's, else naught; a missing point is never stepped across.
crossingsfunctioncrossings(xs: ArrayLike<number>, vs: ArrayLike<number>, level: number, how?: CrossingWalk): Crossing[]Where a series crosses a level, in the order walked from a sample in a direction, on the straight line between the two samples that straddle it (on log x where asked), or at the first sample of a run standing on it; a touch is no crossing.
SCIENCE_DASHconstantreadonly [number, number]The science look's dash, each dash 4 px on in a period of 7: the one pattern every chart that dashes a line or a ring in that look draws by.
decadeGridfunctiondecadeGrid(p: Stage, s: Linear, boxes: readonly Box[]): voidThe decade grid of a log axis: down through each box a hairline at each decade the scale spans, in grid-major, and at 2 to 9 of every decade, in grid; laid before the marks it stands under, and refused on a scale that is not logarithmic.
runsM4functionrunsM4(values: readonly (number | null)[], xAt: (i: number) => number): number[][]A series' points as it is drawn across pixel columns, one list of indexes for each run between its gaps, each run through its columns' first, least, greatest and last: so a gap breaks the line and no peak narrower than a pixel is lost.
peakNamedfunctionpeakNamed(p: Stage, n: PeakName, how?: Naming): booleanA peak's name set where it stands clear: over its tip, beside it, then raised a row at a time and joined to its tip by a hairline; else left out, counted and carried whole. Whether it was set.
calloutsLaidfunctioncalloutsLaid(p: Stage, plot: Box, bands: readonly Callout[]): { rows: number; set: number; out: number }Callouts laid in rows over a plot's top, each band's name and value on a hairline down to it, the nearest row where its label stands clear and crosses no leader; the rows used, the bands set and the bands left out.
XML_DEPTH_MOSTconstantXML_DEPTH_MOST: 32How deep elements may nest: the 33rd level is refused.
attributeOffunctionattributeOf(start: XmlStart, name: string, namespace?: string): string | undefinedThe value of a start tag's attribute by its local name and namespace (none for an unprefixed one), or none.
XmlReaderclassnew XmlReader(bytes: Uint8Array, mode: XmlMode, options?: XmlOptions) { next(): XmlEvent | undefined; scope: XmlScope }The events of an XML document, head or fragment, read from its bytes with no request: namespaces bound, references expanded, a fault met where the reader reaches it and refused by name with its byte.
inflatedfunctioninflated(stream: Uint8Array, length: number): Uint8ArrayA zlib stream read to its bytes, exactly the length asked: refused by name where the stream is not valid, would write past it, ends short of it, or fails its Adler-32.
mzmlDecodedfunctionmzmlDecoded(bytes: Uint8Array): MzmlDecodedAn mzML 1.1.0 file decoded from its bytes with no request: each spectrum a centroid's peaks or a profile's points, each chromatogram its points, the version from its schema names, an index held to the elements it names; or refused by name.
MzmlIndexedclassnew MzmlIndexed(read: ByteReader, size: number) { index(): Promise<MzmlIndex>; spectrum(id: string): Promise<MzmlSpectrum>; chromatogram(id: string): Promise<MzmlChromatogram>; said(): readonly string[] }An mzML file too large to hold, read through its index: the host gives its reader and its size; its head, its tail and its index are read, then the bytes of each spectrum or chromatogram asked.
jcampDecodedfunctionjcampDecoded(bytes: Uint8Array): JcampDecodedA JCAMP-DX file decoded from its bytes with no request: infrared, Raman, NMR and mass spectra as spectra or peak tables, link blocks followed, an NMR spectrum's x put in ppm; or refused by name, with its line and column.
touchstoneDecodedfunctiontouchstoneDecoded(bytes: Uint8Array, ports?: number): TouchstoneDecodedA Touchstone file (versions 1.0 to 2.1) decoded from its bytes with no request: an n-port of S-parameters over its sweep in hertz; a version 1 file's ports given by the host; or refused by name.
chromatogramSamplefunctionchromatogramSample(): ChromatogramDataThe Chromatogram's sample, made once: an analgesic tablet's extract on a C18 column, UV at 254 nm, ten minutes at 5 samples a second in mAU, four peaks named and aspirin's integrated.
heldChromatogramfunctionheldChromatogram(d: ChromatogramData, o?: Options): voidA chromatogram's data held, or refused by name: its run a waveform or points, finite, its time rising; its peaks' apexes and limits inside the run; its baseline's times rising.
chromatogramDrawnfunctionchromatogramDrawn(d: ChromatogramData, o: Options, t: Look, size: Size): DrawnA chromatogram drawn: the run through each pixel column's first, least, greatest and last value, the host's peaks named over their apexes, its baseline, and the area of each peak it asks integrated, shaded and stated.
chromatogramChartconstantChartDef<ChromatogramData>The Chromatogram: a separation's detector response against retention time, the host's peaks named and their areas by the trapezoid rule, each named peak's share of the named areas.
massSpectrumSamplefunctionmassSpectrumSample(): MassSpectrumDataThe Mass spectrum's sample, made once: toluene at 70 eV, its fragment ions near the published spectrum and its isotope peaks worked out from the elements.
heldMassSpectrumfunctionheldMassSpectrum(d: MassSpectrumData): voidA mass spectrum held, or refused by name: a list of peaks the host picked (never a profile), one or more, their m/z rising, none below naught, the greatest above it; the molecular ion among them.
massSpectrumDrawnfunctionmassSpectrumDrawn(d: MassSpectrumData, o: Options, t: Look, size: Size): DrawnA mass spectrum drawn: each ion a stick at its m/z as tall as its share of the base peak, the top peaks named by their m/z, the molecular ion marked and keyed, and M+1 stated where a peak stands one above it.
massSpectrumChartconstantChartDef<MassSpectrumData>The Mass spectrum: a compound's ions as sticks at their m/z, each as tall as its share of the base peak, the peaks picked by the host and never found here.
SpectrumAxistype{ quantity: string; unit: string }What an axis of a spectrum measures, in the words its field uses ("wavenumber", "m/z", "time"), and its unit as written ("cm-¹", "ppm", "min").
Spectrumtype{ name: string; x: SpectrumAxis; y: SpectrumAxis; values: (number | null)[]; grid?: { first: number; step: number }; xs?: number[] }A trace of one quantity against another as an instrument or a file gives it: its values, a null where a point is missing or off scale, at its x on a steady grid (a first position and a step, negative where x falls) or at points, one of the two.
Peakstype{ name: string; x: SpectrumAxis; y: SpectrumAxis; at: number[]; height: number[] }A peak list as a mass spectrum carries it: each peak's position and height, the positions rising.
WindowNametype"hann" | "hamming" | "blackman-harris"One of the windows a spectrum is taken under.
Referencetype{ rms: number; words: string } | { fullScale: number; words?: string }What the dB are against: a root mean square in the data's unit, in its words ("20 µPa"), or the greatest the samples hold (full scale), which the host gives.
Windowtype{ name: WindowName; n: number; w: Float64Array; s1: number; s2: number; noiseBandwidth: number }A window: its points, their sum S1 and sum of squares S2, and its noise bandwidth N times S2 over S1 squared, in bins.
Plantype{ window: Window; powers(x: ArrayLike<number>, first: number, scale: number, offset: number, out: Float64Array): void }A plan for windows of one length and form: its mean squares of bins 0 to N/2 from a stretch of samples, each sample times a scale plus an offset, written to out; a sample or a number that is not finite is refused.
Crossingtype{ x: number; i: number; j: number; t: number; rising: boolean }A crossing of a level: where it stands, the samples it falls between, the share of the way from the first to the second on the line it was placed on, and whether the series was going up through the level, in the way walked.
CrossingWalktype{ from?: number; direction?: 1 | -1; log?: boolean; most?: number }How a series is walked for its crossings: from a sample, in a direction, on log ten of x, to at most so many.
Runtype{ text: string; role: WordRole; ink?: string }One run of a name's words, in its role and, where it has one, its own ink.
PeakNametype{ x: number; y: number; lines: Run[][]; whole: string }A peak's name: its tip's place on the picture, its words as lines of runs, and the name whole, which a name left out is carried by.
Namingtype{ within?: Box; blocked?: (b: Box) => boolean; rows?: number }Where a name may stand: inside a box, clear of the marks the chart says are taller, and raised at most so many rows (3 by default).
Callouttype{ x: number; y: number; name: string; value: string }A band the host names over a spectrum: where it stands across and the picture's y of its feature, its name and its value, as the words stand.
NPorttype{ ports: number; parameter: "S"; frequencies: number[]; references: number[]; matrices: { re: number[]; im: number[] }[] }An n-port's S-parameters over a sweep: the frequencies in hertz, rising; each port's reference resistance in ohms; for each frequency the n by n matrix of complex values as real and imaginary parts, row by row.
TouchstoneDecodedtype{ nport: NPort; version: "1.0" | "1.1" | "2.0" | "2.1"; noise: number; said: string[] }A Touchstone file decoded: its n-port, the form it is in, how many noise records it holds after its network data (read as numbers and left out), and what the reading says of it.
JcampNmrtype{ frequency: number; nucleus?: string; solvent?: string; solventReference?: number; reference: { kind: "INTERNAL" | "EXTERNAL"; name: string; point: number; ppm: number } }What a JCAMP-DX NMR spectrum says of its measurement and of the reference that puts its hertz on a ppm scale, as the file wrote it.
JcampBlocktype{ title: string; dataType: string; version: string; within: string[]; spectrum?: Spectrum; peaks?: Peaks; missing: number; nmr?: JcampNmr }One data block of a JCAMP-DX file: its title, data type and version, the link blocks it stands in, the spectrum or the peaks it gives, how many ordinates were missing, and for an NMR spectrum its measurement and reference.
JcampDecodedtype{ version: string; blocks: JcampBlock[]; said: string[] }A JCAMP-DX file decoded: the version its first block names, its data blocks in the order they stand, and what the reading says of it.
MzmlTimetype{ value: number; unit: string }A time as an mzML file gives it: its number and its unit, "s" or "min".
MzmlCentroidtype{ form: "centroid"; peaks: Peaks }A centroid spectrum of an mzML file, with its id and index and, where the file gives them, its ms level and start: its peaks.
MzmlProfiletype{ form: "profile"; trace: Spectrum }A profile spectrum of an mzML file, with its id and index and, where the file gives them, its ms level and start: its points, the positions as xs and the intensities as values.
MzmlSpectrumtypeMzmlCentroid | MzmlProfileA spectrum of an mzML file, its form said.
MzmlChromatogramtype{ id: string; index: number; tic: boolean; trace: Spectrum }A chromatogram of an mzML file: its id and index, whether it is a total ion current chromatogram, and its points, the times as xs in the unit its time array names.
MzmlDecodedtype{ version: string; spectra: MzmlSpectrum[]; chromatograms: MzmlChromatogram[]; said: string[] }An mzML file decoded: its version from the schema name, its spectra and chromatograms in the order written, and what the reading says of it.
MzmlIndextype{ version: string; spectra: string[]; chromatograms: string[] }The ids a file too large to hold lists in its index, in its order, and its version.
ChromatogramPeaktype{ name?: string; apex?: number; from?: number; to?: number; integrate?: boolean }A peak the host names on a chromatogram: its compound, its apex time and its limits in minutes where it integrated it, and whether it asks its area shaded and stated.
ChromatogramBaselinetype{ at: number[]; signal: number[] }The integration baseline the host gives: a line through its points, their times in minutes, rising, and the signal in its unit.
ChromatogramDatatype{ waveform?: Waveform; points?: Spectrum; peaks?: ChromatogramPeak[]; baseline?: ChromatogramBaseline }A chromatogram's data: the run, a waveform at a steady rate or points of time and signal, one of the two; the host's peaks and its baseline.
MassSpectrumDatatype{ peaks: Peaks | Spectrum; molecularIon?: number; ionisation?: string }A mass spectrum's data: the peaks the host picked, the molecular ion it names (its m/z, among the peaks), and the ionisation the context says.
SpectrumBandtype{ at: number; name?: string }A band the host names on a spectrum: where it stands across, and the group that gives it where the host names one.
SpectrumDatatype{ spectrum: Spectrum; bands?: SpectrumBand[] }A spectrum chart's data: the spectrum as the instrument gives it, on a steady grid or at points, and the host's bands.
heldSpectrumDatafunctionheldSpectrumData(d: SpectrumData): voidThe Spectrum's data held, or refused by name: its x steady or at points, strictly rising or falling, two points or more; a y the chart draws; each band inside the spectrum with a point in its window.
heldIrSpectrumfunctionheldIrSpectrum(d: SpectrumData): voidThe IR spectrum's data held: the Spectrum's, and a wavenumber or a Raman shift for its x; a wavelength is refused by name, sent to the Spectrum, which draws it in its own unit.
heldRamanSpectrumfunctionheldRamanSpectrum(d: SpectrumData): voidThe Raman spectrum's data held: the Spectrum's, and a Raman shift or a wavenumber for its x; a wavelength is refused by name.
heldUvVisSpectrumfunctionheldUvVisSpectrum(d: SpectrumData): voidThe UV-Vis spectrum's data held: the Spectrum's, and a wavelength in nm for its x.
spectrumDrawnfunctionspectrumDrawn(d: SpectrumData, o: Options, t: Look, size: Size): DrawnThe Spectrum drawn: any x in its own unit, rising unless the host asks; the trace through each pixel column's first, least, greatest and last value; the host's bands named in rows over the plot or over their tips.
irSpectrumDrawnfunctionirSpectrumDrawn(d: SpectrumData, o: Options, t: Look, size: Size): DrawnThe IR spectrum drawn: the wavenumber falling, a transmittance band a dip.
ramanSpectrumDrawnfunctionramanSpectrumDrawn(d: SpectrumData, o: Options, t: Look, size: Size): DrawnThe Raman spectrum drawn: counts against a shift rising, the laser said where the host gives it.
uvVisSpectrumDrawnfunctionuvVisSpectrumDrawn(d: SpectrumData, o: Options, t: Look, size: Size): DrawnThe UV-Vis spectrum drawn: absorbance against a wavelength in nm rising, each maximum named over its tip, the concentration and the path said where the host gives them.
spectrumSamplefunctionspectrumSample(): SpectrumDataThe Spectrum's sample, made once: a polystyrene film's transmittance against wavelength from 2.5 to 25 micrometres, as a dispersive instrument scans it, four bands named.
irSpectrumSamplefunctionirSpectrumSample(): SpectrumDataThe IR spectrum's sample, made once: polystyrene film on a 1 cm-¹ grid from 4,000 to 400, in transmittance, six bands named.
ramanSpectrumSamplefunctionramanSpectrumSample(): SpectrumDataThe Raman spectrum's sample, made once: polystyrene at 785 nm on a 1 cm-¹ grid from 200 to 3,200, in counts, over a slow fluorescent background, five bands named.
uvVisSpectrumSamplefunctionuvVisSpectrumSample(): SpectrumDataThe UV-Vis spectrum's sample, made once: riboflavin, 20 µM in water in a 1 cm cell, 200 to 600 nm every nm, four maxima.
spectrumChartconstantChartDef<SpectrumData>The Spectrum: a spectrum in its own x, a wavelength, a wavenumber or a shift, its bands named; the infrared, Raman and UV-Vis presets are its.
irSpectrumChartconstantChartDef<SpectrumData>The IR spectrum, the Spectrum's preset: the wavenumber falling from 4,000 to 400 cm-¹ with transmittance up, so a band is a dip.
ramanSpectrumChartconstantChartDef<SpectrumData>The Raman spectrum, the Spectrum's preset: counts against a shift rising, its bands named.
uvVisSpectrumChartconstantChartDef<SpectrumData>The UV-Vis spectrum, the Spectrum's preset: absorbance against a wavelength in nm rising, its maxima named over their tips.
NmrMultiplettype{ from: number; to: number; multiplicity: string; assignment?: string }A multiplet the host picked on an NMR spectrum: its range in ppm, its multiplicity as the host writes it, and the group it is assigned to.
NmrSampletype{ name: string; spectrum: Spectrum; protons?: number; baseline?: number; multiplets?: NmrMultiplet[] }A sample of a stacked NMR: its name, its spectrum in ppm, its protons where the host gives its total, the level its integrals are measured from, and its multiplets.
StackedNmrDatatype{ samples: NmrSample[]; nucleus?: string; frequency?: number; solvent?: string; integralUnit?: string; measures?: { name: string; value: string }[] }A stacked NMR's data: the samples, bottom to top, and what the context and the measurements say of the run.
heldStackedNmrfunctionheldStackedNmr(d: StackedNmrData, o: Options): voidA stacked NMR's data held, or refused by name: twelve samples at most, each in ppm with a line above its baseline; each multiplet inside its spectrum and rising; where integrals are drawn, no missing point in a range and areas that sum above naught.
stackedNmrDrawnfunctionstackedNmrDrawn(d: StackedNmrData, o: Options, t: Look, size: Size): DrawnA stacked NMR drawn: each sample to its own tallest line on a baseline one pitch above the last, the shift falling across, each multiplet named over its tallest line and its integral on a bracket under the baseline.
stackedNmrSamplefunctionstackedNmrSample(): StackedNmrDataThe Stacked NMR's sample, made once: ethanol, ethyl acetate and ethyl benzoate in CDCl3 at 80 MHz, each multiplet its protons' first-order pattern.
stackedNmrChartconstantChartDef<StackedNmrData>The Stacked NMR: the spectra of several samples offset up one chemical-shift axis, each multiplet named with its integral, no value axis since intensity is arbitrary.
AnalysedSpectratype{ at: number[]; spectra: Spectrum[]; window?: string }Spectra already analysed that a spectrogram draws: the time of each, in seconds, and each spectrum as levels in dB on one rising grid of frequencies in Hz; the window that made them, in the host's words.
SpectrogramDatatype{ waveform?: Waveform; analysed?: AnalysedSpectra; reference: Reference; top?: number }A spectrogram's data: a waveform, held or by range, or spectra already analysed, one of the two; what the dB are against; and the level at the top of the ramp where the host fixes it.
heldSpectrogramfunctionheldSpectrogram(d: SpectrogramData, o: Options): voidA spectrogram's data held, or refused by name: a waveform or spectra, one of the two; a reference above naught; every sample finite; the work within ANALYSIS_MOST spectra times window length.
spectrogramDrawnfunctionspectrogramDrawn(d: SpectrogramData, o: Options, t: Look, size: Size): DrawnA spectrogram drawn: time across, frequency up, each cell inked by its level on the ramp the key shows, a level absolute and the top fixed, so the same cell keeps its ink at every pan and zoom.
spectrogramSamplefunctionspectrogramSample(): SpectrogramDataThe Spectrogram's sample, made once: one spoken syllable at 16 kHz for 0.9 s, a fricative then a voiced diphthong, by source and filter.
spectrogramChartconstantChartDef<SpectrogramData>The Spectrogram: a waveform's spectra over time, frequency up and level as ink, computed here by Heinzel's windowed transform; a waveform by range is drawn on the samples held and asks the host for the rest.
SpectrumWaterfallRuntype{ quantity: string; unit: string; values: number[] }The run a waterfall's spectra step along: what it is ("speed", "time"), its unit ("rpm", "s") and its value at each spectrum, rising or falling.
SpectrumWaterfallWindowtype{ name: string; length: number; averages: number; rate?: number }The window and the averages that made each spectrum of a waterfall, in the host's words: its name, its length in samples, the blocks averaged, and its sampling rate where it says the length in time.
SpectrumWaterfallDatatype{ spectra: Spectrum[]; run: SpectrumWaterfallRun; reference: Reference; window?: SpectrumWaterfallWindow; floor?: number; orders?: number[] }A spectrum waterfall's data: spectra in order, each its levels in dB on one frequency grid; the run's value at each; what the dB are against; and the host's window, floor and orders.
heldSpectrumWaterfallfunctionheldSpectrumWaterfall(d: SpectrumWaterfallData, o: Options): voidA spectrum waterfall's data held, or refused by name: two spectra or more on one frequency grid in Hz, each a level in dB at every frequency; a value of the run to each, strictly rising or falling; orders only on a run in rpm.
spectrumWaterfallDrawnfunctionspectrumWaterfallDrawn(d: SpectrumWaterfallData, o: Options, t: Look, size: Size): DrawnA spectrum waterfall drawn: one line a spectrum, each an offset up and across from the one nearer and hiding the one behind, on one scale a bar holds; the run named along the baselines, the host's orders dashed along their ridges.
spectrumWaterfallSamplefunctionspectrumWaterfallSample(): SpectrumWaterfallDataThe Spectrum waterfall's sample, made once: a four-cylinder engine's noise at the driver's ear in a run-up from 1,000 to 6,000 rpm, a spectrum every 100 rpm, in dB re 20 µPa.
spectrumWaterfallChartconstantChartDef<SpectrumWaterfallData>The Spectrum waterfall: spectra one behind another at their speeds or times, the nearer hiding the farther, so an order shows as a diagonal ridge and a resonance as one that stands in place.
BodeSystemtype{ name: string; gain: ArrayLike<number>; phase: ArrayLike<number> }A system on a Bode plot: its name, its gain and its phase in degrees at every frequency.
BodeDatatype{ frequencies: ArrayLike<number>; gainIn: "dB" | "ratio"; systems: BodeSystem[] }A Bode plot's data: the frequencies in hertz, rising; whether the gains are in dB or a ratio; and the systems drawn on them.
heldBodePlotfunctionheldBodePlot(d: BodeData, o?: Options): voidA Bode plot's data held, or refused by name: two frequencies or more above naught, rising; a gain and a phase to each frequency of each system, finite; a gain as a ratio above naught.
bodePlotDrawnfunctionbodePlotDrawn(d: BodeData, o: Options, t: Look, size: Size): DrawnA Bode plot drawn: gain over phase on one log frequency axis, the phase unwrapped; a filter's passband and its -3 dB point, a loop's crossover, phase margin, phase crossover and gain margin, each read from the samples by straight lines between them.
bodePlotSamplefunctionbodePlotSample(): BodeDataThe Bode plot's sample, made once: a second-order Butterworth low-pass, its phase continuous through the cut-off.
bodeServoSamplefunctionbodeServoSample(): BodeDataThe Bode plot's loop sample, made once: a servo's open loop, an integrator with two poles and a delay, which costs phase and no gain.
bodePlotChartconstantChartDef<BodeData>The Bode plot: gain and phase against frequency on one log axis, a filter's -3 dB point or a loop's margins read from the samples.
SmithMarkertype{ frequency: number; name?: string }A marker the host sets on a Smith chart: a frequency in hertz and its name.
SmithDatatype{ nport: NPort; markers?: SmithMarker[] }A Smith chart's data: an n-port, of which port one's S11 is drawn, and the host's markers.
heldSmithChartfunctionheldSmithChart(d: SmithData, o?: Options): voidA Smith chart's data held, or refused by name: an S n-port of one port or more, its references resistances above naught, its frequencies rising, one matrix a frequency; the markers inside the sweep; a reflection that renormalises to a finite one.
smithChartDrawnfunctionsmithChartDrawn(d: SmithData, o: Options, t: Look, size: Size): DrawnA Smith chart drawn: S11 across the sweep on the reflection plane, its constant-resistance and constant-reactance circles, the best match, the VSWR circle and the band within it, the host's markers read as impedance.
smithChartSamplefunctionsmithChartSample(): SmithDataThe Smith chart's sample, made once: a 2.45 GHz patch antenna's S11 from 2.20 to 2.70 GHz in 50 ohms, markers at 2.40, 2.45 and 2.50 GHz.
smithChartconstantChartDef<SmithData>The Smith chart: an n-port's S11 across a sweep on the reflection plane, its best match, its VSWR circle and its bandwidth.
PolarCuttype{ name: string; angles: number[]; gain: number[]; frequency?: number }A cut of a radiation pattern: its name, its directions in degrees and the gain in dBi at each, and its frequency in hertz where it differs from the pattern's.
PolarDatatype{ cuts: PolarCut[]; frequency?: number }An antenna polar's data: the pattern's cuts, and the frequency in hertz they were taken at.
heldAntennaPolarfunctionheldAntennaPolar(d: PolarData, o?: Options): voidAn antenna polar's data held, or refused by name: one cut or more, each named once and read, a gain to every direction; the cuts' frequencies alike or each its own; the scale's options readable.
antennaPolarDrawnfunctionantennaPolarDrawn(d: PolarData, o: Options, t: Look, size: Size): DrawnAn antenna polar drawn: each cut's gain round the circle clockwise, the half-power ring, and for each cut its beamwidth, its peak and its front-to-back ratio read from the samples; the cuts named at leaders.
antennaPolarSamplefunctionantennaPolarSample(): PolarDataThe Antenna polar's sample, made once: a 2.45 GHz patch on a finite ground plane, its E-plane and H-plane cuts a degree apart.
antennaPolarChartconstantChartDef<PolarData>The Antenna polar: a radiation pattern's cuts as gain against direction round a circle, clockwise, with the half-power ring and each cut's beamwidth and front-to-back ratio.
SleepStagetype"Wake" | "REM" | "N1" | "N2" | "N3" | "Not scored"A stage of sleep, as the hypnogram draws them.
NightDatatype{ stages: string[]; start?: string; length?: number; stageNames?: { [name: string]: string }; recordedTo?: number }A night: each epoch's stage as the host names it, from the record's start; the clock at the record's start; the record's length in seconds; the host's mapping from its stage names to the six; and the seconds recorded so far, while it is being recorded.
heldHypnogramfunctionheldHypnogram(d: NightData, o?: Options): voidA night held, or refused by name: a stage to every epoch, each a stage or one the host's mapping gives, a clock that reads, a length of whole epochs.
hypnogramDrawnfunctionhypnogramDrawn(d: NightData, o: Options, t: Look, size: Size): DrawnA hypnogram drawn: the five stages as rows against the clock, REM in series two's ink; total sleep time, efficiency, sleep onset, REM latency, WASO and WASF worked out from the epochs and stated, each stage's share.
hypnogramSamplefunctionhypnogramSample(): NightDataThe Hypnogram's sample, made once: a night as an EDF+ file's annotations carry it, a stage for each 30 s epoch, lights off at 23:00 and on eight hours later.
hypnogramChartconstantChartDef<NightData>The Hypnogram: a night's sleep stages as rows against the clock, the night's totals worked out from its epochs and stated.
CrossPlotAxistype{ series: string; lo?: number; hi?: number }An axis of a cross-plot, or what colours its points: a series of the well by its mnemonic, and the limits the host gives, either or both.
CrossPlotPlacetype{ x: number; y: number }A place on a cross-plot, in the units of its x and its y.
CrossPlotLinetype{ name: string; points: CrossPlotPlace[]; marks?: CrossPlotPlace[] }One of the host's lines on a cross-plot: its name, its points in order, and the places it is marked at.
CrossPlotDatatype{ well: Well; x: CrossPlotAxis; y: CrossPlotAxis; colour: CrossPlotAxis; lines?: CrossPlotLine[]; leaveOut?: boolean }A cross-plot's data: a well, its series across, up or down and colouring the points, the host's lines, and whether a value at or under naught on a log axis is left out and counted rather than refused.
heldCrossPlotfunctionheldCrossPlot(d: CrossPlotData, o: Options): voidA cross-plot held, or refused by name: its well; its three series held by the well; each axis's limits rising, above naught on a log axis, as is every value on it unless left out; each line named, of two points or more, three at most; drawn as points, 500,000 at most.
crossPlotDrawnfunctioncrossPlotDrawn(d: CrossPlotData, o: Options, t: Look, size: Size): DrawnA cross-plot drawn: a point a sample on its step of the third series, the samples missing a value and the points outside the axes counted, the host's lines over them named at their ends; or the points as a density of counts.
crossPlotSamplefunctioncrossPlotSample(): CrossPlotDataThe cross-plot's sample, made once: one well's neutron porosity against its bulk density coloured by its gamma ray, with the host's sandstone, limestone and dolomite lines.
crossPlotChartconstantChartDef<CrossPlotData>The Cross-plot: one series of a well against another, a point a sample coloured by a third, over the host's lines.
Filterstype{ highPass?: number; lowPass?: number; notch?: number }The display filters a strip chart's row is drawn through, each in hertz, each left out where not given or naught.
Sectiontype{ b0: number; b1: number; b2: number; a1: number; a2: number; tau: number }A second-order section of a display filter, transposed, and its time constant in seconds: its poles'.
FILTERSconstantreadonly ["highPass", "lowPass", "notch"]The display filters by name, in the order a row is drawn through them.
NOTCH_QconstantNOTCH_Q: 30The notch's Q: the band it takes 3 dB from is its frequency over 30 wide.
WARM_UP_TAUSconstantWARM_UP_TAUS: 5How many of the slowest section's time constants a row's filters run before its view.
sectionsOffunctionsectionsOf(f: Filters, rate: number): { sections: Section[]; left: ("highPass" | "lowPass" | "notch")[] }The sections a row at a rate is drawn through, Butterworth high- and low-pass and the notch at Q 30, their coefficients from det; the filters at or past half the rate left out and named; a frequency below naught refused by name.
warmUpOffunctionwarmUpOf(sections: Section[]): numberThe seconds a row's filters run before its view: five of the slowest section's time constant.
filteredfunctionfiltered(x: ArrayLike<number>, sections: Section[]): Float64ArrayValues drawn through the sections in turn, each starting at rest on its first input as if it had always stood.
filtersSaidfunctionfiltersSaid(f: Filters): stringThe filters as the context line says them: "1–70 Hz, notch 50 Hz".
AVERAGEconstant"Avg"What a montage row's second part names to take the mean of all the montage's electrodes.
MontageRowtypereadonly [string, string]A montage's row: an electrode less another, or less the average.
MontageChaintype{ name: string; rows: MontageRow[] }A chain of a montage's rows, drawn as one group.
Montagetype{ name: string; chains: MontageChain[] }A montage: its name and its chains in order; a host may give its own.
DOUBLE_BANANAconstantMontageThe ACNS longitudinal bipolar montage: the temporal chains left then right, the parasagittal left then right, then the midline.
TRANSVERSEconstantMontageThe transverse bipolar montage, its chains across the head from front to back.
AVERAGE_REFERENCEconstantMontageThe average reference: each of the 19 electrodes less the mean of all of them, in the double banana's five chains.
MONTAGESconstantreadonly Montage[]The montages a clinic names: the double banana, the transverse and the average.
montagedfunctionmontaged(electrodes: Waveform[], m: Montage): { data: StripData; left: string[] }A montage's rows from a record's held electrodes, each chain a group, each row its parts' difference sample by sample, the average with every electrode in it; electrodes found as recorders label them; what was left out said; made once a record and montage.
extremesOffunctionextremesOf(values): ExtremesA series' extremes, built once and kept while the series lives.
m4Windowfunctionm4Window(extremes, i0, i1, cols): number[]M4 over a window of the data into pixel columns, from the series' extremes.
Streamclassnew Stream(capacity): { push; pushAll; at; window(); length; total; bytes }The last capacity values of a feed in fixed memory: a ring allocated once, and a window handed to a chart in order, oldest first.

Your own recipe · 17

Charts written as data: layers of marks bound to fields, checked by a JSON Schema, never run as code.

The Your own recipe area of the chart API.
NameSignatureWhat it does
RECIPESconstantreadonly ChartDef<RecipeSpec>[]The house recipes, in the order they teach, each written as its course: a combo on two axes, a sparkline, stacked with a total, a sized lollipop, an annotated trend, a delivery spread, a shop floor and offices on the world.
RECIPE_SCHEMAconstantJSON Schema 2020-12Exactly what a recipe may contain: rows, x, layers of marks, a second axis, annotations.
layerGroupsfunctionlayerGroups(rows, layer): [name, rows][]A layer's rows, those its where keeps, split by its series field into named groups in the order they first appear; a layer with no series field one group, under its label or its field.
recipeNamesfunctionrecipeNames(recipe, forms?): string[]A recipe's series by name, in the order they first appear: what its legend lists, its inks are drawn in, and its observationsOf are keyed by.
placeNamesfunctionplaceNames(recipe): string[]A recipe of places' series by name, in the order they first appear, its quiet layers left out.
recipesfunctionrecipes(forms: readonly RecipeForm[]): { RECIPES; OWN_RECIPE }The house recipes and your own, drawn in the forms handed in beyond a recipe's own axes; the catalogue hands in the map's.
recipeChartfunctionrecipeChart(forms)(id, name, summary, course | sample, enter?, words?): ChartDef<RecipeSpec>A recipe chart, drawn in the forms handed in: a course's last step is its sample, the same object.
PLACE_FORMconstantRecipeFormThe plane and the map, as a recipe's form: a recipe whose x is a plane, or which names a map, is drawn and named by <hue-map>'s own code.
MAP_RECIPESconstantreadonly ChartDef<RecipeSpec>[]The map's house recipes, examples of <hue-map>, in the order they teach: a shop floor on a plane, offices on the world.
drawRecipefunctiondrawRecipe(spec, options, look, size, forms?): DrawnDraw a recipe: its x, the series each layer splits into, one or two axes, annotations on top. Runs no code.
LAYER_READSconstant{ axes: { said; marks; fields }; places: { said; marks; fields } }What each form of a recipe draws of a layer: along an axis bars, stacking, combining and smoothing; on a plane or a map segments, paths, a second point, an order, text, closing, quiet and width.
layersReadfunctionlayersRead(spec, form: "axes" | "places"): voidA recipe's layers held to what its form draws: a mark it does not draw, or a field only the other form reads, refused by name (RangeError), never left out unsaid.
validatefunctionvalidate(schema, value, path?): string[]Check a value against a schema; every problem as a sentence with its path, from path ($ when omitted).
chartSchemafunctionchartSchema(def): JSON SchemaThe JSON Schema of a catalogue chart's spec, generated from the options it declares and those every picture takes (PICTURE).
drawPlacefunctiondrawPlace(recipe, options, theme, size): DrawnDraw a recipe of places: x a plane (or longitude on the world map) and each layer's y the other coordinate, one scale, every row one place; points, paths in order, segments, areas and text; a lane on the map follows the great circle.
OWN_RECIPEconstantChartDef<RecipeSpec>The chart a reader's own recipe is drawn as, slug recipe; its sample is where a new recipe starts.
checkfunctioncheck(schema, value, path?): Problem[]Every problem a value has against a schema as data: its path, its kind (type, enum, required, extra, a bound), what is allowed and what was found. validate is its sentences.

From data and words · 10

Rows pasted as CSV or JSON become a proposed recipe, and a request in words finds the chart: plain rules, the same answer every time.

The From data and words area of the chart API.
NameSignatureWhat it does
BOOK_PHRASESconstantreadonly [RegExp, string][]The order book's phrases (an order book, the market's depth, bids against asks), each read as one word of the book's tags wherever a request in words is read, so neither word alone finds the book, nor another chart; matched only whole.
parseRowsfunctionparseRows(text): Row[]Rows from pasted text: a JSON array, an object with rows, or CSV with a header (comma, tab or semicolon; quoted cells); figures read by one grammar, one written with a decimal comma refused by name.
figureOffunctionfigureOf(text: string): number | null | "guessed"A figure's text read by one grammar (a point before the decimals, commas only between groups of three): its number, null where it is none, "guessed" where a decimal comma would have to be guessed.
guessedSaidfunctionguessedSaid(named: readonly string[]): stringA door's refusal of the figures it would have to guess, each named as the door places it, three named and the rest counted.
fieldsOffunctionfieldsOf(rows): Field[]Each field of the rows with its kind (time, number or name), how many values it takes, and a number's range.
suggestRecipefunctionsuggestRecipe(rows, title?): RecipeSpecA recipe proposed from the fields by stated rules: x, a series split, bars or lines, a second axis for a value ten times larger or smaller, sums where an x repeats.
lookOffunctionlookOf(request: string): { look: Look; read: string[] }How a request in words asks for its chart to be drawn (its file, a light ground, a print PDF, Display P3, a palette) and what was read: one reading for the MCP door and a Power BI visual's ask.
Requestedtype{ format; mode?; print?; readout?; palette? }How a chart is to be drawn, as a request in words says it.
findChartsfunctionfindCharts(request, charts, limit?): Found[]The charts of a list that fit a request in words, scored by title, tag and the words people use, with the options the words named; the words that say how to draw (a PDF, for the printer, patterns) score nowhere.
chartsForfunctionchartsFor(request, limit?): Found[]findCharts over the catalogue, the recipes and this library's own charts: 'a donut of sales by region' finds the donut.

Brand and tokens · 9

A company's colour as series one of any number of series, reached through the kernel and kept by the solver, and any theme as CSS design tokens.

The Brand and tokens area of the chart API.
NameSignatureWhat it does
hexToRGBfunctionhexToRGB(hex): RgbA #rgb or #rrggbb colour as sRGB channels in [0, 1].
rgbToHexfunctionrgbToHex(rgb): stringsRGB channels as #rrggbb.
themeFromBrandfunctionthemeFromBrand(base, brand, n?): { theme; distance }The theme whose first series of n reads out as a brand colour: its hue, lightness and chroma share from the brand's own through the read-out's geometry, the start set back by series one's seat among n, a fine search settling the rounding; the Oklab distance comes back. The other series follow by the kernel's law.
ThemeSettingstypeinterface ThemeSettings { mode?; readout?; ground?; palette?; shape?; high?; start?; lightness?; chroma?; rise?; fall?; brand? }What a host lets a reader set, read from its own attributes, arguments or pane; each left out is the kernel's own.
themeOffunctionthemeOf(settings: ThemeSettings): LookA host's settings as a theme, on the ground asked, nothing solved: every host reads its settings through it.
brandedThemefunctionbrandedTheme(t, settings, n): { theme; branded; unbranded?; distance? }A brand colour as series one of n over a theme; not a colour, refused (BadBrand); under a named palette or high contrast, not drawn, and said.
BadBrandclassclass BadBrand extends RangeError { brand }A brand that is not a colour: the brand's fault, said as such, never the data's.
tokensfunctiontokens(theme, n, prefix?): Record<string, string>A theme as design tokens: the ground, each series' ink, rise and fall, the greys and every label's ink as CSS custom properties.
tokensCSSfunctiontokensCSS(theme, n, selector?, prefix?): stringThe tokens as a CSS rule.

Lettering · 12

The kernel's own stroke font, so a PNG made on a server carries its labels.

The Lettering area of the chart API.
NameSignatureWhat it does
setWordfunctionsetWord(text: string, size: number, weight: Weight, tracking?: number): TypesetA word set in the face (Inter, carried as data): put in NFC, each code point mapped to its glyph, a number's figures tabular and nowhere else, neighbours kerned as GPOS applies its pair lookups; each glyph's pen and the word's width.
verticalAtfunctionverticalAt(size: number, weight?: Weight): { ascent; descent }The face's ascender and descender at a size, in px.
wordRingsfunctionwordRings(set: Typeset, x: number, y: number, angle?: number, ox?: number, oy?: number): Loop[]A set word's outline as closed rings in px: its glyphs' quadratic contours flattened within 1/16 px from its pen on its baseline, turned about its anchor where it is turned; filled by path.
inNumberfunctioninNumber(codePoints: number[]): boolean[]Which code points of a text stand in a number: digits, a separator between digits, and a sign where it starts a number. The face's figures are tabular there and nowhere else; the SVG's tspans read the same runs.
unletteredfunctionunlettered(text: string, weight?: Weight): number | undefinedThe first code point of words the face has no glyph for (Latin, Greek and Cyrillic are lettered), none where it letters every one; the direction marks, joiners and controls no face draws are set as nothing.
FACE_FAMILYconstantFACE_FAMILY: "Hue Inter"The family a page sets the element's words in: the face's file, registered under a name of its own so a page's own Inter never stands in for it.
faceFilefunctionfaceFile(weight: Weight): Uint8ArrayThe face's file at a weight: a TrueType font of the glyphs the library carries, with their kerning (GPOS) and tabular figures (GSUB tnum), hinting left out, for FontFace; written once a weight.
stampfunctionstamp(drawn: Drawn, text: string, mode: "dark" | "light", side?: "left" | "right"): DrawnThe mark row's words lettered into a picture along its foot, a pad in from the side they read from, into its raster and display list, so the row reaches every file made from it; the picture records the stamp and the box its words stand in, so a host can lay a link over them, and a mirror letters them afresh on the other side.
borderedfunctionbordered(drawn, text, mode): DrawnA picture drawn in the room above the mark row set in the frame's mark row (DESIGN-SYSTEM §2.11): its canvas grown by MARK_ROW at the foot, every place it holds where it was, and the row lettered (stamp).
inRoomfunctioninRoom(drawn, x, y, size): { x, y, size }A place on a picture, and the size asked, as its chart laid them out: above the mark row where the picture carries one, else as given. What a chart's pick is handed for a click.
groundedfunctiongrounded(raster, mode): RasterA copy of a raster over the chart's ground, each pixel laid over it by its own alpha, opaque: a PNG that reads the same on any background. The chart's own raster and digest are untouched.
withLabelsfunctionwithLabels(drawn, mode): RasterA chart's raster with its words lettered in the face, each placed as a page places it and filled by area, for a PNG made with no page. The chart's own raster and digest are untouched.

Languages and direction · 9

Numbers, dates and instants in the reader's locale and time zone, and the whole chart mirrored for right-to-left readers; the pixels' digest unchanged.

The Languages and direction area of the chart API.
NameSignatureWhat it does
localisefunctionlocalise(text, locale, timeZone?): stringA label in a locale: the kernel's numbers in the locale's digits, separators and compact notation, ISO dates in its medium date style.
readingRefusedfunctionreadingRefused(locale: string | undefined, timeZone: string | undefined): string[]What a host asked of a reader's writing that no Intl reads, each said: a locale that is no BCP 47 tag, a time zone the IANA database does not hold or one named by an abbreviation.
localisedfunctionlocalised(drawn, locale, timeZone?): DrawnA chart's labels and regions written in a locale; the raster and its digest unchanged. A label written otherwise keeps the picture's words as lettered, which a PDF or PNG sets where the face cannot letter the locale's script.
letteredTextfunctionletteredText(label): stringThe words a file the face letters (a PDF, a PNG) sets for a label: its own, or where a locale wrote them in a script the face does not letter, the words the picture was drawn in.
zonedfunctionzoned(text, timeZone): stringText with its instants carried into a time zone and written ISO 8601 with the zone's offset, the same on every machine: what localise and localised write when a time zone is asked for with no locale, so the zone is never silently dropped.
mirrorOpfunctionmirrorOp(op, width): OpAn op mirrored about the picture's vertical centre line.
mirroredfunctionmirrored(drawn): DrawnA chart for a right-to-left reader: marks, labels and regions mirrored, text placed but not reversed; its axes, navigator and handles with them, so a pointer reads what it points at; a stamp's words lettered afresh in the other corner, reading the right way round.
mirroredFramefunctionmirroredFrame(drawn): DrawnA map, a dial that runs clockwise, or a chart that keeps time, for a right-to-left reader: its frame, measurements, strips, key and words there mirrored as a chart's are, its plot keeping its east, a dial its three on the right, a record its time running left to right, every mark, word, place and handle in it where it was.
mirroredForfunctionmirroredFor(def, drawn): DrawnA picture for a right-to-left reader as its chart is read so: a map's frame alone, a dial's that runs clockwise and a chart's that keeps time (its sense, or the picture's), each keeping its plot (mirroredFrame); any other chart whole (mirrored), its axes, navigator and handles with it.

Movement · 66

Everything that moves on a chart moves toward an objective by the kernel's law of observation: a mark stands at the fill of a depth that grows turn by turn, depth arriving only with a return; the colours are the chart's own and do not move. An entrance, or a change arriving as new returns and moving each mark to its new place; every frame has its digest; a meter says the turn and when it settles.

The Movement area of the chart API.
NameSignatureWhat it does
FrameControltype{ text: string; label: string; pressed?: boolean; disabled?: boolean; sets?: { options?: Options; shown?: Partial<Shown>; press?: ClockPress } }One control of the frame's controls row: its words, its name for a screen reader, whether it is pressed or cannot be, and what pressing it sets: options, how the chart is shown, or a clocked view's press, which every host that draws the row hands to the view's own press.
ControlGrouptype{ name: "month" | "week" | "range" | "show" | "clock" | "timer"; label: string; controls: FrameControl[] }A group of the frame's controls row: the controls that belong together, a segmented control where one is pressed.
frameControlsfunctionframeControls(def, data, options, shown: Shown): ControlGroup[]A chart's controls row, declared once for every host (DESIGN-SYSTEM §2.11): a clocked view's Seconds and Hold, or a timer's Start, Lap and Reset; Previous, Today and Next for a chart that steps through its pages (Steps: a calendar's months), a chart's range presets, and Grow where it is offered (left out while the reader has zoomed), each saying what it sets. The element, the Power BI visual and huedraw.com draw it under the picture; a host keeps its own (Play, full screen, files) in the same row.
ownStepfunctionownStep(data, dt, tick, moved, most?): dataA stand-in's step on its own clock: data given comes back as given; a step with no tick the very data where no time passed, else its fields unchanged; n ticks as `moved` makes them, the part of a tick carried on the mark.
sameFieldsfunctionsameFields(a, b): booleanWhether two data hold the same fields, each the very value: a step that changed none is not drawn again.
FLOORconstantnumberThe dark left, 1 − L, at which a series has settled: at it or under it, its marks stand exactly at their objective.
CADENCEconstantnumberThe turns a page shows a second, 120, ticks of 1/120 s as the live charts keep. The movement is counted in turns; the cadence is only how fast a page shows them.
surfacesOffunctionsurfacesOf(drawn): Surface[]A chart's series as surfaces in its chamber, each at its concept's position, as the chart declared them while it drew; one surface for a chart that declares none.
pointsOffunctionpointsOf(surfaces): [number, number]The two observers' points, a stated convention: the middle of the widest gap between the surfaces and their antipodes, and opposite it, so every bond is a weight.
coursefunctioncourse(surfaces, floor?): CourseThe returns turn by turn, in the loop's order (generation, surface, observer), each received on the chart's one Centre: every surface's L after every turn, and the turn all have settled by.
progressAtfunctionprogressAt(course, turn, floor?): number[]How far each surface has come after a number of turns: its L, and exactly 1 once the dark left is at most the floor.
entrancefunctionentrance(def): "rise" | "draw" | "sweep" | "grow"How a chart enters: its declared kind, or growing.
grownfunctiongrown(op, s): Op | nullA mark grown a share s of the way from nothing to itself about its own centre: a box or shape from its middle, a line from its start, a point by its radius, a slice outward; nothing at 0, itself at 1.
enteredfunctionentered(op, kind, s, box, base?): Op | nullA mark a share s of the way through an entrance, as geometry on the list: risen from the chart's base (else the plot's floor), cut where a line drawn left to right has reached, cut where a hand swept round has reached, or grown.
risenfunctionrisen(op, base, t): OpAn op risen a share t of the way from its base: along x or y from the value axis's zero, or outward from a round chart's centre, in proportion.
revealfunctionreveal(drawn, t | shares, kind?): DrawnA chart part of the way through its entrance: axes and legend as finished, each series' marks through the entrance to its own share as geometry on the list, so the frame's list draws exactly the frame.
morphfunctionmorph(from, to, t | shares): DrawnTwo pictures part of the way apart, as geometry on the list: each mark matched to itself by its kind and its surface's position (a mark of the furniture by its kind and its part) and its place, and moved there by its series' share, the furniture by the least share; a mark that leaves shrinks by its own surface's share, found in the new picture by position, and one that arrives grows, so nothing snaps. The frame carries its own data range.
beginfunctionbegin(to, turn, kind?): MovementA chart's entrance, as a movement from nothing to itself, by its course of returns.
moveTofunctionmoveTo(movement, to, turn): MovementA change, arriving as new returns: from the picture shown at this turn, whatever movement it was in, to the new chart. Nothing snaps.
frameAtfunctionframeAt(movement, turn): DrawnThe picture a movement shows at a turn: a pure function of the turn, with one digest. Nothing moves between returns.
tickedfunctionticked(owed, dt, tick, most?): { n; owed }The charts' one clock: the whole ticks of a chart's own fixed clock reached in a step, the part of a tick carried in the chart's own data, so every frame rate lands on the same ticks; a step of naught to a day, anything else refused.
Tickedtype{ n; owed }Whole ticks reached in a step, and the part of a tick carried.
LONGEST_STEPconstantnumberThe longest step a live chart takes: a day, in seconds.
FRAME_MOSTconstantnumberThe most seconds one frame hands a step, a quarter second: a page come back to moves on, it does not race.
PATIENCEconstant30000How long the door waits on a host's range, in milliseconds, before a picture drawn from blocks is the picture.
answeredfunctionanswered(data, wants: readonly Want[], patience?, passes?: readonly Waveform[]): Promise<{ data; unanswered: readonly Want[]; unpassed: readonly Waveform[] }>The data with a picture's wants answered and its passes run: each waveform wanted holding its views' samples and one view's span either side, the held kept and the rest fetched by its range, what lies past dropped; each pass over a waveform made from others by range reading its roots a chunk at a time and building its extremes, carried on its first root by range, the two most recent settings kept; and the wants and passes whose range failed, answered short or did not answer in time.
drawnWholefunctiondrawnWhole(draw: (data) => Drawn, data, patience?): Promise<Drawn>A picture drawn whole, as a server render finishes it: drawn, its wants answered and its passes run, drawn again, until it wants nothing or none of what it wants can be had and its picture, said so, is the picture.
Askertype{ data(given): given; drawn(given, d: Drawn): void }A screen host's wants asked as it draws: data gives what to draw for the data given, what the answers made of it while the same data is given; drawn hands each picture over, its wants and passes asked one ask at a time.
askerfunctionasker(redraw: () => void, patience?): AskerAn asker for a screen host: a picture's wants and passes asked through each waveform's range, one ask at a time; an answer that had any of them drawn, redraw called; what could not be had of the data given not asked again of it, so a picture none of whose wants can be had is final; other data given starts afresh, an answer for the data before dropped.
TriggerWatchtype{ setting: TriggerSetting; state: TriggerState; after: number; moment?: number; waiting: readonly number[] }A trigger as the door keeps it on a live waveform: its setting and state, the moment the display holds on, and the moments waiting on the samples after them.
watchedfunctionwatched(setting: TriggerSetting, phase: TriggerState["phase"], after?, next?): TriggerWatchA trigger watched from a place in the record, Run or Single, the display holding on a moment once its samples after have arrived.
arrivedfunctionarrived(w: TriggerWatch, samples: ArrayLike<number>): TriggerWatchThe watch once live samples arrive: the trigger called on them, the display held on the last moment found whose samples after have all arrived; Single, the first, and then none.
rewatchedfunctionrewatched(w: TriggerWatch, phase: TriggerState["phase"], setting?): TriggerWatchThe watch set going again where it stands, Run or Single, or with a new setting: the display held where it was until a moment is found.
playerfunctionplayer(step, { frames?, watch?, said? }?): PlayerA host's frame loop, one to each chart shown: steps once a display frame by the seconds since the last, paused on its control, where the reader asks for less motion, and while the page is hidden; each call its own, nothing shared.
Playertype{ playing; play(); pause(); stop() }A frame loop, playing or paused; stopped for good by stop().
viewWatchfunctionviewWatch(target, page?: Watch, seen?: ViewObserver): WatchA page's watch with one target's view, for a player: its page hidden while the page is or while the target stands out of the view, so a chart scrolled out of sight takes no step and steps again as it comes back; out of view until the page first reads it, in view where the page reads no view.
ViewObservertypenew (seen: (entries: { isIntersecting }[]) => void) => { observe(target); disconnect() }A page's reading of whether a target stands in its view: the browser's IntersectionObserver, or a test's own.
STILL_OVERWRITEconstantSTILL_OVERWRITE: 1000How often a picture that overwrites is drawn again where the reader asks for less motion, in milliseconds: whole, once a second.
Timertype{ set(then: () => void, ms: number): id; clear(id) }A timer a host waits on: the page's own, or a test's.
OverwriteDrawstype{ given(); drawn(d: Drawn); stop() }What a host's draws of data as it comes are held to: new data given, a picture drawn, and every timer and listener let go.
overwriteDrawsfunctionoverwriteDraws(draw: () => void, { watch?, clock?, timer? }?): OverwriteDrawsA screen host's draws of data as it comes: where its last picture overwrites and the reader asks for less motion, the data given drawn whole once a second, the newest then, and what waits drawn at once when the wish is let go; else each drawn at once. A reader's own moves are never held.
clockerfunctionclocker(tick, { frames?, timeouts?, watch?, wall?, ended? }?): ClockerA clocked view's loop, never counting: told after each draw whether it ticks and when its picture next changes, it asks for one frame then, by one timeout (never an interval) or the next display frame for a gliding hand; none while the page is hidden and one at once when it shows; one at once when a reader's wish for less motion changes; a countdown's end timed apart so a hidden page hears it, though a browser may hold a hidden page's timer back a minute, and a frozen page's longer.
TIMEOUT_MOSTconstantnumberThe longest one timeout waits, 2³¹−1 ms (24.8 days): a longer wait is set at that, and again.
playedOptionsfunctionplayedOptions(def, data, options, { switched?, page?, still }): OptionsThe options a clocked view is drawn under where it plays: its finest part (seconds, a stopwatch's hundredths) as the reader's Seconds switch sets it, else the page's seconds, else off while it ticks under a wish for less motion, else its option.
clockedNamefunctionclockedName(name, drawn): stringA clocked view's stage named by the view and its time on the minute, rewritten as the minute changes and never announced.
timesShownfunctiontimesShown(drawn): { datetime; text; timer }[]The times a reader's <time> elements write: each zone's with its ISO 8601 datetime, or a timer's as an ISO 8601 duration with the timer role.
endOncefunctionendOnce(): (ends, wall) => booleanA view's end raised once: the first time it is read at or past its end, never for one already past it when first read.
Clockertype{ drawn(at: ClockDrawn); still: boolean; stop() }A clocked view's loop: told after each draw, read for the reader's wish for less motion, stopped for good.
ClockDrawntype{ ticking: boolean; next: Millis | undefined; wall: number; ends?: number }What a host tells its clocked view's loop after a draw.
Timeoutstype{ set(f, ms): id; clear(id) }The timeouts a host sets: the browser's setTimeout, or a test's own.
Framestype{ request(frame): id; cancel(id) }The frames a host draws: the browser's requestAnimationFrame, or a test's own.
Watchtype{ still?; hidden? }A reader's wish for less motion and a page that can be hidden: the browser's own, or a test's.
readingfunctionreading(movement, turn): ReadingThe meter: the turn, the turn it settles at, each series' share, moving or settled, and what is moving.
Showntype{ grow: boolean }How a chart is shown on every host that can move: whether it grows, entering and every change moving to its new place.
Toggletype"grow" | "depth"A toggle of the switch.
TOGGLESconstantreadonly Toggle[]The toggles, in the switch's order: Grow.
SHOWN_DEFAULTconstantShownHow a chart is shown until the reader chooses: flat, at once.
TOGGLE_WORDSconstantRecord<Toggle, string>Each toggle's name on the switch.
ShowOffertype{ toggle; offered; why? }A toggle on a chart's switch: offered, or not and why.
zoomedInfunctionzoomedIn(def, options): booleanWhether the reader has zoomed a chart that can be: its view options narrower than the whole span.
showsOffunctionshowsOf(def, zoomed?): ShowOffer[]The toggles a chart offers, each on its own: Grow unless it is live or its reader has zoomed it (Grow until you zoom); words for each not offered.
shownAsfunctionshownAs(def, asked: Shown, zoomed?): { shown; said? }How a chart is shown when toggles are asked for: each as asked where offered, else off, said.
GROW_MOSTconstantnumberThe most marks a picture grows by: one of more is shown whole at once, a movement's frame of it costing more than a display frame.
growLookfunctiongrowLook(def, options, choices?): stringA picture's look, the key a host hands Grow with each picture (Grower.to): its own choices between looks and the chart's toggles and choices, never a range or a text. A new look enters again, as a new Grow does; new data or a dial turned moves from the screen.
growerfunctiongrower(def, grow, paint, { frames?, watch?, clock? }?): GrowerGrow on the charts' one frame loop: each flat picture handed to it (renderFlat) entered, entered again at a new look (growLook), or moved to from the frame on the screen, painted frame by frame with the meter until settled, each frame flat for the host to finish; at once with Grow off, where the reader asks for less motion, and past GROW_MOST.
Growertype{ to(d, look?); reading; settle(); stop() }A host's Grow: a new flat picture, the meter now, the picture at once, and stopped for good.

Readable by everyone · 61

Compliance by construction (comply), contrast, colour-vision simulation, solved themes, patterns and markers that tell series apart without colour, the ground between touching series, and the regions in reading order.

The Readable by everyone area of the chart API.
NameSignatureWhat it does
placedOptionsfunctionplacedOptions(handles: readonly DrawnHandle[], place: HandlePlace): OptionsThe options a handle's move writes, for a host's next draw: a cursor's place by its name, or a window's edges along its axis, each read as the handle says; none where the handle writes none.
handleNamedfunctionhandleNamed(h: { name; value? }): stringA handle named as a host's control over it names it: its name, and its place where the picture writes it apart ("Cursor, 12.5 s").
handleSaidfunctionhandleSaid(h: { name; value? }, d: { measurements? }): stringWhat a host says as a handle moves: the handle as named, then the picture's measurements, each its name and value.
stepSharefunctionstepShare(h: DrawnHandle): numberA handle's step, a share of its span: one of the places it moves between (a sample, a candle, a row) where its pixels hold fewer, else one pixel.
handleSharefunctionhandleShare(d: Drawn, x: number, y: number, slack?: number): { handles; share } | nullA press on a picture read back to the handles it may take and its share of their span along their axis: on a cursor's grip, the cursors on its span; on a window's strip (a navigator's, an overview's), or within the pointer's slack of it, its window and edges; none farther off.
shareAlongfunctionshareAlong(h: DrawnHandle, x: number, y: number): numberA pointer's place as a share of a handle's span, along the axis it moves on: 0 at the span's start, 1 at its end, past them beyond.
handlePressfunctionhandlePress(handles: readonly DrawnHandle[], share: number, edgePx?: number): HandleGesture | nullWhat a press on a span's handles takes: the nearest edge or cursor within reach, none where two stand equally near; inside a window the window; outside it the window centred there, its width kept.
handleSessionfunctionhandleSession(d: Drawn, x: number, y: number, edgePx?: number, least?: number): { first; move(x, y) } | nullA whole drag on a picture's handles from a press at a place: what the press sends, then each move's place, read along the handles' axis, when it differs from the place last sent.
handleStepfunctionhandleStep(g: HandleGesture, sent: HandlePlace, share: number, least?: number): HandlePlace | nullOne move of a drag: the place it asks for when it differs from the place last sent, else none.
handleDragfunctionhandleDrag(g: HandleGesture, share: number, least?: number): HandlePlaceA drag after its press: what the press took moved by the pointer's travel, never to the pointer; a window kept inside its span at its width, an edge the least share short of the other, a cursor on its span.
handleKeyfunctionhandleKey(handles: readonly DrawnHandle[], name: string, key: string, shift: boolean, step: number, least?: number): { place } | { remove } | { leave } | nullA key on a handle's control: the arrows along its axis (left and right across, up and down an overview) a step, ten with Shift; Home and End its span's ends; Delete removes a cursor a reader may take away; Escape leaves for the chart's stop; none for a key it does not answer.
readAtfunctionreadAt(drawn, x, y): { pane, value, text, category, x, row }A place on a drawn picture read back to its data, in the pane whose band holds it: the value through the inverse of its linear or log scale, written at the chart's step or decimals, or as a signed percent change where the axis is one (a change that rounds to naught written +0.0); the category whose band holds it; the numeric x there, past an overwrite's pen the pass before, and, on a strip chart, the row and its value, each written in its unit to a pixel's worth; none outside the plot.
switchSeriesfunctionswitchSeries(hidden, label, listed): string[]The hidden series after a legend entry is pressed: shown again if hidden, else hidden, unless it is the last series drawn, which stays drawn; every host's legend switches this way.
legendNamefunctionlegendName(label: Label): stringA series' name, whole: its switch's own words, or the whole name a wrapped or cut one carries; the name a host switches its series by.
legendEntriesfunctionlegendEntries(labels: Label[]): Label[]The series' switches, one to each: a chip, or a name at its marks (Label.series), its first line; a wrapped name's later lines (Label.line) are its words alone.
lastDrawnfunctionlastDrawn(labels): string | nullThe switch that must stay pressed, the last series drawn, if only one is: a host shows it as not pressable.
regionAtfunctionregionAt(hits, x, y, slack?): Hit | nullThe region under a place, its box read either way round: the smallest holding it; a mark within the slack (PICK_SLACK, 2 px) only where it lies on that region, never a neighbour beside it; with none holding it, the nearest within the slack; every host's hover, click and tooltip pick this way.
PICK_SLACKconstantPICK_SLACK: 2How far outside a region, in pixels, a pointer still picks it.
stepTofunctionstepTo(key, at, count, walk?): number | nullWhere a key moves the focus among the data points: the arrows one step, Home the first, End the last; null for a key that does not move it. Given the picture's walk (Drawn.walk, the Calendar's), Up and Down move a row within a page and stay at its edge, Home and End go to the page's ends, and Left and Right are swapped on a mirrored picture.
focusSaidfunctionfocusSaid(at, count, hit): stringWhat a screen reader hears as the keys reach a point: "3 of 24: …", its place among them and its words.
describedfunctiondescribed(name: string, d: Drawn): stringA picture's stage named and described for a reader, each sentence once: the chart's name, its title and context (a record's span and scale) and its said strip, each whole, the lines it says beside it, the waveforms its table names, its measurements, and how many data points its keys move between.
tipOffunctiontipOf(drawn, i): TipThe tooltip for the region at i, on hover and on focus alike: its category, and every series' datum at that category in drawn order, each its words with the category taken out and its series' ink for its dot; a region of no category stands alone, its words whole.
Tiptype{ title?: string; rows: TipRow[] }A tooltip's model, as tipOf gives it: its category, and its rows.
TipRowtype{ text: string; label: string; value: string; rgb: number[] | null; own: boolean }A tooltip's row: a datum's words, its name and its value apart, its series' ink for its dot, and whether it is the region asked about.
tipLookfunctiontipLook(mode): { card; name; dot }The tooltip card's look on a ground, as a page sets it in CSS: the card's colour, its outline, radius and raised shadow, its padding, a row's name's ink and its dot's size.
crossAtfunctioncrossAt(drawn, x, y | null): { inside; read }The crosshair at a place: whether it stands there (inside the plot, off a navigator's strip) and the value and category read back there.
centreOffunctioncentreOf(hit): { x; y }A region's centre, where the keys put the crosshair.
linearOffunctionlinearOf(rgb, space?): RgbAn ink as linear sRGB light, whatever space it is written in (Display P3 decoded and turned to sRGB's primaries, unclipped): what every measure of what the eye sees reads.
luminancefunctionluminance(rgb, space?): numberWCAG relative luminance of an ink in its space.
contrastRatiofunctioncontrastRatio(a, b, spaceA?, spaceB?): numberWCAG contrast ratio of two inks, each in its own space, 1 to 21.
seenAsfunctionseenAs(lin: Rgb, kind: "protan" | "deutan" | "tritan"): RgbA linear-RGB colour as a reader with the deficiency sees it, in linear sRGB: what `simulate` and the separation measure read.
simulatefunctionsimulate(rgb, "protan" | "deutan" | "tritan", space?): RgbA colour, in the space it was written in (sRGB unless said), as a reader with a colour-vision deficiency sees it (Machado, Oliveira and Fernandes 2009, full severity), in linear sRGB.
oklabDistancefunctionoklabDistance(a, b): numberDistance in Oklab between two linear-RGB colours; about 0.02 is just noticeable.
checkThemefunctioncheckTheme(theme, n, apart?): ThemeReportEvery series ink against the ground at 3:1 (WCAG 1.4.11), and the closest pair of inks for normal vision and each deficiency.
solveThemefunctionsolveTheme(theme, n, keep?): { theme; report }A theme solved for n series: the start position and a lightness pattern searched so every kind of vision tells the series apart. With keep.first (a brand's series one), series one stands as given and only the others' lightness pattern is searched.
highContrastfunctionhighContrast(theme): LookInks lit well clear of the ground.
faintMarksfunctionfaintMarks(drawn): numberHow many of a picture's series marks stand below 3:1 on the observation ground. A picture that draws observation never moves an observed lightness to meet contrast; drawFlat carries such marks' values in text (Drawn.faint): labelled where the chart labels values, else in the data table the page shows.
complyForfunctioncomplyFor(def, t: Look, n: number, data?, options?, keep?): ComplianceA theme made compliant for one chart drawn from its data, which every platform draws through: a picture that draws observation is inked by the read-out alone, nothing solved, moved or said moved; every other chart through comply.
themeForChartfunctionthemeForChart(def, settings: ThemeSettings, data?, options?, own?: { n?; chosen? }): ChartThemeThe theme a chart is drawn in, made the one way every host makes it: on the chart's own ground, a brand as series one where it can be, compliant for the series it inks (groupsOf), what was moved and a brand not drawn said; own carries a host's count (Power BI's slot map) and an author's picked colours.
movedSaidfunctionmovedSaid(moved: readonly Moved[]): stringWhat compliance moved, said by why, the one sentence every host shows: an ink moved to stand at 3:1, words moved to stand at 4.5:1, and the solve's lightness moved to keep the series apart for every kind of vision; empty where nothing moved.
complyfunctioncomply(theme, n, keep?): { theme; report; moved; contrast }Any theme a reader can set, drawn compliant for n series: solved for n, the renderer's lightness moved to the nearest at which every ink stands at 3:1 against the ground where it does not, a colour the reader brought drawn at its nearest passing lightness; what moved is listed, for the page to say. What every platform draws through.
lightnessRangefunctionlightnessRange(theme): [lo, hi]The lightness a reader can set: where a series at any position, at the theme's chroma share, stands at 3:1 against the ground.
NON_TEXTconstantnumberWCAG 1.4.11's least contrast for a mark a reader needs: 3.
luminanceRatiofunctionluminanceRatio(la: number, lb: number): numberThe contrast of two relative luminances (WCAG): the lighter's over the darker's, each with 0.05 of flare; contrastRatio reads it.
nearestPassingfunctionnearestPassing(near, far, passes, steps?): numberThe nearest value to near (which fails) that passes, searched toward far (which passes) by halving steps times, 40 unless asked: what is found always passes.
clearOfGroundfunctionclearOfGround(rgb, mode, space?): RgbAn ink at 3:1 or more against the ground: itself when it is, else its nearest lightness that is, hue and chroma share held.
readingOrderfunctionreadingOrder(hits, row?): Hit[]A chart's regions top to bottom and left to right: the order the keyboard walks them.
HATCHESconstantreadonly { angle; gap; w; cross? }[]The hatches series two onward take in turn, on every chart of two series or more.
DASHESconstantreadonly number[][]The dashes series two onward take in turn: lengths on and off, in half line widths.
hatchOffunctionhatchOf(i, rgb, mode, space?): Hatch | undefinedThe hatch series i takes: none for the first, then the hatches in turn, striped in its own ink toward the ground.
STUDY_DASHESconstantreadonly [on, period][]The dashes a study's line may take on the Candlestick, each an on and a period in pixels: the studies' six in nine, then a dot, then a long dash.
COMPARE_DASHESconstantreadonly [on, period][]The compared markets' dashes on the Candlestick, none the studies' own six in nine, each leaving a gap of three pixels or more, so none is drawn solid; four markets at most.
hatchStripesfunctionhatchStripes(poly: [x, y][], h: Hatch): [[x, y], [x, y]][]A hatch's stripes over a polygon on the page, as the flat fill lays them:each stripe's middle line, where x·cos + y·sin stands at a half gap past a whole one, cut to the polygon even-odd; crossed, the second set a right angle on. A PDF lays them on its marks' outlines, so every file strokes the stripes the raster paints. A gap that is not a length past naught is refused (RangeError).
dashOffunctiondashOf(i): number[]The dash series i takes: none for the first, then the dashes in turn.
MARKERSconstantreadonly { corners; turn }[]The markers series two onward take for their points in turn: a square, a triangle up, a diamond, a triangle down, a pentagon, a hexagon.
markerOffunctionmarkerOf(i, cx, cy, r): [x, y][] | undefinedThe marker series i takes for a point of radius r: none for the first, which stays round; then the markers in turn, each the disc's own area.
patternedfunctionpatterned(ops, series, on: OnGround, origin?, space?, hatch?, short?): Op[]A display list with its series' patterns (WCAG 1.4.1): for each op, the place among all the series of the series that claimed it (−1 for the furniture); each fill a series claimed hatched, each line dashed and each point shaped by its pattern, whatever its ink, the dash running on across joins. The marks apply it when they draw a stage's picture (drawn) to every chart of two series or more, or of two keys or more its slots hold, but a picture that draws observation; the legend's swatches show each series as its marks are drawn. A path too short to show its dash is drawn solid and counted in short; told by a marker or hatch of its own datum it stands, with neither the picture is refused (drawn), naming the size that shows its dash.
SEPARATORconstantnumberThe width, in pixels, of the ground's edge about a series' fill and of its casing either side of a series' line.
OUTLINEconstantnumberThe width, in pixels, of the dash on an observation fill's outline.
outlinedfunctionoutlined(ops, series, mode, origin?, edges?): Op[]A display list whose fills name their series by a dash on their outline (WCAG 1.4.1), for a picture that draws observation: each fill of series two onward outlined in its series' dash, by order and nothing else, in the ground's ink, so no observed lightness moves; the dashes are the furniture's, part outline.
separatedfunctionseparated(ops, series, mode, origin?, edges?, meeting?, space?): Op[]A display list whose series meet only the ground (WCAG 1.4.11 between adjacent colours) where a fill can be edged: each fill a series claimed, more than two edges across, edged in the ground's ink, each run of its lines laid on a casing of it; a side too near the side across from it to edge left unedged; a fill so left within a pixel of another series' ink under 3:1 counted in meeting, with the thinnest across and the thinnest of the rectangles met at their flanks, and that picture is refused (drawn), naming them and the width that gives those rectangles their edges. The marks apply it with the patterns (drawn); the edges are the furniture's part "separator".

Display list and files · 26

Every chart is recorded as a list of marks; the list becomes the raster, an SVG or a PDF (PDF/X-4 for print, by the printer's own profile), and its data table a CSV.

The Display list and files area of the chart API.
NameSignatureWhat it does
Recorderclassnew Recorder(width, height)A plate that records instead of painting: every mark a chart draws becomes an op in its list.
playedfunctionplayed(ops, width, height): RasterA picture's raster as its display list played back the first time its pixels are read: the same bytes as replay onto a fresh raster, and none painted for a picture nobody reads, as one drawn on the GPU in fast mode.
Playedclassnew Played(ops, width, height)The raster played's picture is: its list, played back when first read.
replayfunctionreplay(ops, raster): RasterPlay a display list back onto a raster: the same bytes as drawing directly.
byKindfunctionbyKind(handlers: Kinds<R, C>): (op, context) => RAn op handed to the handler for its kind, with the reading's context: a handler for every kind, checked whole by the type checker, so a kind added to the display list is a kind every reading handles.
playfunctionplay(ops, writer: Writer): voidA display list played through a writer, op by op, in order: the raster, the SVG and the PDF are each one, a handler a kind.
mapOpsfunctionmapOps(ops, transform: Transform<C>, context: C): Op[]A display list mapped through a transform in a context: each op to the op it becomes, an op that becomes none left out; a finer scale and the mirror are each one.
ontofunctiononto(raster): WriterA raster as a writer of the display list: each op laid onto it as the mark would have been drawn there directly (replay plays a list through it).
paintRatiofunctionpaintRatio(ops, screen, live?): numberThe pixel ratio every host paints a picture at: on a narrow screen (640 pixels or less) the screen's, to three, else one; a live chart's two at most.
rasterAtfunctionrasterAt(drawn, k, width, height, frames?: Replayer): RasterA picture's raster at a pixel ratio: its own at one, else its list played k times finer; its layout, words and digest the picture's own. Given a host's replayer, each frame is played over the last.
Replayerclassnew Replayer(); .play(ops, width, height): Raster; .keep(ops, raster); .lastA host's frames, each played over the last: only the tiles an op changed between two lists can touch repainted, by the new list's ops that can touch them, so a live chart's step or Grow's frame costs what changed. Each frame the very bytes replay makes of its list; each a raster of its own.
sameOpfunctionsameOp(a: Op, b: Op): booleanTwo ops the same mark, field by field: what a replayer compares two frames' lists by.
movedOpfunctionmovedOp(op, dx, dy?): OpAn op moved dx px across and dy down: the Developer border moves a picture clear of its side's strip so, and a word's plate plays the marks under it into a raster of its box alone.
opBoundsfunctionopBounds(op): { x0, y0, x1, y1 }The box an op can paint in, its stroke and a pixel of rim round it: no pixel outside it is touched, so the marks under a word are found without drawing the picture.
scaledOpsfunctionscaledOps(ops, k): Op[]A display list drawn k times finer, for a screen's pixel ratio: places, radii, strokes and hatches scaled, a pixel a k-square, an image resampled; played onto a raster k times the size, the same picture, its layout and words its own.
toSVGfunctiontoSVG(drawn, { mode, title?, ground? }): stringThe chart as SVG: every mark an element, every word a text in the face's family at its pen and baseline, its numbers' figures tabular, its data in the description for screen readers.
toPDFfunctiontoPDF(drawn, { mode, title?, ground?, print?, lang?, chart? }): Uint8ArrayThe chart as a PDF tagged to PDF/UA-1: its picture a figure with its alternative text, the lines said beside it paragraphs, its data a table on A4 pages after it (its first FILE_ROWS rows, the rest said), in its host's language (lang); given print ({ profile, condition?, at }: a press's CMYK output profile, its printing condition, the file's moment), PDF/X-4 for that press, on the light ground with no ground painted, every colour separated into its inks by its own profile, relative colorimetric with its black compensated, the profile its output intent: vector paths, Bézier arcs, alpha by graphics state, its words the face's glyph paths, each glyph written once, with their text carried in UTF-16 for search and screen readers.
base64functionbase64(bytes): stringBase64, for the PNG an SVG carries as a data URL.
LABEL_INKconstant{ dark; light }: Record<role, hex>The label colours by role and ground, shared by the page and the files.
tableOffunctiontableOf(drawn, of?, most?): { columns; rows }A chart's data table: its columns and each row's cell in each (its words, or a file's value by of); every chart names its columns and writes its rows as cells. Every host's table and the CSV read it.
FILE_ROWSconstantFILE_ROWS: 1000The most rows a PDF's table writes; where a chart holds more, the file says so and leaves the rest to the CSV.
rowsOffunctionrowsOf(drawn, most?): { text, cells }[]A chart's data table's rows: its regions, one a datum, or the rows it carries apart from them where its regions group its data (a Candlestick past a candle a pixel keeps every day); its first most alone where a reader takes no more (a file's table). Every host's table and the CSV read them.
rowCountfunctionrowCount(drawn): numberHow many rows a chart's data table holds, counted without writing them: rowsOf's length, for a table's summary before the reader opens it.
tableHeadfunctiontableHead(d: { credit?; fitted?; notes?; measurements? }): string[]A chart's data table's head, each line once: a map's "Data:" line, the said strip's words not said whole on the picture, the lines the picture says beside it, whole, and its measurements, each its name and value, as a host shows them over its table; the CSV writes the credit, the lines and the measurements after its rows.
toCSVfunctiontoCSV(drawn): stringA chart's data table as CSV, one row a datum, quoted where a cell needs it; a cell a spreadsheet would run as a formula written as text, an apostrophe before it, a number left a number.
waveformCSVfunctionwaveformCSV(waveforms: readonly Waveform[], chunk?): AsyncGenerator<string>Waveforms' every sample as CSV, apart from the drawn table's, written a chunk of samples at a time (65,536 by default) for a host to stream to its file: Time (s) and each waveform's name and unit, then a row a sample, its time from the record's start and each physical value, written whole so it reads back the very number. The waveforms stand on one rate, start, clock, length and gaps; held, by range or made from others, read where here and fetched by range where not, a made waveform made as a pass makes it. Refused by name before anything is written where they cannot be, and as it writes where a range fails or answers short.

Maths · 68

The numbers under the charts, each tested on known inputs.

The Maths area of the chart API.
NameSignatureWhat it does
ROUNDING_AMOUNTSconstantreadonly number[]The seven amounts whose halves a double cannot hold: 2.675, 1.005, 0.615, 1.045, 8.345, 10.235 and 0.125.
currencyOffunctioncurrencyOf(unit: string | undefined): Iso4217Row | undefinedThe currency a unit names: a unit that is exactly an ISO 4217 code, current or withdrawn, its minor units, its English symbol and whether and when it was withdrawn; any other unit names none. A host reads a code from its own words by it (Power BI's visual, from a measure's format string).
roundingCardfunctionroundingCard(): RoundingRow[]The rounding card's rows: each of the seven amounts to 2 decimals as toFixed writes the double, and as the library's one rounder writes the decimal, half away from naught and half to even.
bookDepthfunctionbookDepth(book): { bids, asks, mid }A book's depth: its bids from the best down and its asks from the best up, each with the size summed outward from the spread, and the mid price; a crossed book refused.
squarifyfunctionsquarify(values, x0, y0, x1, y1): Tile[]Squarified treemap tiling: every tile's area in proportion to its value, the box exactly covered.
boxStatsfunctionboxStats(samples): { q1; med; q3; lo; hi; mean; out }Quartiles, Tukey's whiskers at 1.5 × IQR, the mean and the outliers.
binOffunctionbinOf(v, lo, hi, bins): numberThe equal-width bin a value falls in, the last closed on the right; -1 outside.
binCountsfunctionbinCounts(samples, lo, hi, bins): number[]Equal-width histogram bins; the last is closed on the right.
smafunctionsma(values, k): (number | null)[]The simple moving average over k values; null until k exist.
candleWindowfunctioncandleWindow(dates, range, from, to): [i0, i1]The candles a view shows: a range counted back from the last date (1M, 3M, 6M, YTD, 1Y, All) where the dates are full calendar days, then the view's share within it, at least two candles.
DAY_MSconstant86400000A day in milliseconds, as UTC counts it: the one length every day the charts count is. A local day's own length is the clock's (23, 24 or 25 hours), counted by the local calendar, never by this.
isoInstantfunctionisoInstant(s: string): number | nullAn ISO 8601 month, date or instant read the same on every machine, in UTC milliseconds: a month its first day, a date its midnight, a time with no zone in UTC, an offset at its offset (fourteen hours at most), every year as written; null where it is no calendar moment.
utcAtfunctionutcAt(y, m, d?, h?, mi?, s?, ms?): numberA moment on the UTC calendar in milliseconds, every year the year written (Date.UTC reads 0 to 99 as the twentieth century's); a month or a day past its range carries into the next.
readBarDatefunctionreadBarDate(s: string): { t: number; grain: number } | nullA bar's date read strictly: YYYY-MM-DD, with THH:MM, THH:MM:SS or THH:MM:SS.sss, and a Z or no zone, the whole string and nothing after; its moment in milliseconds, UTC, and its grain, the finest unit it writes. A date that is no calendar moment, carries more, or states an offset other than Z reads as none: bars are dated in UTC.
rangeCutfunctionrangeCut(day: number, range: string): number | undefinedThe first day a range shows, counted back from a last day: its year's first day for YTD, else the day its months back held to a shorter month's last day; none for All. rangeStart and rangeSpan read it.
rangeStartfunctionrangeStart(dates, range): numberWhere a range begins: the index of its first candle, counted back from the last date (1M, 3M, 6M, YTD, 1Y) where the dates are calendar days; 0 for All.
candleTicksfunctioncandleTicks(data, trades, interval, origin?): { data, late, folded }Trades into the candles: inside the forming bar's interval its high, low, close and volume move and its open holds; past it a new bar opens at the trade's price, on the interval's boundary from the origin (1970 UTC by default). A trade before the last taken is late and counted: inside the forming bar folded into its high, low and volume, and its open where it is the earliest, never its close; before it changing nothing. The last date is read strictly and must be a bar of the interval; a trade is finite and a date can hold its time, its size naught or more.
candleTickfunctioncandleTick(data, trade: { t, price, size }, interval, origin?): CandleDataOne trade into the candles: candleTicks with one.
candleViewfunctioncandleView(data, options): { d, i0, i1, start, avg, upper, lower, k, e, ema, heikin, study, rsi, macd, compare, events }What a Candlestick view draws: the window's candles and its studies (the moving average and Bollinger bands, the exponential average, Heikin-Ashi, RSI or MACD), worked over the whole history and cut to the window, the compared markets cut to it and the events in it; candles not four finite prices, compared closes not above naught, and events without a label refused.
priceTextfunctionpriceText(tick | null, prices): ((v) => string) & { decimals }How a candlestick writes a price: rounded in decimal to the step, a half away from naught, with the step's decimals; or with no step at the fewest decimals that write the data's every price to within a millionth of a millionth, twelve at most.
decimalOffunctiondecimalOf(v): { n: bigint; s: number }A number as the shortest decimal that writes it: an integer and its scale, the value n / 10^s.
atStepfunctionatStep(v, step: decimalOf(step)): stringA value rounded in decimal to the nearest multiple of a step, a half away from naught, written with the step's decimals: how the candles and the crosshair write a price at a step.
atDecimalsfunctionatDecimals(dp: number): ((v) => string) & { decimals }A price written at a count of decimals, rounded there in decimal, a half away from naught: what priceText writes with no step, the decimals found.
decimalsOffunctiondecimalsOf(v: number): numberThe fewest decimals that write a number to within a millionth of a millionth of itself, twelve at most: a price's own decimals, as priceText reads the data's.
signedAtfunctionsignedAt(x, decimals): stringA change at a count of decimals, written with its sign as it rounds: a hair below naught that rounds to naught reads +0.00, never -0.00. How the candles' readouts, their percent axis and the crosshair write a change.
calendarDaysfunctioncalendarDays(data: CalendarData, zone?: string): { days: DayRow[], first, last }The days a Calendar draws (dayRows): each date's day with its value or none (a day alone the day it names, a time its day on the zone's clock), one to each day, in order; a span of more than CALENDAR_MONTHS_MOST months refused, naming it.
CALENDAR_MONTHS_MOSTconstantnumberThe most months a Calendar draws, a band to each: 12.
DayRowtype{ day: number; value: number | null; given: string; changed?: ClockChange[] }A day as a chart of days reads it: its day since 1970-01-01 in the chart's zone, its value or none, the date as given, and what a change of the clocks did to its time.
dayRowsfunctiondayRows(data: CalendarData, zone: string | undefined, lead: string): { days: DayRow[], first, last }The days a chart of days draws, each date's day with its value, sorted: a day alone the day it names, a time its day on the zone's clock; a date that is no date, a value that is no number or two dates on one day refused, naming them under the chart's lead. The Calendar and the Period chart read their days here.
calendarMonthsfunctioncalendarMonths(data: CalendarData, options): { months: string[], shown: string[] }The months a Calendar can show, YYYY-MM each from the data's first to its last, and the ones it shows under the host's month option: none, one month, today's where the span holds it, else the data's last; all, every month; a month named, that one. A host's prev, next and today move month among them.
monthSteppedfunctionmonthStepped(key: string, by: number): stringThe month a step from one lands on: "2025-10" stepped by −1 is "2025-09"; a name that is no month refused.
timelineEventsfunctiontimelineEvents(data: TimelineData, zone?): TimelineRead[]A timeline's events read in a zone, each its place in days (a day alone the day it names); an end before its start refused by name.
timelineSpanfunctiontimelineSpan(read: TimelineRead[], range: string): { lo: number, hi: number }The days a timeline's range shows: every event's, or back from the last date by the months of 1M, 3M, 6M or 1Y, or from its year's first day (YTD).
statusStretchesfunctionstatusStretches(data: StatusData, zone?): StatusRead[]A status timeline's stretches read in a zone, by row and start: each one's place in days (a day alone the day it names, as an end the whole of it) and how long it ran, elapsed time between instants; a stretch with no end or one that ends before it starts refused by name, and two of one row that overlap refused, naming both.
stretchWordsfunctionstretchWords(read: StatusRead): stringA stretch's span as a tip says it: "3 Oct 2025 09:15 to 11:40 (2 h 25 min)", the end by its clock alone where it ends the day it starts.
punchCellsfunctionpunchCells(data: PunchData, zone?): { cells: (number | null)[][], binned: boolean, rows?: string[][][], changed?: ClockChange[] }A punch card's cells, Monday first, by hour: instants read on the zone's clock and binned by their weekday and hour there, what a change of the clocks did to them handed back, each weighed 1 or by its weight, each cell with the keys of the rows binned into it where the instants carry them; or the cells as given (a weekday by name or ISO 8601's number, an hour 0 to 23), a cell not given null. Each fault refused by name.
hourCellsfunctionhourCells(data: HourData, zone?): { cells: (number | null)[], binned: boolean, rows?: string[][], changed?: ClockChange[] }An hour ring's hours, 0 to 23: instants read on the zone's clock and binned by their hour there, what a change of the clocks did to them handed back, each weighed 1 or by its weight, each hour with the keys of the rows binned into it where the instants carry them; or the hours as given (an hour 0 to 23 and its value), an hour not given null. Each fault refused by name.
monthFormsfunctionmonthForms(y, m): string[]A month's name in its forms, the widest first ("October 2025", "Oct 2025", "Oct '25", "Oct"): the one that fits names a Calendar's page, every page in one form.
periodReadfunctionperiodRead(data: CalendarData, { period?, compare?, align?, through?, weekStart? }, zone?): PeriodReadA period chart's data read: the period holding `through` (else the data's last date) and the earlier one, by date or, against last year, by weekday (52 weeks before); each point's values summed from its days; the totals to the same day. A period with no data refused, naming it.
fixedfunctionfixed(v, decimals): stringA number at a count of decimals, its decimal rounded there, a half away from naught, never the double's binary value (2.675 is "2.68", where toFixed writes 2.67), and never "-0": a value that rounds to naught is written as naught, unsigned. Every minus the charts write is "-".
signedWithfunctionsignedWith(x, write: (size) => string): stringA change written signed as its written figure rounds, by any writer of its size (a price at its step, say): a hair below naught written as naught is +0, never -0.
emafunctionema(xs, n): (number | null)[]The exponential moving average as published: seeded with the simple mean of the first n, then α = 2/(n+1) of each step; null until n values.
rsifunctionrsi(closes, n = 14): (number | null)[]Wilder's relative strength index as published: simple means of the first n changes, then Wilder's smoothing; 100 where there is no loss, none where there is neither gain nor loss.
macdfunctionmacd(closes, fast = 12, slow = 26, signal = 9): { line, signal, hist }Appel's MACD as published: the fast less the slow exponential average, its own exponential average the signal, the histogram their difference.
heikinAshifunctionheikinAshi(candles): candlesHeikin-Ashi candles as published: close the mean of O, H, L, C; open the mean of the last HA open and close (the first, of the candle's open and close); high and low stretched to take them in.
candleColumnsfunctioncandleColumns(candles, W): { candles, first, last } | nullA Candlestick's days grouped by pixel column past a candle a pixel: day i in column ⌊i·W/n⌋, each column's candle its first open, highest high, lowest low and last close, its volume summed, with each column's first and last day; null at a candle a pixel or fewer.
baselinePartsfunctionbaselineParts(points, base): { above, pts }[]The closes as a line cut where it crosses the base, each part above or below it, a crossing placed where the line meets the base.
retracementfunctionretracement(from, to): { share, price }[]A Fibonacci retracement's prices as published: each level's share of the move taken back from its end (0, 23.6, 38.2, 50, 61.8, 100 %).
volumeProfilefunctionvolumeProfile(candles, bins, lo, hi): { edges, total, rising }Volume by price: the candles' volume summed over bins of price, each candle's shared among the bins its range spans in proportion to each one's span of it, and each bin's share on rising candles.
FIBONACCI_LEVELSconstantreadonly number[]The retracement's published shares: 0, 0.236, 0.382, 0.5, 0.618, 1.
streamBaselinefunctionstreamBaseline(values, mode: "silhouette" | "wiggle" | "zero"): number[]The baseline under a stream stack: centred, least-wiggle (Byron and Wattenberg), or zero.
seededfunctionseeded(seed: number): () => numberA small seeded generator, so a sample is the same picture every time.
breaksfunctionbreaks(values, k, scale: "quantile" | "log" | "linear"): number[]Class breaks for a choropleth.
hash01functionhash01(seed, k): numberA value in [0, 1) that depends only on (seed, k): live samples that are the same in any order.
normalAtfunctionnormalAt(seed, k): numberA standard normal value that depends only on (seed, k): a stand-in's noise, the same however its steps fall.
poissonAtfunctionpoissonAt(seed, k, mean): numberA count drawn from the Poisson distribution of a mean, depending only on (seed, k): ions or photons counted, the same however the steps fall.
feedSamplefunctionfeedSample(seed, s, k): numberSample k of the live feed's series s.
heldSeriesfunctionheldSeries(data, { ends?, gap? }?): voidSeries held to their categories before any chart drawn from them draws: each value a number, or null where the chart's form carries a gap (gap true), and refused with the chart's reason where it does not; a value to each category where the chart stacks, bars or closes them; an error to each value on error bars, none on a gap; a line's series may end early.
wholeOffunctionwholeOf(data): Whole<data>Series data a chart's hold held whole at the door, read in its draw as all numbers.
heldWholefunctionheldWhole(data, why): Whole<data>Series held to carry no gap, a missing value refused with the chart's reason: every value a number from there on.
WholetypeWhole<SeriesData>Series data whose values are all numbers, as heldWhole holds them.
STACK_GAPconstantstringWhy a stack draws no gap: every layer above a hole would move.
runsOffunctionrunsOf(values): { start; v }[]A series' runs between its gaps, each its first index and its values, built once while the series lives: what a line is drawn and reduced by, never joined across a gap.
presentfunctionpresent(values): number[]The values a series has, its gaps left out: what a scale is read from.
skyfunctionsky(code: number | null): stringA weather code's kind, the one word a day's tile has room for; a code outside Open-Meteo's list, its number; a day with no code, 'no code'.
skyWordsfunctionskyWords(code: number | null): stringA weather code in its own words, as Open-Meteo lists them (read 2026-09-28); a code outside the list said as one; a day with no code, 'no weather code given'.
WEATHER_CODESconstantRecord<number, { words; kind }>Open-Meteo's 29 weather codes, each by its own words and its kind, read 2026-09-28 and kept.
WEATHER_CODES_READconstantstringThe date the weather codes were read from Open-Meteo's page.

Types · 98

The shapes that cross the API.

The Types area of the chart API.
NameSignatureWhat it does
Doortype{ charts: readonly ChartDef[]; byId(id); options(o); theme(def, settings, data, options, own?); draw(def, look, options, shown) }The door a host draws through, made from its own registry.
Showingtype{ size: Size; rtl?; locale?; zone?; emphasis?(hit, i) }How a host shows what the door draws: its size, direction, locale and zone, and a reader's emphasis.
Picturestype{ flat(data); finished(flat); picture(data) }A chart's pictures as the door draws them for a host: flat, finished, and the two in one.
SampleCardtypeReadonly<Record<string, string | boolean>>A sample's card words as options: title, context, and figure, figureOf or delta where its card shows a figure.
Editiontype"free" | "paid" | "site"The builds of the library: the free and the paid package a person installs, and the site's own build, which huedraw.com runs.
RunsOntype"web" | "powerbi"Where an entry runs for a buyer: a web page, which carries every entry, or an app that carries a part of them, the Power BI visual.
BookDatatype{ label?: string; bids: [price, size][]; asks: [price, size][] }An order book, as market-depth takes it.
RowBandtype{ row; y0; y1; baseline }A strip chart's row laid: which row it is, its band, and the baseline its waveform stands on.
RowsLaidtype{ rows: readonly RowBand[]; all: boolean; together: boolean }A strip chart's rows laid: the rows shown, whether every row is among them, and whether their groups stand together.
DrawnHandletype{ name; holds; box; along: "x" | "y"; span: { from; to }; at; window?: { from; to; strip }; writes?: HandleWrite[]; removes?: Options; steps?; value? }A handle a reader drags or steps: its name, which stays as it moves, what it holds (a window's edge, the window, a cursor), its grip's box, the axis it moves along, its place a share of the span it moves along, and a window's edges and the strip a press takes it on; the options its place writes (none where its place is the host's own data), the options that take it away where a reader may, the places a step moves it between, and its place as the picture writes it where its name does not say it.
HandleWritetype{ option: string; of: "at" | "from" | "to"; at0: number; at1: number }An option a handle's place writes: read from a cursor's place or a window's edge, its value at0 at the span's start and at1 at its end, on the straight line between.
TimelineDatatype{ events: TimelineEvent[]; observationsOf? }A timeline's data: its events, and each group's observations by its name where the data has them.
TimelineEventtype{ label: string; date: string | Date; end?: string | Date; group?: string }One event of a timeline: a moment at its date, or a stretch to its end; its group its lane.
TimelineReadtype{ label: string; group: string; at: number; end?: number; timed: boolean; changed?: ClockChange[] }An event as a timeline reads it: its place in days, its end's, and what a change of the clocks did to its times.
StatusDatatype{ stretches: StatusStretch[]; observationsOf? }A status timeline's data: its stretches, and each state's observations by its name where the data has them.
StatusStretchtype{ row: string; start: string | Date; end: string | Date; state: string }One stretch of a status timeline: the row it is of, the state the row was in from its start to its end.
StatusReadtype{ row: string; state: string; at: number; end: number; timed: boolean; minutes: number; changed?: ClockChange[] }A stretch as a status timeline reads it: its place in days, its end's, how long it ran, and what a change of the clocks did to its times.
PunchDatatype{ times?: (string | Date)[]; weights?: number[]; keys?: string[]; cells?: PunchCell[]; unit?: string; unitOne?: string }A punch card's data: instants to bin, weighed 1 each or by weights, each with its row's key where a table gave it, or its cells as given; one or the other; what they count, and its singular after a count of one.
HourDatatype{ times?: (string | Date)[]; weights?: number[]; keys?: string[]; hours?: HourCell[]; unit?: string; unitOne?: string }An hour ring's data: instants to bin by their hour, weighed 1 each or by weights, each with its row's key where a table gave it, or its hours as given; one or the other; what they count, and its singular after a count of one.
HourCelltype{ hour: number; value: number }One hour of an hour ring as given: its hour (0 to 23) and its value.
PunchCelltype{ weekday: string | number; hour: number; value: number }One cell of a punch card as given: its weekday (Monday, Mon, or 1 Monday to 7 Sunday), its hour (0 to 23) and its value.
PeriodReadtype{ period; current: { first, last, name }; earlier: { first, last, name }; through: number; cut: number; by: "date" | "weekday"; shift: number; now; then; nowDays; thenDays; to: { now, then, none }; value(day); given(day); changed?: ClockChange[] }A period chart's reading: its two periods, the points along the foot, the earlier period's day the current's last is compared to, the totals to the same day, and what a change of the clocks did to the dates' times.
Drawingtype{ kind: 'level'; price; label? } | { kind: 'trend'; from; to; extend? } | { kind: 'fibonacci'; from; to }A drawing on the candles, kept in CandleData.drawings and drawn in the furniture's grey.
CandlePlacetype{ date: string; price: number }A place on the candles: one of the data's dates and a price.
DrawnAxestype{ panes: readonly DrawnPane[] }A picture's axes as data, carried on Drawn.axes, pane by pane from the top: readAt reads a place in the pane whose band holds it.
DrawnPanetype{ y0; y1; x0?; x1?; value?: DrawnValueAxis; categories?: DrawnCategoryAxis; x?: DrawnNumericAxis; rows?: readonly DrawnRow[] }A pane as data: its band top to foot, and its left and right where it is laid across the picture beside the others (a well log's), read by its width; the value axis a place in it is read through, its categories or its numeric x across, and a strip chart's rows.
DrawnValueAxistype{ side; lo; hi; from; to; log; decimals?; percentOf?; step? }A value axis as data: its side, its domain and pixel ends, linear or log, the decimals and the step it writes a value at, and where it writes values as a change, the value that is naught.
DrawnCategoryAxistype{ side; names; start; step }A category axis as data: its side, its names, where the first band begins and each band's step.
DrawnNumericAxistype{ lo; hi; from; to; log; unit?; dates?; sweep?: { pen; span } }A numeric x as data: its domain and pixel ends across, linear or log, and the unit its values are in ("s" for time); or, its values instants in milliseconds, dates, each read as the day it falls on; overwritten as a monitor draws, its pen's pixel, past which along the axis a place reads a pass's span earlier.
DrawnRowtype{ index; name; y0; y1; baseline; standsFor; perPixel; unit? }A strip chart's row as data: its place among the chart's rows, its name, its band, the pixel its baseline stands at and the value it stands for, how much of its unit a pixel up is, and that unit.
Measurementtype{ name; value }A measurement a chart states beside its plot: its name and its value as written ("QT", "400 ms").
Tradetype{ t: number (ms, UTC); price: number; size: number }A trade, as candleTick takes it.
CandleFeedtype{ t; k; every; per; interval; from; seed; owed? }A seeded stand-in market the Candlestick's live step trades into its candles.
ZonedPartstype{ y; m; d; h; mi; s }An instant's fields in a zone, as partsIn reads them: its year, month (0 to 11), day, hour, minute and second.
ClockPresstype"hold" | "resume" | "start" | "pause" | "lap" | "reset"A press of a clocked view: a clock's Hold and Resume, a timer's Start, Pause, Lap and Reset.
ClockControltype{ press: ClockPress | "seconds"; disabled?: true }A control a clocked view offers now: a press, or Seconds, the switch of its finest part; one that cannot be pressed now disabled.
LinkedRowtypeReadonly<Record<string, string | number>>One row of a linked set's table: a value by field name.
LinkedViewtype{ chart; category; series?; value?; by?; options?; link? }One view of a linked set: a chart, the fields it reads, how its values are made, its options; link "off" chooses nothing.
LinkedValuestypeReadonly<Record<string, readonly string[]>>Values by field: what a reader has chosen, or hidden.
LinkedSettype{ table; views; chosen?; hidden? }A linked set: its table, its views, and what a reader has chosen and hidden.
LinkedDrawntype{ chart; data; options } | { chart; empty: true; options }One linked view read: its chart's data and options, or the empty card (emptyView) where the chart would refuse what is left.
LinkedReadtype{ views; chosen; hidden; stale }A linked set read: each view, the state as read, and the stale values it dropped.
NamedFormtype"series" | "parts" | "stages" | "steps" | "gauge" | "countries" | "points" | "treemap"The named form a chart takes, declared on its ChartDef (named): its concepts are keyed by it when it reads named values.
ChartDeftypeChart<D> & Hides<D> & Keys & Figures<D> & Live<D> & Clocked<D> & Picks<D> & Zooms & ReadsTable<D> & Diverges & Observes<D> & Steps<D> & Written<D>A chart: the contract every chart keeps and the capabilities it declares, which a host tests for, never a chart's id.
Observestype{ observation?: true; observations?(data, options) }A chart that draws observation, or reads the observations its data declares: the kernel's own.
Divergestype{ diverges?(options) }A chart whose options can draw the diverging scale.
Stepstype{ steps?(data, options): Stepping }A chart that steps through its data a page at a time (a calendar's months): the controls row draws its Previous, Today and Next from it.
Steppingtype{ name; label; unit; of; at; pages; today; all?; named(page); step(page, by); set(page) }A chart's pages as its controls row reads them: the page shown, every page in order, today's, how each is named, the page a step away, and the options that show one.
Writtentype{ schema?; course? }A chart whose data is written to a schema (a recipe): a door checks data handed in against it before drawing, every problem named, and the data is its writer's own, named by its title. A house recipe carries its course: the steps it is built in, the last its sample.
CourseSteptype{ data; says }One step of a written chart's course: its data so far, holding the step before's and adding to it, and what the step brings, in one sentence.
ReadsTabletype{ table?: TableReading; hold?(data, options) }A chart that reads a host's rows its own way and refuses its own data at the door.
Zoomstype{ zoom?: "x" | "xy"; crosshair?: true }A chart a reader zooms and pans, and reads under a crosshair.
Pickstype{ pick?(data, x, y, options, size, theme) }A chart that answers a reader's click at raster (x, y) with the data it draws next, the click read in the frame the theme it is drawn in lays out (a card or none).
Livetype{ live?: { step(data, dt, options); timescale? } }A chart that keeps changing after it is drawn: stepped every frame by the seconds elapsed; where it shows time and plays faster than its instrument, `timescale` says how much, beside Play and in its name.
Clockedtype{ clocked?: { ticking(data, options); read(data, reading, options); next(data, reading, options, still); bare?; fine?: string; presses?(data, options): ClockControl[]; press?(data, press, reading, options): { data; said }; ends?(data, reading, options): { at; said } | undefined } }A view that tells the time: its time is in its data, a reading of the two clocks a host hands in at each change, never counted (DESIGN-CLOCKS §8).
ClockReadingtype{ wall: Millis; mono: Millis; origin: Millis }A reading of the wall clock and the monotonic clock taken together, and the page the monotonic clock counts in.
TimerStatetype{ running: boolean; banked: number; from?: ClockReading; laps: number[]; origin: number; seen?: ClockReading }A timer's state as a host holds it: whether it runs, the time banked, the reading its run began at, the time run at each lap, its page, and the last reading it saw.
TimerPresstype"start" | "pause" | "lap" | "reset"A timer's presses.
WallInstanttype{ at: number; moved?: number; twice?: true }A wall time read to its instant: the minutes it was moved on where the clocks skip it, and whether they show it twice.
ClockChangetype{ moved?: number; twice?: true }What a change of the clocks did to a wall time read: the minutes it was moved on where they skip it, and whether they show it twice.
Keystype{ legendAsText?: true }A chart's key says what its marks or scale mean, not series a reader switches off.
Figurestype{ figures?: { last?(data): WorkedFigure; total?(data): number } }A chart answers the header's rules for its figure: last, the last period's value with the one before it, and total, the whole; a rule it does not answer is refused by name, since whether a sum means anything rests on the data's unit.
WorkedFiguretype{ value: number; name?: string; before?: { value: number; name: string } }A figure worked out from the data for the header: its value, the category it stands at by its name, and the period before's where the data has one, by its name.
seriesFiguresconstant{ last(d: SeriesData): WorkedFigure; total(d: SeriesData): number }The header's figures series data answers: last, every series' value at the last category any has, summed, by its name, with the category before it by its name; total, every value: each sum the exact sum of the decimals given.
Hidestype{ concepts?: Concepts<D>; groupsHeld?(data, options) }A chart's series a reader can hide, by name; or, where it declares no concepts, the keys of its grouping it holds under its options, its theme made compliant for as many.
Charttype{ id; name; summary; tags?; howTo?; named?: NamedForm; regionsOf?(options): RegionKeys; question?: Question; presetOf?; plan?: "paid"; element?; family: Family; dataType; options: OptionDef[]; sample: D; sampleOf?(options): D; draw(data, options, look, size): Drawn; grouping: Grouping; gaps?: true; runs?: true; contract?: Contract; enter?; sense?: "clockwise" | "forward" }What every chart is: its name, the question it answers, its family, the data it takes and its sample, its options, and how it draws; a chart of science says plan "paid": the paid packages draw it, the free package refuses it.
Looktype{ readOut: ReadOut<Rgb>; mode: "dark" | "light"; start: number; lightness: number; chroma: number; rise?: number; fall?: number; observed?: (Trace | undefined)[]; lightSteps?: number[]; slots?; observation?: true; palette?: "okabe-ito" | "viridis" | "cividis"; chosen?: Record<number, Rgb>; space?: "srgb" | "display-p3"; shape?: "crisp" | "rounded"; ground?: string; card?: boolean; hsl?: true }How marks are coloured: which read-out, which ground, where the series sit on the cycle, the renderer's lightness and chroma share for its marks, and the shape the marks take.
OptionDeftype{ name; label; group; kind: "toggle" | "choice" | "range" | "text"; default; choices?; offers?; none?; min?; max?; step? }One option a chart takes, declared so a page can build its control without knowing the chart. A choice takes one of its choices; a text option that offers values is listed by a host as a dropdown of them, its empty value by its none words, and still reads any text.
Conceptstype{ names(data, options): string[]; without(data, hidden, options): data }A chart's concepts a reader can hide: their names in draw order, and its data without the hidden ones.
Drawntype{ raster: Raster; ops: Op[]; data?: { from; to; box; base? }; labels: Label[]; hits: Hit[]; rows?: { text }[]; axes?: DrawnAxes; navigator?: { x0; y0; x1; y1 }; handles?: DrawnHandle[]; measurements?: Measurement[]; pxPerMm?: number; sense?: "forward"; wants?: Want[]; passes?: Waveform[]; waveforms?: Waveform[]; observation?; faint?; crowded?; surfaces?; marks?; space?; stamp?; layout?: Layout; fitted?: Fitted[]; parts?: Part[]; cues?: number[]; ground?: string; datums?: number[]; diverging?: number; credit?: string; notes?: readonly string[]; columns?: string[]; walk?: Walk }What a chart hands back: the picture, its display list, a map's base under it where one was given (never in the raster), where its data marks sit and the base they rise from, the text to set over it and how many words no clear room held, the regions a pointer can ask about and how the keys walk them where they stand in a grid, whether it draws observation, its series as surfaces with each op's claim, and its colour space. A stamped picture records its stamp.
Walktype{ stride: number; pages: [first: number, last: number][]; mirrored?: boolean }How the keys walk a picture's regions where they stand in a grid (the Calendar's days): a row's stride, so Up and Down move a row; each page's first and last region in hit order, which Up and Down, Home and End keep to; and whether the picture is mirrored, Left and Right swapped. A host hands it to stepTo with the picture's hits.
Surfacetype{ rgb: number[] | null; position: number }A series as the process sees it: a surface in the chart's chamber at its concept's position, with its ink.
Basetype{ axis: "x" | "y"; at } | { axis: "r"; cx; cy; from? }Where a chart's marks rise from: a line at the value axis's zero, or the centre of a round chart.
Parttype"card" | "grid" | "baseline" | "rim" | "credit" | … | `legend: ${string}` | `leader: ${string}` | ""The part of the furniture an op is, by the name its chart laid it under (the frame's card, the grid, a rim, a band of a scale, the land under a map, the credit); a legend's entry by its words, or a leader from a mark of the plot by the name it leads to; "" for a series' own marks. Movement, the entrance and a reader's locale know a mark of the furniture by it, never its ink.
Fittedtype{ slot: "title" | "context" | "caption" | "category" | "row" | "legend" | "said"; shown; whole }A word fitted to its slot: cut with an ellipsis, or carried off the picture whole (shown ""); its slot and its text as shown and whole. Not Label.cut, a word's own cut box.
Coursetype{ lightness: number[][]; settles: number; generation: number }A movement's course: each surface's L after every turn, the turn every surface has settled by, and the generation that turn falls in.
Entrancetype"rise" | "draw" | "sweep" | "grow"The ways a chart enters: rising from its base, drawn left to right, swept round, or grown from each mark's own centre.
Labeltype{ x; y; text; align; base; role: "title" | "context" | "headline" | "headlineNarrow" | "label" | "value" | "chip" | "note" | "displaySmall" | "display" | "displayLarge"; angle?; series?: true; off?; ink?: string; on?; finding?: true; whole?: string; line?: number; continued?: true; listed?: string; lettered?: string; amount?: string; money?; instant?; length?: number }A piece of text at a point on the raster, in its role; a value label of money carries its amount and how it is written (money), which a locale writes it from; a clock's time carries its instant (instant: at, zone, form, cycle, room), lettered from it in the reader's locale in its own zone, and a length of time its milliseconds (length); a series' name, a chip's or at its marks, is its switch (series); a word in its own ink (ink, a series' words ink) where not its role's; on names the ground it is read against when it stands on a mark. The kernel draws no glyphs; the page sets them.
Hittype{ x0; y0; x1; y1; text; surface?; key?: HitKey; keys?: HitKey[]; cells?: Cell[]; rings?: number[][]; part? }A region standing for one datum: the tooltip, and the row of the accessible data table; surface is the series it is of, its place in the drawing's surfaces, where the chart drew it as a series; cells, its words as the columns of its table, where the chart wrote them so; rings, a map region's outline in pixels, which the pointer picks it by; part, the furniture it is where it stands for no datum (a navigator's strip, an overview's column), which a pointer reads and the data table leaves out.
Celltype{ column; text; amount?; before?; join?; money?; lettered?; instant?; length?; offset? }One cell of a datum's words: the column it stands in, its words as written, the decimal of the amount it writes, a word before it, a space where it joins the cell before inside one table cell (" · " otherwise), where the amount is money, how it is written: its code, a change, brackets; the words the picture was drawn in where a locale wrote them otherwise; and a clock's time as its instant, or a length of time in milliseconds, which a file writes in ISO 8601, or a zone's offset in minutes, which a file writes UTC+01:00.
ChamberDatatype{ concepts: KernelConcept[] }A chamber as its columns chart takes it: its concepts in position order.
KernelConcepttype{ label; position; lightness; saturation }One concept of a chamber: its name, its position on the cycle in degrees, its L and its S.
LoopDatatype{ turns: number[]; concepts: { label; position; lightness: (number | null)[]; saturation }[] }A loop as its series chart takes it: each concept's L after every turn, null before it is first returned to, and its S at the last turn.
Observationstype{ bonds?: number[]; carried?: string[]; landed?: string[] }A concept's observations as a chart's data declares them: its returns' bonds, and the contents it carried and those it landed.
Declaredtype{ lightness; lightenRefusals; saturation }What a declaration makes of a concept: its L, how many of its bonds could not move L, and its S.
Placedtype{ position; observed?: Declared }A concept as a picture holds it: its position on the cycle, and its L and S where its data's observations make them.
Movementtype{ from: Drawn | null; to: Drawn; start; entrance; course }A chart moving toward its objective: from a picture (none, when it enters) to the chart, from a turn, by its course of returns.
Readingtype{ turn; settles; shares; progress; level; moving; settled; driving: string[] }The meter's reading of a movement at a turn.
RecipeSpectype{ title?; rows; x: { field; type?; title? }; y?; y2?; layers: Layer[]; annotations?; axes?; map?; observationsOf?: Record<string, Observations> }A recipe: rows, what goes across (names, numbers, dates, or a plane of places), layers of marks, notes.
Layertype{ mark; y; axis?; series?; stack?; aggregate?; label?; size?; smooth?; x2?; y2?; order?; text?; close?; quiet?; width?; where? }One layer of a recipe: a mark bound to a field, split, stacked or combined, and on a place its path, segments and names.
Problemtype{ path; kind; allowed?; got?; message }One problem a value has against its schema, as data a caller can act on.
Namedtype{ label; value; series?; group? }One named value: the plain form of data every chart that can reads in its own shape.
CountryKeytypeinterface CountryKey { id; name; drawn }A country: its ISO 3166 alpha-3 code, its name, and whether the 1:110m world map draws it.
Citytype{ name; country; lon; lat; aka? }A city in the table: its name, country, place and other names.
Hatchtype{ angle; gap; w; rgb; cross? }Stripes laid over a fill, so a series is told by its pattern as well as its colour.
WritertypeKinds<void>What plays a display list: a handler for every kind of op.
TransformtypeKinds<Op | null, C>What maps a display list to another: a handler for every kind of op, each giving the op it becomes, or none.
Sizetype{ width: number; height: number; around?: { width: number; height: number } }The raster's size in pixels, and the room round it the host asked for beyond it (the mark row), which a refusal names with it (asked).

Your own recipe

A chart built from data, not code

A recipe is data, not code: rows, an x field and layers of marks, checked against its schema and never run.

Its marks are bar, line, step, area, point, rule, text, path and segment, on one axis or two, stacked or side by side.

{
  "rows": [{ "month": "Jan", "revenue": 410, "margin": 18 }, …],
  "x": { "field": "month" },
  "y": { "title": "Revenue £k", "zero": true },
  "y2": { "title": "Margin", "unit": "%" },
  "layers": [
    { "mark": "bar",  "y": "revenue", "label": "Revenue" },
    { "mark": "line", "y": "margin", "axis": "y2", "label": "Margin" }
  ],
  "annotations": [{ "kind": "hline", "value": 20, "axis": "y2", "label": "Target" }]
}

The eight house recipes below, each as its own example: the recipe data it draws from, and a link to it drawn in Chart Studio. Each is built step by step, and you can build your own, in Chart Studio’s Your charts.

Combo revenue and margin, on two axes combo

Open in Chart Studio →

{
 "title": "Revenue and margin",
 "rows": [
  {
   "month": "Jan",
   "revenue": 410,
   "margin": 18
  },
  {
   "month": "Feb",
   "revenue": 450,
   "margin": 21
  },
  {
   "month": "Mar",
   "revenue": 490,
   "margin": 23
  },
  {
   "month": "Apr",
   "revenue": 464,
   "margin": 24
  },
  {
   "month": "May",
   "revenue": 504,
   "margin": 23
  },
  {
   "month": "Jun",
   "revenue": 544,
   "margin": 22
  },
  {
   "month": "Jul",
   "revenue": 518,
   "margin": 19
  },
  {
   "month": "Aug",
   "revenue": 558,
   "margin": 16
  },
  {
   "month": "Sep",
   "revenue": 598,
   "margin": 13
  },
  {
   "month": "Oct",
   "revenue": 572,
   "margin": 12
  },
  {
   "month": "Nov",
   "revenue": 612,
   "margin": 12
  },
  {
   "month": "Dec",
   "revenue": 652,
   "margin": 14
  }
 ],
 "x": {
  "field": "month"
 },
 "y": {
  "title": "Revenue, £k",
  "zero": true
 },
 "y2": {
  "title": "Margin",
  "unit": "%"
 },
 "layers": [
  {
   "mark": "bar",
   "y": "revenue",
   "label": "Revenue, £k"
  },
  {
   "mark": "line",
   "y": "margin",
   "axis": "y2",
   "label": "Margin"
  }
 ]
}
Sparkline a trend in a word's space sparkline

Open in Chart Studio →

{
 "rows": [
  {
   "t": 0,
   "v": 50
  },
  {
   "t": 1,
   "v": 53.56884751105428
  },
  {
   "t": 2,
   "v": 56.953106463250435
  },
  {
   "t": 3,
   "v": 59.97966512028
  },
  {
   "t": 4,
   "v": 62.49765181769475
  },
  {
   "t": 5,
   "v": 64.38781543226703
  },
  {
   "t": 6,
   "v": 65.56993983924865
  },
  {
   "t": 7,
   "v": 66.00783136248724
  },
  {
   "t": 8,
   "v": 65.71156912190818
  },
  {
   "t": 9,
   "v": 64.73687836265506
  },
  {
   "t": 10,
   "v": 63.18166572924748
  },
  {
   "t": 11,
   "v": 61.179931904627985
  },
  {
   "t": 12,
   "v": 58.89344009671841
  },
  {
   "t": 13,
   "v": 56.5016583856387
  },
  {
   "t": 14,
   "v": 54.19060126772456
  },
  {
   "t": 15,
   "v": 52.14126417509188
  },
  {
   "t": 16,
   "v": 50.51837005630487
  },
  {
   "t": 17,
   "v": 49.460127701256994
  },
  {
   "t": 18,
   "v": 49.06963858801883
  },
  {
   "t": 19,
   "v": 49.40848653229546
  },
  {
   "t": 20,
   "v": 50.492908704042335
  },
  {
   "t": 21,
   "v": 52.2927860788809
  },
  {
   "t": 22,
   "v": 54.7335160931553
  },
  {
   "t": 23,
   "v": 57.700651070008895
  },
  {
   "t": 24,
   "v": 61.04701402161289
  },
  {
   "t": 25,
   "v": 64.60184940142932
  },
  {
   "t": 26,
   "v": 68.18143985705379
  },
  {
   "t": 27,
   "v": 71.60052888536741
  },
  {
   "t": 28,
   "v": 74.68383918462547
  },
  {
   "t": 29,
   "v": 77.27697054813807
  },
  {
   "t": 30,
   "v": 79.25599972129686
  },
  {
   "t": 31,
   "v": 80.53518534933411
  },
  {
   "t": 32,
   "v": 81.07229895948058
  },
  {
   "t": 33,
   "v": 80.87125052287209
  },
  {
   "t": 34,
   "v": 79.98184535148188
  },
  {
   "t": 35,
   "v": 78.49668744505031
  },
  {
   "t": 36,
   "v": 76.54542182290108
  },
  {
   "t": 37,
   "v": 74.2866738245652
  },
  {
   "t": 38,
   "v": 71.8
…
Stacked with a total the parts and the whole recipe-stacked

Open in Chart Studio →

{
 "title": "Orders by channel",
 "rows": [
  {
   "month": "Jan",
   "channel": "Web",
   "orders": 120
  },
  {
   "month": "Jan",
   "channel": "Stores",
   "orders": 90
  },
  {
   "month": "Jan",
   "channel": "Partners",
   "orders": 40
  },
  {
   "month": "Feb",
   "channel": "Web",
   "orders": 129
  },
  {
   "month": "Feb",
   "channel": "Stores",
   "orders": 102
  },
  {
   "month": "Feb",
   "channel": "Partners",
   "orders": 44
  },
  {
   "month": "Mar",
   "channel": "Web",
   "orders": 138
  },
  {
   "month": "Mar",
   "channel": "Stores",
   "orders": 114
  },
  {
   "month": "Mar",
   "channel": "Partners",
   "orders": 48
  },
  {
   "month": "Apr",
   "channel": "Web",
   "orders": 147
  },
  {
   "month": "Apr",
   "channel": "Stores",
   "orders": 126
  },
  {
   "month": "Apr",
   "channel": "Partners",
   "orders": 52
  },
  {
   "month": "May",
   "channel": "Web",
   "orders": 156
  },
  {
   "month": "May",
   "channel": "Stores",
   "orders": 90
  },
  {
   "month": "May",
   "channel": "Partners",
   "orders": 56
  },
  {
   "month": "Jun",
   "channel": "Web",
   "orders": 165
  },
  {
   "month": "Jun",
   "channel": "Stores",
   "orders": 102
  },
  {
   "month": "Jun",
   "channel": "Partners",
   "orders": 60
  },
  {
   "month": "Jul",
   "channel": "Web",
   "orders": 174
  },
  {
   "month": "Jul",
   "channel": "Stores",
   "orders": 114
  },
  {
   "month": "Jul",
   "channel": "Partners",
   "orders": 64
  },
  {
   "month": "Aug",
   "channel": "Web",
   "orders": 183
  },
  {
   "month": "Aug",
   "channel": "Stores",
   "orders": 126
  },
  {
   "month": "Aug",
   "channel": "Partners",
   "orders": 68
  },
  {
   "month": "Sep",
   "channel": "Web",
   "orders": 192
  },
  {
   "month": "Sep",
   "channel": "Stores",
   "o
…
Lollipop, sized ranked, with a second value recipe-lollipop

Open in Chart Studio →

{
 "title": "Response time by region",
 "rows": [
  {
   "region": "EU-West",
   "ms": 182,
   "requests": 4200
  },
  {
   "region": "US-East",
   "ms": 214,
   "requests": 6100
  },
  {
   "region": "AP-South",
   "ms": 301,
   "requests": 2300
  },
  {
   "region": "EU-North",
   "ms": 166,
   "requests": 1800
  },
  {
   "region": "US-West",
   "ms": 240,
   "requests": 3900
  },
  {
   "region": "SA-East",
   "ms": 338,
   "requests": 1200
  }
 ],
 "x": {
  "field": "region"
 },
 "y": {
  "title": "p95 ms",
  "zero": true
 },
 "layers": [
  {
   "mark": "rule",
   "y": "ms",
   "label": "p95",
   "size": "requests"
  }
 ],
 "annotations": [
  {
   "kind": "hline",
   "value": 250,
   "label": "SLO 250 ms"
  }
 ]
}
Annotated trend against a target, with events recipe-annotated

Open in Chart Studio →

{
 "title": "Weekly active users",
 "rows": [
  {
   "week": "2026-03-02",
   "users": 12000
  },
  {
   "week": "2026-03-09",
   "users": 12838
  },
  {
   "week": "2026-03-16",
   "users": 13626
  },
  {
   "week": "2026-03-23",
   "users": 14318
  },
  {
   "week": "2026-03-30",
   "users": 14881
  },
  {
   "week": "2026-04-06",
   "users": 15294
  },
  {
   "week": "2026-04-13",
   "users": 15553
  },
  {
   "week": "2026-04-20",
   "users": 15672
  },
  {
   "week": "2026-04-27",
   "users": 15680
  },
  {
   "week": "2026-05-04",
   "users": 15618
  },
  {
   "week": "2026-05-11",
   "users": 15533
  },
  {
   "week": "2026-05-18",
   "users": 15478
  },
  {
   "week": "2026-05-25",
   "users": 15500
  },
  {
   "week": "2026-06-01",
   "users": 15639
  },
  {
   "week": "2026-06-08",
   "users": 15921
  },
  {
   "week": "2026-06-15",
   "users": 16358
  },
  {
   "week": "2026-06-22",
   "users": 19541
  },
  {
   "week": "2026-06-29",
   "users": 20251
  },
  {
   "week": "2026-07-06",
   "users": 21049
  },
  {
   "week": "2026-07-13",
   "users": 21890
  },
  {
   "week": "2026-07-20",
   "users": 22724
  },
  {
   "week": "2026-07-27",
   "users": 23500
  },
  {
   "week": "2026-08-03",
   "users": 24174
  },
  {
   "week": "2026-08-10",
   "users": 24716
  },
  {
   "week": "2026-08-17",
   "users": 25105
  },
  {
   "week": "2026-08-24",
   "users": 25342
  }
 ],
 "x": {
  "field": "week",
  "type": "time"
 },
 "y": {
  "title": "Users"
 },
 "layers": [
  {
   "mark": "area",
   "y": "users",
   "label": "Active users"
  }
 ],
 "annotations": [
  {
   "kind": "hline",
   "value": 20000,
   "label": "Target 20k"
  },
  {
   "kind": "band",
   "value": 15000,
   "to": 17000,
   "label": "Last year's range"
  },
  {
   "kind": "vline",
   "value": "2026-06-2
…
Delivery spread times and counts, combined by week recipe-spread

Open in Chart Studio →

{
 "title": "Delivery times",
 "rows": [
  {
   "week": "W01",
   "days": 2.4
  },
  {
   "week": "W01",
   "days": 3.8
  },
  {
   "week": "W01",
   "days": 2
  },
  {
   "week": "W01",
   "days": 3.2
  },
  {
   "week": "W01",
   "days": 2.6
  },
  {
   "week": "W01",
   "days": 2.4
  },
  {
   "week": "W02",
   "days": 3.3
  },
  {
   "week": "W02",
   "days": 2.5
  },
  {
   "week": "W02",
   "days": 2.9
  },
  {
   "week": "W02",
   "days": 3.3
  },
  {
   "week": "W02",
   "days": 1.5
  },
  {
   "week": "W02",
   "days": 3.7
  },
  {
   "week": "W02",
   "days": 3.1
  },
  {
   "week": "W02",
   "days": 1.9
  },
  {
   "week": "W03",
   "days": 2.2
  },
  {
   "week": "W03",
   "days": 2.7
  },
  {
   "week": "W03",
   "days": 3.8
  },
  {
   "week": "W03",
   "days": 2
  },
  {
   "week": "W03",
   "days": 2.4
  },
  {
   "week": "W03",
   "days": 3.8
  },
  {
   "week": "W03",
   "days": 2
  },
  {
   "week": "W03",
   "days": 3.2
  },
  {
   "week": "W03",
   "days": 2.6
  },
  {
   "week": "W03",
   "days": 2.4
  },
  {
   "week": "W04",
   "days": 1.6
  },
  {
   "week": "W04",
   "days": 4
  },
  {
   "week": "W04",
   "days": 2.7
  },
  {
   "week": "W04",
   "days": 2.2
  },
  {
   "week": "W04",
   "days": 3.3
  },
  {
   "week": "W04",
   "days": 2.4
  },
  {
   "week": "W04",
   "days": 2.9
  },
  {
   "week": "W05",
   "days": 2.8
  },
  {
   "week": "W05",
   "days": 3.4
  },
  {
   "week": "W05",
   "days": 2.1
  },
  {
   "week": "W05",
   "days": 3.5
  },
  {
   "week": "W05",
   "days": 2.1
  },
  {
   "week": "W05",
   "days": 2.7
  },
  {
   "week": "W05",
   "days": 3.8
  },
  {
   "week": "W05",
   "days": 1.9
  },
  {
   "week": "W05",
   "days": 2.5
  },
  {
   "week": "W06",
   "days": 3.1
  },
  {
   "week": "W06",
   "days": 2.3
  },
  {
…
Shop floor places on a plane, the aisles between them recipe-floor

Open in Chart Studio →

{
 "title": "Shop floor",
 "rows": [
  {
   "kind": "wall",
   "order": 0,
   "x": 0,
   "y": 0
  },
  {
   "kind": "wall",
   "order": 1,
   "x": 40,
   "y": 0
  },
  {
   "kind": "wall",
   "order": 2,
   "x": 40,
   "y": 24
  },
  {
   "kind": "wall",
   "order": 3,
   "x": 0,
   "y": 24
  },
  {
   "kind": "aisle",
   "x": 8,
   "y": 4,
   "x2": 8,
   "y2": 20
  },
  {
   "kind": "aisle",
   "x": 16,
   "y": 4,
   "x2": 16,
   "y2": 20
  },
  {
   "kind": "aisle",
   "x": 24,
   "y": 4,
   "x2": 24,
   "y2": 20
  },
  {
   "kind": "aisle",
   "x": 32,
   "y": 4,
   "x2": 32,
   "y2": 20
  },
  {
   "kind": "stop",
   "name": "Entrance",
   "x": 20,
   "y": 2,
   "visits": 960
  },
  {
   "kind": "stop",
   "name": "Fresh",
   "x": 8,
   "y": 21.5,
   "visits": 640
  },
  {
   "kind": "stop",
   "name": "Bakery",
   "x": 32,
   "y": 21.5,
   "visits": 410
  },
  {
   "kind": "stop",
   "name": "Tills",
   "x": 36,
   "y": 6,
   "visits": 870
  },
  {
   "kind": "stop",
   "name": "Dairy",
   "x": 12,
   "y": 12,
   "visits": 520
  },
  {
   "kind": "stop",
   "name": "Offers",
   "x": 28,
   "y": 12,
   "visits": 300
  }
 ],
 "x": {
  "field": "x",
  "type": "plane"
 },
 "layers": [
  {
   "mark": "path",
   "y": "y",
   "order": "order",
   "close": true,
   "quiet": true,
   "where": {
    "field": "kind",
    "equals": "wall"
   }
  },
  {
   "mark": "segment",
   "y": "y",
   "x2": "x2",
   "y2": "y2",
   "width": 6,
   "label": "Aisles",
   "where": {
    "field": "kind",
    "equals": "aisle"
   }
  },
  {
   "mark": "point",
   "y": "y",
   "size": "visits",
   "text": "name",
   "label": "Stops",
   "where": {
    "field": "kind",
    "equals": "stop"
   }
  },
  {
   "mark": "text",
   "y": "y",
   "text": "name",
   "quiet": true,
   "where": {
    "field":
…
Offices on the world places on a map, lanes between them map-world

Open in Chart Studio →

{
 "title": "Offices and shipping lanes",
 "rows": [
  {
   "kind": "office",
   "city": "London",
   "lon": -0.13,
   "lat": 51.5,
   "staff": 420
  },
  {
   "kind": "office",
   "city": "New York",
   "lon": -74,
   "lat": 40.7,
   "staff": 380
  },
  {
   "kind": "office",
   "city": "Singapore",
   "lon": 103.8,
   "lat": 1.35,
   "staff": 260
  },
  {
   "kind": "office",
   "city": "Dubai",
   "lon": 55.3,
   "lat": 25.2,
   "staff": 140
  },
  {
   "kind": "office",
   "city": "São Paulo",
   "lon": -46.6,
   "lat": -23.5,
   "staff": 120
  },
  {
   "kind": "office",
   "city": "Sydney",
   "lon": 151.2,
   "lat": -33.9,
   "staff": 90
  },
  {
   "kind": "office",
   "city": "Tokyo",
   "lon": 139.7,
   "lat": 35.7,
   "staff": 210
  },
  {
   "kind": "leg",
   "lane": "Atlantic",
   "order": 0,
   "city": "London",
   "lon": -0.13,
   "lat": 51.5
  },
  {
   "kind": "leg",
   "lane": "Atlantic",
   "order": 1,
   "city": "New York",
   "lon": -74,
   "lat": 40.7
  },
  {
   "kind": "leg",
   "lane": "Asia",
   "order": 0,
   "city": "London",
   "lon": -0.13,
   "lat": 51.5
  },
  {
   "kind": "leg",
   "lane": "Asia",
   "order": 1,
   "city": "Dubai",
   "lon": 55.3,
   "lat": 25.2
  },
  {
   "kind": "leg",
   "lane": "Asia",
   "order": 2,
   "city": "Singapore",
   "lon": 103.8,
   "lat": 1.35
  },
  {
   "kind": "leg",
   "lane": "Asia",
   "order": 3,
   "city": "Tokyo",
   "lon": 139.7,
   "lat": 35.7
  },
  {
   "kind": "leg",
   "lane": "Pacific",
   "order": 0,
   "city": "Tokyo",
   "lon": 139.7,
   "lat": 35.7
  },
  {
   "kind": "leg",
   "lane": "Pacific",
   "order": 1,
   "city": "Sydney",
   "lon": 151.2,
   "lat": -33.9
  },
  {
   "kind": "leg",
   "lane": "South",
   "order": 0,
   "city": "New York",
   "lon": -74,
   "lat": 40.7
  },
  
…
The recipe schema (JSON Schema 2020-12)
{
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "title": "Hue Charts recipe",
  "type": "object",
  "required": [
    "rows",
    "x",
    "layers"
  ],
  "additionalProperties": false,
  "properties": {
    "title": {
      "type": "string",
      "description": "The chart's title, drawn over it."
    },
    "rows": {
      "type": "array",
      "minItems": 1,
      "items": {
        "type": "object"
      },
      "description": "Your rows, one object to a row: the fields the layers name, each a string or a number."
    },
    "x": {
      "type": "object",
      "required": [
        "field"
      ],
      "additionalProperties": false,
      "description": "What runs across: the field each row is placed by, and how it is read.",
      "properties": {
        "field": {
          "type": "string",
          "description": "The field a row's place across is read from."
        },
        "type": {
          "enum": [
            "band",
            "linear",
            "time",
            "plane"
          ],
          "description": "band (names in the order they come; the default), linear (numbers), time (dates) or plane (x and y one scale, each row a place)."
        },
        "title": {
          "type": "string",
          "description": "The words under the axis across."
        }
      }
    },
    "y": {
      "type": "object",
      "additionalProperties": false,
      "description": "The value axis on the left.",
      "properties": {
        "title": {
          "type": "string",
          "description": "The words over the left axis."
        },
        "zero": {
          "type": "boolean",
          "description": "Start the left axis at naught: the default where the recipe has bars."
        },
        "unit": {
          "type": "string",
          "description": "A unit written after each value on the left axis, such as %."
        }
      }
    },
    "y2": {
      "type": "object",
      "additionalProperties": false,
      "description": "The second value axis, on the right: the one a layer with axis y2 reads against.",
      "properties": {
        "title": {
          "type": "string",
          "description": "The words over the right axis."
        },
        "zero": {
          "type": "boolean",
          "description": "Start the right axis at naught."
        },
        "unit": {
          "type": "string",
          "description": "A unit written after each value on the right axis, such as %."
        }
      }
    },
    "axes": {
      "type": "boolean",
      "description": "false draws the marks alone, with no axes: a sparkline."
    },
    "map": {
      "enum": [
        "world"
      ],
      "description": "world draws the world under the places: x is longitude and each layer's y latitude."
    },
    "observationsOf": {
      "type": "object",
      "additionalProperties": {
        "type": "object",
        "additionalProperties": false,
        "properties": {
          "bonds": {
            "type": "array",
            "items": {
              "type": "number",
              "exclusiveMinimum": 0,
              "exclusiveMaximum": 1
            }
          },
          "carried": {
            "type": "array",
            "items": {
              "type": "string"
            }
          },
          "landed": {
            "type": "array",
            "items": {
              "type": "string"
            }
          }
        }
      },
      "description": "Each series' observations, by its name: the kernel draws each as that concept's trace."
    },
    "layers": {
      "type": "array",
      "minItems": 1,
      "description": "The marks, each layer drawn over the one before.",
      "items": {
        "type": "object",
        "required": [
          "mark",
          "y"
        ],
        "additionalProperties": false,
        "description": "One layer: a mark bound to a field of the rows.",
        "properties": {
          "mark": {
            "enum": [
              "bar",
              "line",
              "step",
              "area",
              "point",
              "rule",
              "text",
              "path",
              "segment"
            ],
            "description": "bar, line, step, area, point, rule (a stem and a dot) or text; on a plane or the world, path and segment too."
          },
          "y": {
            "type": "string",
            "description": "The field that carries the value; on a plane or the world, the other coordinate."
          },
          "axis": {
            "enum": [
              "y",
              "y2"
            ],
            "description": "The value axis the layer reads against: y on the left (the default) or y2 on the right."
          },
          "series": {
            "type": "string",
            "description": "A field whose values split the layer into series, an ink each."
          },
          "stack": {
            "type": "boolean",
            "description": "Stack the layer's series one on another."
          },
          "aggregate": {
            "enum": [
              "sum",
              "mean",
              "min",
              "max",
              "count"
            ],
            "description": "How rows that share an x are combined: sum (the default), mean, min, max or count."
          },
          "label": {
            "type": "string",
            "description": "The layer's name in the legend, where it is one series."
          },
          "size": {
            "type": "string",
            "description": "A field whose value sizes each point."
          },
          "smooth": {
            "type": "boolean",
            "description": "A curve through the points in place of straight lines."
          },
          "x2": {
            "type": "string",
            "description": "On a plane or the world: the field of a segment's second point across."
          },
          "y2": {
            "type": "string",
            "description": "On a plane or the world: the field of a segment's second point up."
          },
          "order": {
            "type": "string",
            "description": "On a plane or the world: the field a path or an area runs through its rows in the order of."
          },
          "text": {
            "type": "string",
            "description": "On a plane or the world: the field a text layer writes and a point names."
          },
          "close": {
            "type": "boolean",
            "description": "On a plane or the world: the path returns to its first row."
          },
          "quiet": {
            "type": "boolean",
            "description": "On a plane or the world: drawn in greys, outside the legend; a floor, a backdrop, names beside places."
          },
          "width": {
            "type": "number",
            "minimum": 0.5,
            "maximum": 24,
            "description": "On a plane or the world: a line's width in pixels, or a point's radius when no field sizes it."
          },
          "where": {
            "type": "object",
            "required": [
              "field",
              "equals"
            ],
            "additionalProperties": false,
            "description": "Only the rows whose field holds a value: two kinds of row in one table.",
            "properties": {
              "field": {
                "type": "string",
                "description": "The field read."
              },
              "equals": {
                "type": [
                  "string",
                  "number"
                ],
                "description": "The value a row's field holds for the layer to draw it."
              }
            }
          }
        }
      }
    },
    "annotations": {
      "type": "array",
      "description": "Notes over the marks: lines, bands and words.",
      "items": {
        "type": "object",
        "required": [
          "kind"
        ],
        "additionalProperties": false,
        "description": "One note.",
        "properties": {
          "kind": {
            "enum": [
              "hline",
              "vline",
              "band",
              "text"
            ],
            "description": "hline (a level across), vline (a moment, at an x), band (a range across) or text (words at a point)."
          },
          "value": {
            "type": [
              "number",
              "string"
            ],
            "description": "Where it stands: a level, a band's first edge, a vline's x, or a text's height."
          },
          "to": {
            "type": "number",
            "description": "A band's other edge."
          },
          "axis": {
            "enum": [
              "y",
              "y2"
            ],
            "description": "The value axis it is read against: y (the default) or y2."
          },
          "label": {
            "type": "string",
            "description": "Its words."
          },
          "at": {
            "type": [
              "number",
              "string"
            ],
            "description": "Where a text stands across: an x the rows hold."
          }
        }
      }
    }
  }
}

The charts

Every chart in the catalogue, by question

Each chart under the question it answers, then the components. Open a group for each chart's data, options and sample.

Change

25 charts

Line trend over time

Open in Chart Studio →

line

Data LineData — SeriesData { categories: string[]; series: { label: string; values: number[] }[]; unit?: string (an ISO 4217 code writes the values as money); unitOne?: string (its singular, after a value of one) }, each series may carry observations?: { bonds?: number[] (each strictly between 0 and 1); carried?: string[]; landed?: string[] }; or WaveformsData { waveforms: Waveform[] (each { name; unit?; rate (samples a second); start? (s); scale?; offset?; samples, or byRange }); trigger?: { at: number (s from the record's start); level?: number } }

The options Line takes.
OptionKindDefaultTakes
titleTitletitle""text
contextContext: the unit and the periodtitle""text
figureHeadline figure, as writtentitle""text
xAxisX axisaxestruetoggle
xTitleX axis titleaxes""text
yAxisY axisaxestruetoggle
yTitleY axis titleaxes""text
gridGrid linesaxestruetoggle
legendSeries names and keylegendtruetoggle
stripesEvery series in its pattern, for printlegendfalsetoggle
valuesValue labelsvaluesfalsetoggle
figureOfHeadline figure, worked outtitle"none"none · last · total
deltaIts change on the period beforetitlefalsetoggle
curveLineshape"straight"smooth · straight · step
roundingMoney: a half roundedvalues"half-away"half-away · half-even
negativesMoney: a negative writtenvalues"minus"minus · brackets
markersEvery pointshapefalsetoggle
weightLine weightshape2.251 to 5, step 0.25
zeroStart the axis at zeroaxesfalsetoggle
fromView fromaxes00 to 1, step 0.001
toView toaxes10 to 1, step 0.001
aroundSamples around the triggeraxes16000 to 1000000, step 1
cursorsCursors a and baxesfalsetoggle
cursorACursor aaxes0.250 to 1, step 0.0001
cursorBCursor baxes0.750 to 1, step 0.0001
overwriteOverwrite from the left, as a monitor drawsaxesfalsetoggle
Sample data
{
 "categories": [
  "Jan",
  "Feb",
  "Mar",
  "Apr",
  "May",
  "Jun",
  "Jul",
  "Aug",
  "Sep",
  "Oct",
  "Nov",
  "Dec"
 ],
 "series": [
  {
   "label": "Revenue",
   "values": [
    412,
    436,
    451,
    447,
    478,
    502,
    519,
    511,
    540,
    566,
    581,
    612
   ]
  },
  {
   "label": "Cost",
   "values": [
    301,
    305,
    318,
    322,
    329,
    341,
    350,
    356,
    361,
    372,
    380,
    391
   ]
  }
 ]
}

Live feed a window that scrolls

Open in Chart Studio →

live-feed

Data FeedData — { series: { label: string; values: number[]; times?: (number | string)[] (s, or instants as ISO 8601 text, one to each value, each drawn at its own) }[]; every?: number (s between samples given evenly, with no times); unit?: string; unitOne?: string (its singular, after a value of one) } (t, first and seed are the chart's own stand-in feed's; a feed given is never stepped); each series may carry observations?: { bonds?: number[] (each strictly between 0 and 1); carried?: string[]; landed?: string[] }

The options Live feed takes.
OptionKindDefaultTakes
titleTitletitle""text
contextContext: the unit and the periodtitle""text
figureHeadline figure, as writtentitle""text
xAxisX axisaxestruetoggle
yAxisY axisaxestruetoggle
gridGrid linesaxestruetoggle
legendSeries names and keylegendtruetoggle
stripesEvery series in its pattern, for printlegendfalsetoggle
windowWindow (samples)shape12020 to 240, step 10
styleStyleshape"line"line · area
latestLatest valuesvaluestruetoggle
roundingMoney: a half roundedvalues"half-away"half-away · half-even
negativesMoney: a negative writtenvalues"minus"minus · brackets
Sample data
{
 "t": 0,
 "every": 0.25,
 "first": 0,
 "seed": 9,
 "unit": "req/s",
 "series": [
  {
   "label": "api",
   "values": [
    572,
    681,
    705,
    710,
    658,
    720,
    711,
    700,
    669,
    757,
    752,
    745,
    "… 108 more"
   ]
  },
  {
   "label": "web",
   "values": [
    521,
    486,
    498,
    494,
    521,
    525,
    485,
    499,
    499,
    470,
    464,
    468,
    "… 108 more"
   ]
  },
  {
   "label": "worker",
   "values": [
    231,
    216,
    180,
    214,
    212,
    186,
    212,
    187,
    196,
    179,
    202,
    195,
    "… 108 more"
   ]
  }
 ]
}

Period against the period before

Open in Chart Studio →

period

Data CalendarData — { dates: (string | Date)[] (ISO 8601; each read to its day in the zone); values: (number | null)[] (one to each date); unit?: string; unitOne?: string (its singular, after a value of one) }

The options Period takes.
OptionKindDefaultTakes
titleTitletitle""text
contextContext: the unit and the periodtitle""text
figureHeadline figure, as writtentitle""text
xAxisX axisaxestruetoggle
yAxisY axisaxestruetoggle
gridGrid linesaxestruetoggle
legendSeries names and keylegendtruetoggle
stripesEvery series in its pattern, for printlegendfalsetoggle
periodPeriodaxes"month"week · month · quarter · year
compareAgainstaxes"previous"previous · last year
alignLast year's days byaxes"date"date · weekday
throughThrough (a date; the data's last if none)axes""text
weekStartWeeks begin onaxes"locale"locale · monday · sunday · saturday · friday
zoneTime zone (IANA name)axes""text
roundingMoney: a half roundedvalues"half-away"half-away · half-even
negativesMoney: a negative writtenvalues"minus"minus · brackets
Sample data
{
 "dates": [
  "2024-09-01",
  "2024-09-02",
  "2024-09-03",
  "2024-09-04",
  "2024-09-05",
  "2024-09-06",
  "2024-09-07",
  "2024-09-08",
  "2024-09-09",
  "2024-09-10",
  "2024-09-11",
  "2024-09-12",
  "2024-09-13",
  "2024-09-14",
  "2024-09-15",
  "2024-09-16",
  "2024-09-17",
  "2024-09-18",
  "2024-09-19",
  "2024-09-20",
  "2024-09-21",
  "2024-09-22",
  "2024-09-23",
  "2024-09-24",
  "2024-09-25",
  "2024-09-26",
  "2024-09-27",
  "2024-09-28",
  "2024-09-29",
  "2024-09-30",
  "2024-10-01",
  "2024-10-02",
  "2024-10-03",
  "2024-10-04",
  "2024-10-05",
  "2024-10-06",
  "2024-10-07",
  "2024-10-08",
  "2024-10-09",
  "2024-10-10",
  "2024-10-11",
  "2024-10-12",
  "2024-10-13",
  "2024-10-14",
  "2024-10-15",
  "2024-10-16",
  "2024-10-17",
  "2024-10-18",
  "2024-10-19",
  "2024-10-20",
  "2024-10-21",
  "2024-10-22",
  "2024-10-23",
  "2024-10-24",
  "2024-10-25",
  "2024-10-26",
  "2024-10-27",
  "2024-10-28",
  "2024-10-29",
  "2024-10-30",
  "2024-10-31",
  "2025-09-01",
  "2025-09-02",
  "2025-09-03",
  "2025-09-04",
  "2025-09-05",
  "2025-09-06",
  "2025-09-07",
  "2025-09-08",
  "2025-09-09",
  "2025-09-10",
  "2025-09-11",
  "2025-09-12",
  "2025-09-13",
  "2025-09-14",
  "2025-09-15",
  "2025-09-16",
  "2025-09-17",
  "2025-09-18",
  "2025-09-19",
  "2025-09-20",
  "2025-09-21",
  "2025-09-22",
  "2025-09-23",
  "2025-09-24",
  "2025-09-25",
  "2025-09-26",
  "2025-09-27",
  "2025-09-28",
  "2025-09-29",
  "2025-09-30",
  "2025-10-01",
  "2025-10-02",
  "2025-10-03",
  "2025-10-04",
  "2025-10-05",
  "2025-10-06",
  "2025-10-07",
  "2025-10-08",
  "2025-10-09",
  "2025-10-10",
  "2025-10-11",
  "2025-10-12",
  "2025-10-13",
  "2025-10-14",
  "2025-10-15"
 ],
 "values": [
  65,
  37,
  42,
  36,
  37,
  51,
  68,
  66,
  33,
  39,
  42,
  36,
  
…

Error bars a measurement

Open in Chart Studio →

error-bars

Data ErrorData — { categories: string[]; series: { label: string; values: number[]; errors: number[] }[] }; each series may carry observations?: { bonds?: number[] (each strictly between 0 and 1); carried?: string[]; landed?: string[] }

The options Error bars takes.
OptionKindDefaultTakes
titleTitletitle""text
contextContext: the unit and the periodtitle""text
figureHeadline figure, as writtentitle""text
xAxisX axisaxestruetoggle
xTitleX axis titleaxes""text
yAxisY axisaxestruetoggle
yTitleY axis titleaxes""text
gridGrid linesaxestruetoggle
legendSeries names and keylegendtruetoggle
stripesEvery series in its pattern, for printlegendfalsetoggle
valuesValue labelsvaluesfalsetoggle
styleMarkshape"point"point · bar
capCap widthshape80 to 16, step 1
Sample data
{
 "categories": [
  "0 h",
  "6 h",
  "12 h",
  "24 h",
  "48 h"
 ],
 "series": [
  {
   "label": "Control",
   "values": [
    1,
    1.1,
    1.05,
    1.12,
    1.08
   ],
   "errors": [
    0.08,
    0.09,
    0.07,
    0.1,
    0.09
   ]
  },
  {
   "label": "Treated",
   "values": [
    1,
    1.42,
    1.86,
    2.31,
    2.52
   ],
   "errors": [
    0.09,
    0.14,
    0.18,
    0.22,
    0.2
   ]
  }
 ]
}

Order tracking a run's orders against speed, its critical speed and Q

Open in Chart Studio →

order-tracking

Data OrderRun — { speeds: number[] (rpm, rising or falling); keys?: string[] (each speed's row key, as its table names it, one to each speed); orders: { order: number (a multiple of the shaft's speed); label?: string (the order as its table spells it); amplitude: number[] (one a speed, at or above naught); phase?: number[] (degrees, one a speed) }[]; unit?: string (the amplitudes'); measure?: string (what they measure, "Velocity") }

The options Order tracking takes.
OptionKindDefaultTakes
titleTitletitle""text
contextContext: the unit and the periodtitle""text
figureHeadline figure, as writtentitle""text
xAxisX axisaxestruetoggle
yAxisY axisaxestruetoggle
gridGrid linesaxestruetoggle
legendSeries names and keylegendtruetoggle
stripesEvery series in its pattern, for printlegendfalsetoggle
orderReadThe order readshape10.5 to 100, step 0.5
phaseThe order read's phase, in a pane underaxestruetoggle
Sample data
{
 "speeds": {
  "0": 300,
  "1": 310,
  "2": 320,
  "3": 330,
  "4": 340,
  "5": 350,
  "6": 360,
  "7": 370,
  "8": 380,
  "9": 390,
  "10": 400,
  "11": 410,
  "12": 420,
  "13": 430,
  "14": 440,
  "15": 450,
  "16": 460,
  "17": 470,
  "18": 480,
  "19": 490,
  "20": 500,
  "21": 510,
  "22": 520,
  "23": 530,
  "24": 540,
  "25": 550,
  "26": 560,
  "27": 570,
  "28": 580,
  "29": 590,
  "30": 600,
  "31": 610,
  "32": 620,
  "33": 630,
  "34": 640,
  "35": 650,
  "36": 660,
  "37": 670,
  "38": 680,
  "39": 690,
  "40": 700,
  "41": 710,
  "42": 720,
  "43": 730,
  "44": 740,
  "45": 750,
  "46": 760,
  "47": 770,
  "48": 780,
  "49": 790,
  "50": 800,
  "51": 810,
  "52": 820,
  "53": 830,
  "54": 840,
  "55": 850,
  "56": 860,
  "57": 870,
  "58": 880,
  "59": 890,
  "60": 900,
  "61": 910,
  "62": 920,
  "63": 930,
  "64": 940,
  "65": 950,
  "66": 960,
  "67": 970,
  "68": 980,
  "69": 990,
  "70": 1000,
  "71": 1010,
  "72": 1020,
  "73": 1030,
  "74": 1040,
  "75": 1050,
  "76": 1060,
  "77": 1070,
  "78": 1080,
  "79": 1090,
  "80": 1100,
  "81": 1110,
  "82": 1120,
  "83": 1130,
  "84": 1140,
  "85": 1150,
  "86": 1160,
  "87": 1170,
  "88": 1180,
  "89": 1190,
  "90": 1200,
  "91": 1210,
  "92": 1220,
  "93": 1230,
  "94": 1240,
  "95": 1250,
  "96": 1260,
  "97": 1270,
  "98": 1280,
  "99": 1290,
  "100": 1300,
  "101": 1310,
  "102": 1320,
  "103": 1330,
  "104": 1340,
  "105": 1350,
  "106": 1360,
  "107": 1370,
  "108": 1380,
  "109": 1390,
  "110": 1400,
  "111": 1410,
  "112": 1420,
  "113": 1430,
  "114": 1440,
  "115": 1450,
  "116": 1460,
  "117": 1470,
  "118": 1480,
  "119": 1490,
  "120": 1500,
  "121": 1510,
  "122": 1520,
  "123": 1530,
  "124": 1540,
  "125": 1550,
  "126": 1560,
  "127": 1570,
  "128": 1580,
  "129": 1590,
  "130": 1600,

…

Area stacked over time

Open in Chart Studio →

area

Data SeriesData — { categories: string[]; series: { label: string; values: number[] }[] }; each series may carry observations?: { bonds?: number[] (each strictly between 0 and 1); carried?: string[]; landed?: string[] }

The options Area takes.
OptionKindDefaultTakes
titleTitletitle""text
contextContext: the unit and the periodtitle""text
figureHeadline figure, as writtentitle""text
xAxisX axisaxestruetoggle
xTitleX axis titleaxes""text
yAxisY axisaxestruetoggle
yTitleY axis titleaxes""text
gridGrid linesaxestruetoggle
legendSeries names and keylegendtruetoggle
stripesEvery series in its pattern, for printlegendfalsetoggle
valuesValue labelsvaluesfalsetoggle
figureOfHeadline figure, worked outtitle"none"none · last · total
deltaIts change on the period beforetitlefalsetoggle
curveLineshape"straight"smooth · straight · step
stackStack the seriesshapetruetoggle
Sample data
{
 "categories": [
  "W1",
  "W2",
  "W3",
  "W4",
  "W5",
  "W6",
  "W7",
  "W8",
  "W9",
  "W10",
  "W11",
  "W12"
 ],
 "series": [
  {
   "label": "Organic",
   "values": [
    3.1,
    3.3,
    3.2,
    3.6,
    3.9,
    4.1,
    4,
    4.4,
    4.7,
    4.6,
    5,
    5.3
   ]
  },
  {
   "label": "Paid",
   "values": [
    1.8,
    2.1,
    2.4,
    2.2,
    2.6,
    2.9,
    3.3,
    3.1,
    3,
    3.4,
    3.6,
    3.9
   ]
  },
  {
   "label": "Referral",
   "values": [
    0.9,
    1,
    1.2,
    1.1,
    1.3,
    1.2,
    1.5,
    1.6,
    1.8,
    1.7,
    1.9,
    2.1
   ]
  }
 ]
}

Streamgraph flowing share

Open in Chart Studio →

streamgraph

Data SeriesData — { categories: string[]; series: { label: string; values: number[] }[] }; each series may carry observations?: { bonds?: number[] (each strictly between 0 and 1); carried?: string[]; landed?: string[] }

The options Streamgraph takes.
OptionKindDefaultTakes
titleTitletitle""text
contextContext: the unit and the periodtitle""text
figureHeadline figure, as writtentitle""text
xAxisX axisaxestruetoggle
gridGrid linesaxestruetoggle
legendSeries names and keylegendtruetoggle
stripesEvery series in its pattern, for printlegendfalsetoggle
offsetBaselineshape"wiggle"silhouette · wiggle · zero
smoothSmooth curvesshapetruetoggle
Sample data
{
 "categories": [
  "00h",
  "01h",
  "02h",
  "03h",
  "04h",
  "05h",
  "06h",
  "07h",
  "08h",
  "09h",
  "10h",
  "11h",
  "12h",
  "13h",
  "14h",
  "15h",
  "16h",
  "17h",
  "18h",
  "19h",
  "20h",
  "21h",
  "22h",
  "23h"
 ],
 "series": [
  {
   "label": "Nuclear",
   "values": [
    4.2,
    4.2,
    4.2,
    4.2,
    4.2,
    4.2,
    4.2,
    4.2,
    4.2,
    4.2,
    4.2,
    4.2,
    "… 12 more"
   ]
  },
  {
   "label": "Wind",
   "values": [
    4.85,
    5.1,
    5.2,
    5.15,
    4.96,
    4.63,
    4.19,
    3.67,
    3.1,
    2.53,
    1.99,
    1.52,
    "… 12 more"
   ]
  },
  {
   "label": "Solar",
   "values": [
    0,
    0,
    0,
    0,
    0.02,
    0.06,
    0.17,
    0.45,
    1.02,
    1.99,
    3.34,
    4.84,
    "… 12 more"
   ]
  },
  {
   "label": "Gas",
   "values": [
    2.07,
    1.78,
    1.62,
    1.55,
    1.52,
    1.51,
    1.5,
    1.51,
    1.52,
    1.55,
    1.62,
    1.78,
    "… 12 more"
   ]
  },
  {
   "label": "Hydro",
   "values": [
    0.8,
    0.8,
    0.82,
    0.87,
    1.02,
    1.32,
    1.77,
    2.21,
    2.4,
    2.21,
    1.77,
    1.32,
    "… 12 more"
   ]
  }
 ]
}

Combo revenue and margin, on two axes

Open in Chart Studio →

combo

Data RecipeSpec — { rows: {…}[]; x: { field; type? }; layers: { mark; y; axis?; series?; stack?; aggregate?; size?; smooth? }[]; y?; y2?; annotations?; axes?; observationsOf?: Record<series name, { bonds?: number[] (each strictly between 0 and 1); carried?: string[]; landed?: string[] }> } — see RECIPE_SCHEMA

The options Combo takes.
OptionKindDefaultTakes
titleTitletitle""text
contextContext: the unit and the periodtitle""text
figureHeadline figure, as writtentitle""text
legendSeries names and keylegendtruetoggle
stripesEvery series in its pattern, for printlegendfalsetoggle
gridGrid linesaxestruetoggle
valuesValue labelsvaluesfalsetoggle
roundingMoney: a half roundedvalues"half-away"half-away · half-even
negativesMoney: a negative writtenvalues"minus"minus · brackets
Sample data
{
 "title": "Revenue and margin",
 "rows": [
  {
   "month": "Jan",
   "revenue": 410,
   "margin": 18
  },
  {
   "month": "Feb",
   "revenue": 450,
   "margin": 21
  },
  {
   "month": "Mar",
   "revenue": 490,
   "margin": 23
  },
  {
   "month": "Apr",
   "revenue": 464,
   "margin": 24
  },
  {
   "month": "May",
   "revenue": 504,
   "margin": 23
  },
  {
   "month": "Jun",
   "revenue": 544,
   "margin": 22
  },
  {
   "month": "Jul",
   "revenue": 518,
   "margin": 19
  },
  {
   "month": "Aug",
   "revenue": 558,
   "margin": 16
  },
  {
   "month": "Sep",
   "revenue": 598,
   "margin": 13
  },
  {
   "month": "Oct",
   "revenue": 572,
   "margin": 12
  },
  {
   "month": "Nov",
   "revenue": 612,
   "margin": 12
  },
  {
   "month": "Dec",
   "revenue": 652,
   "margin": 14
  }
 ],
 "x": {
  "field": "month"
 },
 "y": {
  "title": "Revenue, £k",
  "zero": true
 },
 "y2": {
  "title": "Margin",
  "unit": "%"
 },
 "layers": [
  {
   "mark": "bar",
   "y": "revenue",
   "label": "Revenue, £k"
  },
  {
   "mark": "line",
   "y": "margin",
   "axis": "y2",
   "label": "Margin"
  }
 ]
}

Sparkline a trend in a word's space

Open in Chart Studio →

sparkline

Data RecipeSpec — { rows: {…}[]; x: { field; type? }; layers: { mark; y; axis?; series?; stack?; aggregate?; size?; smooth? }[]; y?; y2?; annotations?; axes?; observationsOf?: Record<series name, { bonds?: number[] (each strictly between 0 and 1); carried?: string[]; landed?: string[] }> } — see RECIPE_SCHEMA

The options Sparkline takes.
OptionKindDefaultTakes
titleTitletitle""text
contextContext: the unit and the periodtitle""text
figureHeadline figure, as writtentitle""text
legendSeries names and keylegendtruetoggle
stripesEvery series in its pattern, for printlegendfalsetoggle
gridGrid linesaxestruetoggle
valuesValue labelsvaluesfalsetoggle
roundingMoney: a half roundedvalues"half-away"half-away · half-even
negativesMoney: a negative writtenvalues"minus"minus · brackets
Sample data
{
 "rows": [
  {
   "t": 0,
   "v": 50
  },
  {
   "t": 1,
   "v": 53.56884751105428
  },
  {
   "t": 2,
   "v": 56.953106463250435
  },
  {
   "t": 3,
   "v": 59.97966512028
  },
  {
   "t": 4,
   "v": 62.49765181769475
  },
  {
   "t": 5,
   "v": 64.38781543226703
  },
  {
   "t": 6,
   "v": 65.56993983924865
  },
  {
   "t": 7,
   "v": 66.00783136248724
  },
  {
   "t": 8,
   "v": 65.71156912190818
  },
  {
   "t": 9,
   "v": 64.73687836265506
  },
  {
   "t": 10,
   "v": 63.18166572924748
  },
  {
   "t": 11,
   "v": 61.179931904627985
  },
  {
   "t": 12,
   "v": 58.89344009671841
  },
  {
   "t": 13,
   "v": 56.5016583856387
  },
  {
   "t": 14,
   "v": 54.19060126772456
  },
  {
   "t": 15,
   "v": 52.14126417509188
  },
  {
   "t": 16,
   "v": 50.51837005630487
  },
  {
   "t": 17,
   "v": 49.460127701256994
  },
  {
   "t": 18,
   "v": 49.06963858801883
  },
  {
   "t": 19,
   "v": 49.40848653229546
  },
  {
   "t": 20,
   "v": 50.492908704042335
  },
  {
   "t": 21,
   "v": 52.2927860788809
  },
  {
   "t": 22,
   "v": 54.7335160931553
  },
  {
   "t": 23,
   "v": 57.700651070008895
  },
  {
   "t": 24,
   "v": 61.04701402161289
  },
  {
   "t": 25,
   "v": 64.60184940142932
  },
  {
   "t": 26,
   "v": 68.18143985705379
  },
  {
   "t": 27,
   "v": 71.60052888536741
  },
  {
   "t": 28,
   "v": 74.68383918462547
  },
  {
   "t": 29,
   "v": 77.27697054813807
  },
  {
   "t": 30,
   "v": 79.25599972129686
  },
  {
   "t": 31,
   "v": 80.53518534933411
  },
  {
   "t": 32,
   "v": 81.07229895948058
  },
  {
   "t": 33,
   "v": 80.87125052287209
  },
  {
   "t": 34,
   "v": 79.98184535148188
  },
  {
   "t": 35,
   "v": 78.49668744505031
  },
  {
   "t": 36,
   "v": 76.54542182290108
  },
  {
   "t": 37,
   "v": 74.2866738245652
  },
  {
   "t": 38,
   "v": 71.8
…

Candlestick a live market

Open in Chart Studio →

candlestick

Data CandleData — { dates: string[]; candles: { o: number; h: number; l: number; c: number; v?: number }[]; unit?: string (an ISO 4217 code writes each price with its currency) }; observations?: { bonds?: number[] (each strictly between 0 and 1); carried?: string[]; landed?: string[] } (the one measure's); feed?: { t; k; every; per; interval; from; seed } (the chart's own stand-in market, which its live step trades; candles given are drawn as given, never stepped, whatever feed they carry); lastTrade?: number (the time of the last trade taken, ms); compare?: { label: string; closes: (number | null)[] }[] (other markets, four at most, one close to each date, null where it did not trade); events?: { date: string; label: string; text?: string }[] (each on one of the data's dates, flagged over its candle); drawings?: ({ kind: 'level'; price; label? } | { kind: 'trend' | 'fibonacci'; from: { date; price }; to: { date; price }; extend? })[]

The options Candlestick takes.
OptionKindDefaultTakes
titleTitletitle""text
contextContext: the unit and the periodtitle""text
figureHeadline figure, as writtentitle""text
xAxisX axisaxestruetoggle
xTitleX axis titleaxes""text
yAxisY axisaxestruetoggle
yTitleY axis titleaxes""text
gridGrid linesaxestruetoggle
legendSeries names and keylegendtruetoggle
stripesEvery series in its pattern, for printlegendfalsetoggle
styleStyleshape"candle"candle · ohlc · line · heikin · baseline
volumeVolume paneshapetruetoggle
smaMoving average (0 is off)shape200 to 50, step 1
bollingerBollinger bandsshapefalsetoggle
emaExponential average (0 is off)shape00 to 200, step 1
studyStudy paneshape"none"none · RSI · MACD
lastLast price markervaluestruetoggle
rangeRangeaxes"All"All · 1M · 3M · 6M · YTD · 1Y
tickPrice stepvalues"as given"as given · 1 · 0.5 · 0.25 · 0.1 · 0.05 · 0.01 · 0.005 · 0.001 · 0.0001
priceScalePrice scaleaxes"linear"linear · log
profileVolume by price, bins (0 is off)shape00 to 60, step 1
percentPercent change from the view's first close (always, where others are compared)axesfalsetoggle
navigatorNavigator: the whole span beneath, the view's window on itaxesfalsetoggle
fromView fromaxes00 to 1, step 0.001
toView toaxes10 to 1, step 0.001
Sample data
{
 "dates": [
  "2026-06-01",
  "2026-06-02",
  "2026-06-03",
  "2026-06-04",
  "2026-06-05",
  "2026-06-06",
  "2026-06-07",
  "2026-06-08",
  "2026-06-09",
  "2026-06-10",
  "2026-06-11",
  "2026-06-12",
  "2026-06-13",
  "2026-06-14",
  "2026-06-15",
  "2026-06-16",
  "2026-06-17",
  "2026-06-18",
  "2026-06-19",
  "2026-06-20",
  "2026-06-21",
  "2026-06-22",
  "2026-06-23",
  "2026-06-24",
  "2026-06-25",
  "2026-06-26",
  "2026-06-27",
  "2026-06-28",
  "2026-06-29",
  "2026-06-30",
  "2026-07-01",
  "2026-07-02",
  "2026-07-03",
  "2026-07-04",
  "2026-07-05",
  "2026-07-06",
  "2026-07-07",
  "2026-07-08",
  "2026-07-09",
  "2026-07-10",
  "2026-07-11",
  "2026-07-12",
  "2026-07-13",
  "2026-07-14",
  "2026-07-15",
  "2026-07-16",
  "2026-07-17",
  "2026-07-18",
  "2026-07-19",
  "2026-07-20",
  "2026-07-21",
  "2026-07-22",
  "2026-07-23",
  "2026-07-24",
  "2026-07-25",
  "2026-07-26",
  "2026-07-27",
  "2026-07-28",
  "2026-07-29",
  "2026-07-30",
  "2026-07-31",
  "2026-08-01",
  "2026-08-02",
  "2026-08-03",
  "2026-08-04",
  "2026-08-05",
  "2026-08-06",
  "2026-08-07",
  "2026-08-08",
  "2026-08-09",
  "2026-08-10",
  "2026-08-11",
  "2026-08-12",
  "2026-08-13",
  "2026-08-14",
  "2026-08-15",
  "2026-08-16",
  "2026-08-17",
  "2026-08-18",
  "2026-08-19",
  "2026-08-20",
  "2026-08-21",
  "2026-08-22",
  "2026-08-23",
  "2026-08-24",
  "2026-08-25",
  "2026-08-26",
  "2026-08-27",
  "2026-08-28",
  "2026-08-29"
 ],
 "candles": [
  {
   "o": 184,
   "h": 185.5,
   "l": 182.12,
   "c": 184.51,
   "v": 2075029
  },
  {
   "o": 184.51,
   "h": 185.67,
   "l": 182.63,
   "c": 183.23,
   "v": 2312304
  },
  {
   "o": 183.23,
   "h": 185.89,
   "l": 182.68,
   "c": 184.85,
   "v": 2858892
  },
  {
   "o": 184.85,
   "h": 186.65,
   "l": 184.42,
   "c": 185.97
…

Waterfall a bridge

Open in Chart Studio →

waterfall

Data WaterfallData — { steps: { label: string; value?: number (a total may leave it out, to be the steps' sum); total?: boolean }[]; before?: number or decimal text; unit?: string (an ISO 4217 code writes the amounts as money); unitOne?: string (its singular, after a value of one); label?: string (what the amounts are) }; observations?: { bonds?: number[] (each strictly between 0 and 1); carried?: string[]; landed?: string[] } (the one measure's)

The options Waterfall takes.
OptionKindDefaultTakes
titleTitletitle""text
contextContext: the unit and the periodtitle""text
figureHeadline figure, as writtentitle""text
xAxisX axisaxestruetoggle
xTitleX axis titleaxes""text
yAxisY axisaxestruetoggle
yTitleY axis titleaxes""text
gridGrid linesaxestruetoggle
legendSeries names and keylegendtruetoggle
stripesEvery series in its pattern, for printlegendfalsetoggle
valuesValue labelsvaluestruetoggle
roundingMoney: a half roundedvalues"half-away"half-away · half-even
negativesMoney: a negative writtenvalues"minus"minus · brackets
connectorsConnectorsshapetruetoggle
gapGap between stepsshape0.30 to 0.8, step 0.05
Sample data
{
 "steps": [
  {
   "label": "FY25",
   "value": 1200,
   "total": true
  },
  {
   "label": "Price",
   "value": 180
  },
  {
   "label": "Volume",
   "value": 240
  },
  {
   "label": "Mix",
   "value": -60
  },
  {
   "label": "FX",
   "value": -95
  },
  {
   "label": "Churn",
   "value": -130
  },
  {
   "label": "New",
   "value": 210
  },
  {
   "label": "FY26",
   "total": true
  }
 ]
}

Strip chart waveforms on their own baselines

Open in Chart Studio →

strip-chart

Data StripData — { rows: { name: string; waveform?: Waveform; segments?: { name: string; waveform: Waveform; from: number (s); to: number (s) }[]; group?: number; scale?: number (the value its row's height holds) }[]; groups?: string[]; events?: { at: number (s); words: string; duration?: number (s) }[] }

The options Strip chart takes.
OptionKindDefaultTakes
titleTitletitle""text
contextContext: the unit and the periodtitle""text
figureHeadline figure, as writtentitle""text
xAxisX axisaxestruetoggle
xTitleX axis titleaxes""text
gridGrid linesaxestruetoggle
fromView fromaxes00 to 1, step 0.001
toView toaxes10 to 1, step 0.001
rowsFromFirst row shown, a share of the rowsaxes00 to 1, step 0.001
rowScaleWhat a row holds (naught: its swing)axes00 to 1000000000, step 0.001
cursorCursoraxesfalsetoggle
cursorAtCursor at, a share of the recordaxes0.50 to 1, step 0.0001
polarityPolarityaxes"positive up"positive up · negative up
highPassHigh-pass (Hz; naught: none)values00 to 1000000, step 0.01
lowPassLow-pass (Hz; naught: none)values00 to 1000000, step 0.01
notchNotch (Hz; naught: none)values00 to 1000000, step 0.01
speedSpeed (mm/s; naught: no physical scale)axes00 to 1000, step 0.5
sensitivityWhat a millimetre holds, in the rows' unit (naught: by the scale)axes00 to 1000000000, step 0.001
pxPerMmThe screen's pixels a millimetre (naught: the view fitted across)axes00 to 100, step 0.01
clockTimeClock time along the foot, where the record keeps itaxesfalsetoggle
gridLinesGrid lines: at the ticks, each second, or the mm grid at a physical scaleaxes"ticks"ticks · seconds · mm
baselineWhat each row's baseline stands foraxes"its mean"its mean · naught
pulseEach row opens on its 1 mV calibration pulse, at a physical scale in voltsaxesfalsetoggle
Sample data
{
 "rows": [
  {
   "name": "S01 X",
   "group": 0,
   "waveform": {
    "name": "S01 X",
    "unit": "g",
    "rate": 25600,
    "samples": {
     "0": -0.17721600830554962,
     "1": -0.22327156364917755,
     "2": -0.29507315158843994,
     "3": -0.2906414568424225,
     "4": -0.2305530309677124,
     "5": -0.2616919279098511,
     "6": -0.26903462409973145,
     "7": -0.20726293325424194,
     "8": -0.19451023638248444,
     "9": -0.18634139001369476,
     "10": -0.18462729454040527,
     "11": -0.15288399159908295,
     "12": -0.07616687566041946,
     "13": -0.06383777409791946,
     "14": -0.13708557188510895,
     "15": -0.04215055704116821,
     "16": -0.013960137031972408,
     "17": -0.04458238556981087,
     "18": -0.07096408307552338,
     "19": 0.00199746317230165,
     "20": -0.045782074332237244,
     "21": 0.005807149689644575,
     "22": -0.017327139154076576,
     "23": -0.07782697677612305,
     "24": -0.010121600702404976,
     "25": -0.04407930746674538,
     "26": -0.12492485344409943,
     "27": -0.08435998857021332,
     "28": -0.06213633343577385,
     "29": -0.08109666407108307,
     "30": -0.13760200142860413,
     "31": -0.2261267602443695,
     "32": -0.21070104837417603,
     "33": -0.1458219736814499,
     "34": -0.18359492719173431,
     "35": -0.21295352280139923,
     "36": -0.2081739455461502,
     "37": -0.14698296785354614,
     "38": -0.2057182788848877,
     "39": -0.18197837471961975,
     "40": -0.20647870004177094,
     "41": -0.23937642574310303,
     "42": -0.18228787183761597,
     "43": -0.13968124985694885,
     "44": -0.14381077885627747,
     "45": -0.05290418490767479,
     "46": -0.07050599902868271,
     "47": -0.06534361094236374,
     "48": -0.012105447240173817,
     "49": -0.04309806972742081,
     "50": 0.0358445
…

EEG brain waves in a montage

Open in Chart Studio →

eeg

Data EegData — { electrodes: Waveform[] (a record's electrodes, held, named as the recorder labels them: Fp1, EEG FP1-REF); events?: { at: number (s); words: string; duration?: number (s) }[]; montage?: { name: string; chains: { name: string; rows: [string, string][] (an electrode less another, or less "Avg") }[] } (the host's own, in place of the one named) }

The options EEG takes.
OptionKindDefaultTakes
titleTitletitle""text
contextContext: the unit and the periodtitle""text
figureHeadline figure, as writtentitle""text
xAxisX axisaxestruetoggle
xTitleX axis titleaxes""text
gridGrid linesaxestruetoggle
fromView fromaxes00 to 1, step 0.001
toView toaxes10 to 1, step 0.001
montageMontage (a host's own, given with the data, in its place)shape"double banana"double banana · transverse · average
speedSpeed (mm/s)axes305 to 120, step 5
sensitivitySensitivity (µV/mm)axes70.5 to 200, step 0.5
highPassHigh-pass (Hz; naught: none)values10 to 1000000, step 0.01
lowPassLow-pass (Hz; naught: none)values700 to 1000000, step 0.01
notchNotch (Hz; naught: none)values500 to 1000000, step 0.01
polarityPolarityaxes"negative up"positive up · negative up
clockTimeClock time along the foot, where the record keeps itaxestruetoggle
pxPerMmThe screen's pixels a millimetre (naught: the view fitted across)axes00 to 100, step 0.01
rowsFromFirst row shown, a share of the rowsaxes00 to 1, step 0.001
cursorCursoraxesfalsetoggle
cursorAtCursor at, a share of the recordaxes0.50 to 1, step 0.0001
Sample data
{
 "electrodes": [
  {
   "name": "Fp1",
   "unit": "uV",
   "rate": 256,
   "scale": 0.1,
   "clock": "2026-03-02T14:02:10",
   "samples": {
    "0": 1928,
    "1": 1871,
    "2": 1903,
    "3": 1966,
    "4": 1976,
    "5": 1916,
    "6": 1850,
    "7": 1842,
    "8": 1914,
    "9": 1937,
    "10": 1876,
    "11": 1801,
    "12": 1799,
    "13": 1881,
    "14": 1911,
    "15": 1871,
    "16": 1827,
    "17": 1817,
    "18": 1874,
    "19": 1924,
    "20": 1876,
    "21": 1799,
    "22": 1770,
    "23": 1808,
    "24": 1867,
    "25": 1844,
    "26": 1799,
    "27": 1794,
    "28": 1863,
    "29": 1933,
    "30": 1958,
    "31": 1912,
    "32": 1888,
    "33": 1931,
    "34": 1985,
    "35": 1972,
    "36": 1877,
    "37": 1838,
    "38": 1889,
    "39": 1962,
    "40": 1978,
    "41": 1950,
    "42": 1871,
    "43": 1899,
    "44": 1957,
    "45": 1983,
    "46": 1892,
    "47": 1820,
    "48": 1813,
    "49": 1870,
    "50": 1902,
    "51": 1851,
    "52": 1791,
    "53": 1791,
    "54": 1859,
    "55": 1886,
    "56": 1839,
    "57": 1765,
    "58": 1767,
    "59": 1839,
    "60": 1881,
    "61": 1867,
    "62": 1802,
    "63": 1804,
    "64": 1881,
    "65": 1942,
    "66": 1895,
    "67": 1826,
    "68": 1788,
    "69": 1830,
    "70": 1877,
    "71": 1843,
    "72": 1780,
    "73": 1751,
    "74": 1809,
    "75": 1881,
    "76": 1890,
    "77": 1838,
    "78": 1818,
    "79": 1862,
    "80": 1941,
    "81": 1967,
    "82": 1902,
    "83": 1869,
    "84": 1898,
    "85": 1944,
    "86": 1952,
    "87": 1884,
    "88": 1825,
    "89": 1839,
    "90": 1884,
    "91": 1910,
    "92": 1859,
    "93": 1800,
    "94": 1835,
    "95": 1907,
    "96": 1937,
    "97": 1912,
    "98": 1845,
    "99": 1847,
    "100": 1905,
    "101": 1928,
    "102": 1871,
    "103": 1794,

…

ECG the heart's twelve leads

Open in Chart Studio →

ecg

Data EcgData — { leads: Waveform[] (a record's leads, held, named I, II, III, aVR, aVL, aVF, V1 to V6 as the recorder labels them); keys?: string[][] (each lead's samples' row keys, as their table names them, a list to each lead); measures?: { name: string; value: string }[] (the host's: Rate, PR, QRS, QT, QTc, Axis); calipers?: { name: string; from: number (s); to: number (s) }[]; marks?: { lead: string; at: number (s); words?: string }[] }

The options ECG takes.
OptionKindDefaultTakes
titleTitletitle""text
contextContext: the unit and the periodtitle""text
figureHeadline figure, as writtentitle""text
xAxisX axisaxestruetoggle
xTitleX axis titleaxes""text
gridGrid linesaxestruetoggle
fromView fromaxes00 to 1, step 0.001
toView toaxes10 to 1, step 0.001
layoutLayoutshape"3×4 with a rhythm strip"3×4 with a rhythm strip · 6×2 · 12×1 · one lead
leadThe lead laid out aloneshape"II"I · II · III · aVR · aVL · aVF · V1 · V2 · V3 · V4 · V5 · V6
speedSpeed (mm/s)axes255 to 100, step 5
gainGain (mm/mV)axes101 to 40, step 1
pxPerMmThe screen's pixels a millimetre (naught: the view fitted across)axes00 to 100, step 0.01
cursorCursoraxesfalsetoggle
cursorAtCursor at, a share of the recordaxes0.50 to 1, step 0.0001
Sample data
{
 "leads": [
  {
   "name": "I",
   "unit": "mV",
   "rate": 500,
   "scale": 0.001,
   "samples": {
    "0": 13,
    "1": 14,
    "2": 15,
    "3": 16,
    "4": 15,
    "5": 13,
    "6": 10,
    "7": 8,
    "8": 8,
    "9": 10,
    "10": 14,
    "11": 17,
    "12": 18,
    "13": 17,
    "14": 15,
    "15": 13,
    "16": 13,
    "17": 13,
    "18": 15,
    "19": 15,
    "20": 13,
    "21": 11,
    "22": 9,
    "23": 9,
    "24": 11,
    "25": 15,
    "26": 18,
    "27": 20,
    "28": 19,
    "29": 16,
    "30": 13,
    "31": 12,
    "32": 12,
    "33": 13,
    "34": 14,
    "35": 14,
    "36": 13,
    "37": 12,
    "38": 11,
    "39": 13,
    "40": 16,
    "41": 19,
    "42": 21,
    "43": 20,
    "44": 17,
    "45": 13,
    "46": 11,
    "47": 11,
    "48": 12,
    "49": 14,
    "50": 16,
    "51": 16,
    "52": 15,
    "53": 14,
    "54": 15,
    "55": 18,
    "56": 20,
    "57": 22,
    "58": 22,
    "59": 20,
    "60": 18,
    "61": 16,
    "62": 17,
    "63": 20,
    "64": 26,
    "65": 30,
    "66": 34,
    "67": 37,
    "68": 40,
    "69": 43,
    "70": 49,
    "71": 56,
    "72": 62,
    "73": 68,
    "74": 71,
    "75": 74,
    "76": 77,
    "77": 83,
    "78": 90,
    "79": 99,
    "80": 107,
    "81": 112,
    "82": 115,
    "83": 116,
    "84": 116,
    "85": 116,
    "86": 116,
    "87": 116,
    "88": 114,
    "89": 109,
    "90": 102,
    "91": 95,
    "92": 89,
    "93": 85,
    "94": 83,
    "95": 81,
    "96": 77,
    "97": 70,
    "98": 62,
    "99": 54,
    "100": 47,
    "101": 43,
    "102": 40,
    "103": 37,
    "104": 33,
    "105": 29,
    "106": 25,
    "107": 22,
    "108": 21,
    "109": 23,
    "110": 25,
    "111": 26,
    "112": 25,
    "113": 22,
    "114": 18,
    "115": 15,
    "116": 14,
    "117": 15,
    "118": 17,
    "119": 18,
 
…

Holter a day of beats and a moment of them

Open in Chart Studio →

holter

Data HolterData — { beats: number[] (s from the record's start, rising); keys?: string[] (each beat's row key, as its table names it, one to each beat); classes?: string[] (each beat's, as the host classes it); normal?: string (a beat in place's class, "N"); periods?: { from: number (s); to: number (s); words: string }[]; waveforms?: Waveform[] (the channels, held, for the moment); clock?: string (ISO 8601); duration?: number (s); recordedTo?: number (s from the start recorded so far, while the record is being made) }

The options Holter takes.
OptionKindDefaultTakes
titleTitletitle""text
contextContext: the unit and the periodtitle""text
figureHeadline figure, as writtentitle""text
xAxisX axisaxestruetoggle
yAxisY axisaxestruetoggle
gridGrid linesaxestruetoggle
momentThe moment, a share of the recordaxes0.50 to 1, step 0.0001
binA bin, in minutesaxes51 to 60, step 1
speedThe moment's speed (mm/s)axes255 to 100, step 5
gainThe moment's gain (mm/mV)axes101 to 40, step 1
pxPerMmThe screen's pixels a millimetre (naught: the moment fitted across)axes00 to 100, step 0.01
Sample data
{
 "beats": {
  "0": 0.4,
  "1": 1.2025769413355718,
  "2": 2.002225209990751,
  "3": 2.826022215841819,
  "4": 3.64980870955753,
  "5": 4.451927696383764,
  "6": 5.270762493783403,
  "7": 6.068972823325113,
  "8": 6.861972516798268,
  "9": 7.665246405077101,
  "10": 8.459721247264554,
  "11": 9.252018711497286,
  "12": 10.063687388808999,
  "13": 10.872665413900249,
  "14": 11.679298256564081,
  "15": 12.493274594741681,
  "16": 13.292274965120058,
  "17": 14.106361983969077,
  "18": 14.903823058549017,
  "19": 15.722340106578443,
  "20": 16.541819345451444,
  "21": 17.347639139120922,
  "22": 18.14152098420789,
  "23": 18.953892728025604,
  "24": 19.776169160463375,
  "25": 20.59810444278173,
  "26": 21.404738793226763,
  "27": 22.20933485681086,
  "28": 23.02684252770636,
  "29": 23.82395304271628,
  "30": 24.631360380602978,
  "31": 25.423587461368257,
  "32": 26.230336392674825,
  "33": 27.037453838460678,
  "34": 27.859110238526267,
  "35": 28.68203104948363,
  "36": 29.487625463888623,
  "37": 30.303953405469574,
  "38": 31.098973468138166,
  "39": 31.922596285046563,
  "40": 32.72343992659917,
  "41": 33.53856882249256,
  "42": 34.331634905791105,
  "43": 35.126776113467685,
  "44": 35.946162835254995,
  "45": 36.75930698574664,
  "46": 37.572925180156425,
  "47": 38.37108091424888,
  "48": 39.18750737843572,
  "49": 40.004460338715965,
  "50": 40.798978876052594,
  "51": 41.596614912644796,
  "52": 42.411321099444926,
  "53": 43.22597836895187,
  "54": 44.025429553216675,
  "55": 44.847039661963855,
  "56": 45.639841707195565,
  "57": 46.43454021961299,
  "58": 47.25532147385127,
  "59": 48.0619669880732,
  "60": 48.87006160914552,
  "61": 49.68992839810092,
  "62": 50.513530947087276,
  "63": 51.33428995885195,
  "64": 52.14250833500673,
  "65": 52.95036194682
…

Chromatogram a separation's detector response against retention time, its peaks named and their areas

Open in Chart Studio →

chromatogram

Data ChromatogramData — { waveform?: Waveform ({ name; unit?; rate (samples a second); start? (s); scale?; offset?; samples }, the time in seconds from its start); points?: { name; x: { quantity: "time"; unit: "s" or "min" }; y: { quantity; unit }; values: (number | null)[]; xs: number[] (rising) } (one of the two); peaks?: { name?: string; apex?: number (min); from?: number; to?: number (the limits, min, both or neither); integrate?: boolean (shade and state its area; limits needed) }[]; baseline?: { at: number[] (min, rising, two or more); signal: number[] } }

The options Chromatogram takes.
OptionKindDefaultTakes
titleTitletitle""text
contextContext: the unit and the periodtitle""text
figureHeadline figure, as writtentitle""text
xAxisX axisaxestruetoggle
xTitleX axis titleaxes""text
yAxisY axisaxestruetoggle
yTitleY axis titleaxes""text
gridGrid linesaxestruetoggle
detectorDetector, said in the context linetitle""text
integrateShade the peaks asked integrated, and state their areasshapetruetoggle
shareState each named peak's share of the areavaluestruetoggle
fromView fromaxes00 to 1, step 0.001
toView toaxes10 to 1, step 0.001
Sample data
{
 "waveform": {
  "name": "UV 254 nm",
  "unit": "mAU",
  "rate": 5,
  "samples": {
   "0": 3.4599125507581268,
   "1": 3.5399825708739456,
   "2": 3.468165605649823,
   "3": 3.5081313247972457,
   "4": 3.5706961062089575,
   "5": 3.4050554782622426,
   "6": 3.5782815455003214,
   "7": 3.282007703466853,
   "8": 3.526459171496009,
   "9": 4.008137314416957,
   "10": 3.140500299864316,
   "11": 3.280141388914808,
   "12": 3.291393109296562,
   "13": 3.53424719804683,
   "14": 3.5540879977481867,
   "15": 3.726456915632493,
   "16": 3.082353363407757,
   "17": 3.9295333340871546,
   "18": 3.795084104000877,
   "19": 3.742466683110277,
   "20": 3.1096257387932362,
   "21": 3.4181200948336357,
   "22": 3.493882201535279,
   "23": 3.3506913211225275,
   "24": 3.640638375167763,
   "25": 3.776721499220109,
   "26": 3.7132147485517804,
   "27": 3.5570570871357496,
   "28": 3.7761940886673777,
   "29": 3.5223814590187827,
   "30": 3.5683405322886297,
   "31": 3.8368385159818414,
   "32": 3.3950512606951944,
   "33": 3.7028925472619485,
   "34": 3.452070972441059,
   "35": 3.606118916166011,
   "36": 3.4637060235083283,
   "37": 3.55811986000103,
   "38": 3.669115618864972,
   "39": 4.088844039957195,
   "40": 3.6312620592640665,
   "41": 3.218127089308254,
   "42": 3.396928188433431,
   "43": 3.5634129785123374,
   "44": 3.7488110676871464,
   "45": 3.8608037640063464,
   "46": 3.687637250012987,
   "47": 3.81258312662716,
   "48": 3.3524324037165614,
   "49": 3.840370069748935,
   "50": 3.37283278687605,
   "51": 3.524575210543274,
   "52": 3.8660555329245425,
   "53": 3.14952253302195,
   "54": 3.752106999079936,
   "55": 3.635598543703916,
   "56": 3.5560108540544495,
   "57": 3.634602024747514,
   "58": 3.5515088036117803,
   "59": 3.553889641134978,
   "60": 3.51171886095
…

Stacked NMR the NMR spectra of several samples offset up one chemical-shift axis, each multiplet named with its integral

Open in Chart Studio →

stacked-nmr

Data StackedNmrData — { samples: { name: string; spectrum: { name: string; x: { quantity: "chemical shift"; unit: "ppm" }; y: { quantity: string; unit: string }; values: (number | null)[]; grid?: { first: number; step: number }; xs?: number[] } (intensity at shifts in ppm, one of grid and xs); protons?: number (the sample's total, above naught); baseline?: number (the level its integrals are measured from, naught if left out); multiplets?: { from: number; to: number (its range in ppm, from below to); multiplicity: string ("s", "d", "t", "q", "m", "br s"); assignment?: string }[] }[] (twelve at most, bottom to top); nucleus?: string ("¹H"); frequency?: number (MHz); solvent?: string; integralUnit?: string (the integrals' unit where the nucleus is not ¹H); measures?: { name: string; value: string }[] }

The options Stacked NMR takes.
OptionKindDefaultTakes
titleTitletitle""text
contextContext: the unit and the periodtitle""text
figureHeadline figure, as writtentitle""text
xAxisX axisaxestruetoggle
xTitleX axis titleaxes""text
gridGrid linesaxestruetoggle
legendSeries names and keylegendtruetoggle
multipletsMultiplets named over their tallest linesvaluestruetoggle
integralsIntegrals under each samplevaluestruetoggle
scaleEach sample to its own tallest line, or all to the one tallestshape"own"own · common
pitchThe pitch between samples, as a share of the room each holdsshape10.2 to 1, step 0.01
fromView fromaxes00 to 1, step 0.001
toView toaxes10 to 1, step 0.001
Sample data
{
 "samples": [
  {
   "name": "Ethanol",
   "spectrum": {
    "name": "Ethanol",
    "x": {
     "quantity": "chemical shift",
     "unit": "ppm"
    },
    "y": {
     "quantity": "intensity",
     "unit": ""
    },
    "values": [
     -0.037580720158438226,
     0.14457307921268703,
     0.12839497620709092,
     -0.11063445904522205,
     0.1336556086137279,
     0.2268445374085222,
     -0.07549951238899139,
     -0.25796896509301165,
     0.17791313241415335,
     -0.35769505352016207,
     -0.15143326374649893,
     -0.2607721756332848,
     "… 16789 more"
    ],
    "grid": {
     "first": 8.7,
     "step": -0.0005
    }
   },
   "protons": 6,
   "multiplets": [
    {
     "from": 3.47,
     "to": 3.97,
     "multiplicity": "q",
     "assignment": "CH2"
    },
    {
     "from": 1.6999999999999997,
     "to": 2.9,
     "multiplicity": "br s",
     "assignment": "OH"
    },
    {
     "from": 1,
     "to": 1.5,
     "multiplicity": "t",
     "assignment": "CH3"
    }
   ]
  },
  {
   "name": "Ethyl acetate",
   "spectrum": {
    "name": "Ethyl acetate",
    "x": {
     "quantity": "chemical shift",
     "unit": "ppm"
    },
    "y": {
     "quantity": "intensity",
     "unit": ""
    },
    "values": [
     0.8660658340554502,
     -0.4202697410181397,
     0.40375078479594995,
     0.03747974947396017,
     -1.185090777856145,
     0.2804621015214953,
     1.0333484580306336,
     -0.5357378837083329,
     -0.7855166551096956,
     0.07684588948623414,
     -1.2113205710938282,
     0.5688757902897348,
     "… 16789 more"
    ],
    "grid": {
     "first": 8.7,
     "step": -0.0005
    }
   },
   "protons": 8,
   "multiplets": [
    {
     "from": 3.87,
     "to": 4.37,
     "multiplicity": "q",
     "assignment": "OCH2"
    },
    {
     "from": 1.799999999999
…

Spectrum a spectrum in its own x, a wavelength, a wavenumber or a shift, its bands named

Open in Chart Studio →

spectrum

Data SpectrumData — { spectrum: { name: string; x: { quantity: string ("wavenumber", "Raman shift", "wavelength"); unit: string }; y: { quantity: "transmittance", "absorbance", "counts" or "intensity"; unit: string }; values: (number | null)[] (null where a point is missing or off scale); grid?: { first: number; step: number } (x steady, the step negative where x falls); xs?: number[] (x at each value, strictly rising or falling) (one of grid and xs) }; bands?: { at: number (its x); name?: string (the group that gives it) }[] }

The options Spectrum takes.
OptionKindDefaultTakes
titleTitletitle""text
contextContext: the unit and the periodtitle""text
figureHeadline figure, as writtentitle""text
xAxisX axisaxestruetoggle
xTitleX axis titleaxes""text
yAxisY axisaxestruetoggle
yTitleY axis titleaxes""text
gridGrid linesaxestruetoggle
directionThe x's direction, left to rightaxes"rising"rising · falling
calloutsBands named in rows over the plot, else over their tipsvaluestruetoggle
fromView fromaxes00 to 1, step 0.001
toView toaxes10 to 1, step 0.001
Sample data
{
 "spectrum": {
  "name": "Polystyrene film",
  "x": {
   "quantity": "wavelength",
   "unit": "µm"
  },
  "y": {
   "quantity": "transmittance",
   "unit": "%"
  },
  "values": [
   96.93111896613418,
   97.09404596999241,
   96.94002047304294,
   96.82851242930217,
   97.13253046222114,
   96.93519064896566,
   96.86693274326664,
   96.95894290324249,
   96.96124744485766,
   97.01146112100585,
   96.86985797248073,
   96.98630670644876,
   "… 11239 more"
  ],
  "grid": {
   "first": 2.5,
   "step": 0.002
  }
 },
 "bands": [
  {
   "at": 3.305,
   "name": "Aromatic C–H"
  },
  {
   "at": 6.246,
   "name": "Ring C=C"
  },
  {
   "at": 9.728,
   "name": "Ring C–H in plane"
  },
  {
   "at": 14.327,
   "name": "Ring bend"
  }
 ]
}

IR spectrum an infrared spectrum, the wavenumber falling from 4,000 to 400 cm-¹, a band a dip

Open in Chart Studio →

ir-spectrum

Data SpectrumData — { spectrum: { name: string; x: { quantity: string ("wavenumber", "Raman shift", "wavelength"); unit: string }; y: { quantity: "transmittance", "absorbance", "counts" or "intensity"; unit: string }; values: (number | null)[] (null where a point is missing or off scale); grid?: { first: number; step: number } (x steady, the step negative where x falls); xs?: number[] (x at each value, strictly rising or falling) (one of grid and xs) }; bands?: { at: number (its x); name?: string (the group that gives it) }[] }

The options IR spectrum takes.
OptionKindDefaultTakes
titleTitletitle""text
contextContext: the unit and the periodtitle""text
figureHeadline figure, as writtentitle""text
xAxisX axisaxestruetoggle
xTitleX axis titleaxes""text
yAxisY axisaxestruetoggle
yTitleY axis titleaxes""text
gridGrid linesaxestruetoggle
directionThe x's direction, left to rightaxes"falling"rising · falling
calloutsBands named in rows over the plot, else over their tipsvaluestruetoggle
fromView fromaxes00 to 1, step 0.001
toView toaxes10 to 1, step 0.001
Sample data
{
 "spectrum": {
  "name": "Polystyrene film",
  "x": {
   "quantity": "wavenumber",
   "unit": "cm-¹"
  },
  "y": {
   "quantity": "transmittance",
   "unit": "%"
  },
  "values": [
   97.00653283894609,
   96.92407339738475,
   96.99318163671259,
   96.82197713472354,
   97.02330644467303,
   97.00990351259549,
   96.97799209190723,
   96.9554706168712,
   96.9700980183772,
   96.93904838925005,
   96.87166715477078,
   96.94021704206986,
   "… 3589 more"
  ],
  "grid": {
   "first": 4000,
   "step": -1
  }
 },
 "bands": [
  {
   "at": 3026,
   "name": "Aromatic C–H"
  },
  {
   "at": 2920,
   "name": "CH2 stretch"
  },
  {
   "at": 1601,
   "name": "Ring C=C"
  },
  {
   "at": 1028,
   "name": "Ring C–H in plane"
  },
  {
   "at": 756,
   "name": "Ring C–H out of plane"
  },
  {
   "at": 698,
   "name": "Ring bend"
  }
 ]
}

Raman spectrum a Raman spectrum, counts against a shift rising, its bands named

Open in Chart Studio →

raman-spectrum

Data SpectrumData — { spectrum: { name: string; x: { quantity: string ("wavenumber", "Raman shift", "wavelength"); unit: string }; y: { quantity: "transmittance", "absorbance", "counts" or "intensity"; unit: string }; values: (number | null)[] (null where a point is missing or off scale); grid?: { first: number; step: number } (x steady, the step negative where x falls); xs?: number[] (x at each value, strictly rising or falling) (one of grid and xs) }; bands?: { at: number (its x); name?: string (the group that gives it) }[] }

The options Raman spectrum takes.
OptionKindDefaultTakes
titleTitletitle""text
contextContext: the unit and the periodtitle""text
figureHeadline figure, as writtentitle""text
xAxisX axisaxestruetoggle
xTitleX axis titleaxes""text
yAxisY axisaxestruetoggle
yTitleY axis titleaxes""text
gridGrid linesaxestruetoggle
laserThe laser's wavelength, as writtentitle""text
directionThe x's direction, left to rightaxes"rising"rising · falling
calloutsBands named in rows over the plot, else over their tipsvaluestruetoggle
fromView fromaxes00 to 1, step 0.001
toView toaxes10 to 1, step 0.001
Sample data
{
 "spectrum": {
  "name": "Polystyrene",
  "x": {
   "quantity": "Raman shift",
   "unit": "cm-¹"
  },
  "y": {
   "quantity": "intensity",
   "unit": "counts"
  },
  "values": [
   964.7532555165513,
   961.7864363801865,
   985.2227909503553,
   975.5913743396545,
   947.3240355457148,
   946.6820614348611,
   965.016938734513,
   996.8011702645105,
   944.9761969355261,
   971.1688915070451,
   1007.916151160357,
   971.3131211823335,
   "… 2989 more"
  ],
  "grid": {
   "first": 200,
   "step": 1
  }
 },
 "bands": [
  {
   "at": 621,
   "name": "Ring deformation"
  },
  {
   "at": 1001,
   "name": "Ring breathing"
  },
  {
   "at": 1602,
   "name": "Ring C=C"
  },
  {
   "at": 2904,
   "name": "CH2 stretch"
  },
  {
   "at": 3054,
   "name": "Aromatic C–H"
  }
 ]
}

UV-Vis spectrum a UV-Vis spectrum, absorbance against a wavelength in nm rising, its maxima named

Open in Chart Studio →

uv-vis-spectrum

Data SpectrumData — { spectrum: { name: string; x: { quantity: string ("wavenumber", "Raman shift", "wavelength"); unit: string }; y: { quantity: "transmittance", "absorbance", "counts" or "intensity"; unit: string }; values: (number | null)[] (null where a point is missing or off scale); grid?: { first: number; step: number } (x steady, the step negative where x falls); xs?: number[] (x at each value, strictly rising or falling) (one of grid and xs) }; bands?: { at: number (its x); name?: string (the group that gives it) }[] }

The options UV-Vis spectrum takes.
OptionKindDefaultTakes
titleTitletitle""text
contextContext: the unit and the periodtitle""text
figureHeadline figure, as writtentitle""text
xAxisX axisaxestruetoggle
xTitleX axis titleaxes""text
yAxisY axisaxestruetoggle
yTitleY axis titleaxes""text
gridGrid linesaxestruetoggle
concentrationThe concentration, as writtentitle""text
pathThe path length, as writtentitle""text
directionThe x's direction, left to rightaxes"rising"rising · falling
calloutsBands named in rows over the plot, else over their tipsvaluesfalsetoggle
fromView fromaxes00 to 1, step 0.001
toView toaxes10 to 1, step 0.001
Sample data
{
 "spectrum": {
  "name": "Riboflavin",
  "x": {
   "quantity": "wavelength",
   "unit": "nm"
  },
  "y": {
   "quantity": "absorbance",
   "unit": "AU"
  },
  "values": [
   0.04765818920143068,
   0.06066409594190122,
   0.07618500550147593,
   0.08999714759762481,
   0.11296488228199036,
   0.1340641896256095,
   0.1578804905446193,
   0.1839535249568775,
   0.2134918602092911,
   0.24802000293910179,
   0.2807828842421609,
   0.3197370776223534,
   "… 389 more"
  ],
  "grid": {
   "first": 200,
   "step": 1
  }
 },
 "bands": [
  {
   "at": 223
  },
  {
   "at": 268
  },
  {
   "at": 373
  },
  {
   "at": 443
  }
 ]
}

Spectrogram a sound's level by time and frequency, each cell inked by its level in dB

Open in Chart Studio →

spectrogram

Data SpectrogramData — { waveform?: Waveform ({ name; unit?; rate (samples a second); start? (s); scale?; offset?; samples, or byRange; gaps? }); analysed?: { at: number[] (each spectrum's time, s, rising); spectra: { name; x: { quantity: "frequency"; unit: "Hz" }; y: { quantity; unit: "dB" }; values: (number | null)[]; grid or xs }[] (one frequency grid, rising); window?: string } (one of the two); reference: { rms: number; words: string } or { fullScale: number; words? } (what the dB are against); top?: number (the level at the top of the ramp, dB) }

The options Spectrogram takes.
OptionKindDefaultTakes
titleTitletitle""text
contextContext: the unit and the periodtitle""text
figureHeadline figure, as writtentitle""text
xAxisX axisaxestruetoggle
xTitleX axis titleaxes""text
yAxisY axisaxestruetoggle
yTitleY axis titleaxes""text
windowNameWindowshape"hann"hann · hamming · blackman-harris
windowLengthWindow length, in samplesshape102416 to 16384, step 1
overlapOverlap, a share of the windowshape0.8750 to 0.99, step 0.005
dynamicRangeDynamic range, in dB under the topshape6010 to 120, step 1
frequencyScaleFrequency scaleaxes"linear"linear · log
frequencyFloorLog scale's floor, in Hzaxes200 to 1000000, step 1
frequencyToFrequency to, in Hz (0, the Nyquist frequency)axes00 to 1000000000, step 1
fromView fromaxes00 to 1, step 0.001
toView toaxes10 to 1, step 0.001
Sample data
{
 "waveform": {
  "name": "Spoken syllable",
  "rate": 16000,
  "samples": {
   "0": 0.0007742241427017804,
   "1": 0.00006704522529435983,
   "2": 0.00027524282952845155,
   "3": -0.0005390913076340096,
   "4": -0.0006167327529536142,
   "5": 0.00023141241353688335,
   "6": 0.00017338385058661396,
   "7": -0.0001278353048511037,
   "8": 0.00045320457597857253,
   "9": 0.00007904457347220516,
   "10": -0.00008235964762077514,
   "11": -0.00018699705129466548,
   "12": 0.0008928087576748521,
   "13": -0.0006069358657911281,
   "14": -0.0005336153909007401,
   "15": 0.00033082700991005846,
   "16": -0.00033083980842657425,
   "17": 0.0005439263906891554,
   "18": -0.0003833685910786354,
   "19": -0.000914673880893571,
   "20": -0.00037187606307660887,
   "21": 0.0006031575219972019,
   "22": 0.0005548961492779682,
   "23": -0.0004195851005417315,
   "24": 0.0009110491498970573,
   "25": 0.0004379768970361057,
   "26": 0.00006370494923901217,
   "27": 0.00015006744801050013,
   "28": 0.000641390858043092,
   "29": -0.0003649609454822856,
   "30": -0.0014202904861608232,
   "31": 0.0003477841915928197,
   "32": -0.0003084604060568763,
   "33": -0.00034269082728177725,
   "34": -0.0003907825335685449,
   "35": 0.0003365589621437476,
   "36": 0.0001276518349897546,
   "37": 0.000006739304346840878,
   "38": 0.000488960113362206,
   "39": 0.0000069571854291675165,
   "40": -0.0006151397258980344,
   "41": -0.00009332078060601661,
   "42": -0.0008315732912334575,
   "43": 0.000049278097845781565,
   "44": -0.0003964323446046539,
   "45": -0.00043941649629961326,
   "46": 0.0005753869110227063,
   "47": 0.0005769921499236135,
   "48": -0.000565527906628452,
   "49": 0.00020552776080463565,
   "50": 0.0005486116209306354,
   "51": -0.0009902259879362592,
   "52": 0.0003152358707
…

Spectrum waterfall spectra one behind another at their speeds or times, the nearer hiding the farther

Open in Chart Studio →

spectrum-waterfall

Data SpectrumWaterfallData — { spectra: { name; x: { quantity: "frequency"; unit: "Hz" }; y: { quantity; unit: "dB" }; values: number[] (a level at every frequency); grid or xs }[] (two or more, on one frequency grid, rising); run: { quantity: string ("speed", "time"); unit: string ("rpm", "s"); values: number[] (one to each spectrum, rising or falling) }; reference: { rms: number; words: string } or { fullScale: number; words? } (what the dB are against); window?: { name: string; length: number; averages: number; rate?: number } (what made each spectrum); floor?: number (the level a line stands on its baseline at, dB; the least level where left out); orders?: number[] (each an order of a run in rpm, drawn dashed along its ridge) }

The options Spectrum waterfall takes.
OptionKindDefaultTakes
titleTitletitle""text
contextContext: the unit and the periodtitle""text
figureHeadline figure, as writtentitle""text
xAxisX axisaxestruetoggle
xTitleX axis titleaxes""text
nearestThe end of the run nearestshape"first"first · last
offsetUpEach spectrum up from the one before, in pxshape31 to 20, step 0.5
offsetAcrossEach spectrum across from the one before, in pxshape10 to 10, step 0.5
frequencyScaleFrequency scaleaxes"linear"linear · log
scaleBarThe scale baraxestruetoggle
Sample data
{
 "spectra": [
  {
   "name": "1000 rpm",
   "x": {
    "quantity": "frequency",
    "unit": "Hz"
   },
   "y": {
    "quantity": "level",
    "unit": "dB"
   },
   "values": [
    34.257765757585624,
    36.53232533647095,
    37.66540249149835,
    38.953312232082006,
    43.22274649328947,
    40.94231484093161,
    38.40906366095122,
    50.083451148245366,
    59.705431842444916,
    57.93710653539093,
    41.88485015153357,
    37.59025380994408,
    "… 139 more"
   ],
   "grid": {
    "first": 0,
    "step": 4
   }
  },
  {
   "name": "1100 rpm",
   "x": {
    "quantity": "frequency",
    "unit": "Hz"
   },
   "y": {
    "quantity": "level",
    "unit": "dB"
   },
   "values": [
    39.68458652622847,
    37.329619562218895,
    35.4862467907966,
    37.71208562393,
    42.492079684613735,
    43.74295393180542,
    39.386827312569054,
    37.02202657429085,
    52.971388654001046,
    60.51264567373509,
    57.11798002357051,
    42.277191771938796,
    "… 139 more"
   ],
   "grid": {
    "first": 0,
    "step": 4
   }
  },
  {
   "name": "1200 rpm",
   "x": {
    "quantity": "frequency",
    "unit": "Hz"
   },
   "y": {
    "quantity": "level",
    "unit": "dB"
   },
   "values": [
    41.492870184607796,
    39.87492146221248,
    37.668451264954655,
    36.04431777026333,
    37.860196461690286,
    43.8689230976743,
    39.87121780859458,
    36.168441527656505,
    38.693871133693676,
    55.710607276738216,
    61.43357145349341,
    55.84205294408244,
    "… 139 more"
   ],
   "grid": {
    "first": 0,
    "step": 4
   }
  },
  {
   "name": "1300 rpm",
   "x": {
    "quantity": "frequency",
    "unit": "Hz"
   },
   "y": {
    "quantity": "level",
    "unit": "dB"
   },
   "values": [
    37.07909351167034,
    35.844665205784516,
    38.06656087227745,

…

Bode plot a response's gain and phase against frequency, a filter's -3 dB point or a loop's margins

Open in Chart Studio →

bode-plot

Data BodeData — { frequencies: number[] (Hz, rising, above naught); gainIn: "dB" | "ratio" (the form the gains are in; a ratio is above naught); systems: { name: string; gain: number[] (one a frequency); phase: number[] (degrees, one a frequency) }[] (one to twelve) }

The options Bode plot takes.
OptionKindDefaultTakes
titleTitletitle""text
contextContext: the unit and the periodtitle""text
figureHeadline figure, as writtentitle""text
xAxisX axisaxestruetoggle
yAxisY axisaxestruetoggle
gridGrid linesaxestruetoggle
legendSeries names and keylegendtruetoggle
stripesEvery series in its pattern, for printlegendfalsetoggle
kindWhat the response isshape"filter"filter · loop
passbandThe passband's frequency, in Hz (naught: the lowest)shape00 to 1000000000, step 1
directionThe -3 dB point is walked from the passbandshape"rising"rising · falling
dropThe fall under the passband's gain, in dBshape3.0102999566398120.1 to 40, step 0.01
gainRangeThe gain's range, in dB, "-80 to 6" (none: fitted)axes""text
phaseRangeThe phase's range, in degrees, "-270 to -90" (none: fitted)axes""text
gainStepThe gain's grid, in dBaxes201 to 60, step 1
Sample data
{
 "frequencies": [
  100,
  102.92005271944282,
  105.92537251772889,
  109.01844923851276,
  112.20184543019633,
  115.47819846894582,
  118.85022274370185,
  122.32071190499316,
  125.89254117941672,
  129.56866975170195,
  133.3521432163324,
  137.2460961007562,
  "… 229 more"
 ],
 "gainIn": "dB",
 "systems": [
  {
   "name": "Butterworth low-pass",
   "gain": [
    -0.000027143320296102413,
    -0.00003045529467117136,
    -0.00003417138803145755,
    -0.00003834090957546468,
    -0.00004301918492885511,
    -0.00004826829020848928,
    -0.000054157875649821184,
    -0.000060766089693719324,
    -0.00006818061583112894,
    -0.00007649983591746821,
    -0.00008583413540847464,
    -0.00009630736781152336,
    "… 229 more"
   ],
   "phase": [
    -4.054794535587553,
    -4.17340192918327,
    -4.295491190748343,
    -4.421165651919171,
    -4.550531810313801,
    -4.683699435230671,
    -4.8207816776046535,
    -4.9618951844465125,
    -5.107160218007096,
    -5.2567007799239205,
    -5.4106447406252665,
    -5.569123974285793,
    "… 229 more"
   ]
  }
 ]
}

Hypnogram a night's sleep stages as a stepped line over the clock, REM set apart on its own row

Open in Chart Studio →

hypnogram

Data NightData — { stages: string[] (each epoch's stage from the record's start: Wake, REM, N1, N2, N3 or Not scored, or the host's own names read by stageNames); start?: string (the clock at the record's start, "23:00" or an ISO 8601 date and time); length?: number (the record's length in seconds, whole epochs, the stages' count of them, or more while it is recorded); stageNames?: { [name]: "Wake" | "REM" | "N1" | "N2" | "N3" | "Not scored" } (the host's names read as the six); recordedTo?: number (s from the start recorded so far, while the night is recorded: its whole epochs are read) }

The options Hypnogram takes.
OptionKindDefaultTakes
titleTitletitle""text
contextContext: the unit and the periodtitle""text
figureHeadline figure, as writtentitle""text
xAxisX axisaxestruetoggle
gridGrid linesaxestruetoggle
epochEpoch, in secondsshape301 to 300, step 1
sharesOfStage shares ofvalues"record"record · sleep
momentsSleep onset and the first REM flaggedshapetruetoggle
timeOfDayThe time of day, where the record has a clockaxestruetoggle
Sample data
{
 "stages": [
  "Wake",
  "Wake",
  "Wake",
  "Wake",
  "Wake",
  "Wake",
  "Wake",
  "Wake",
  "Wake",
  "Wake",
  "Wake",
  "Wake",
  "Wake",
  "Wake",
  "Wake",
  "Wake",
  "Wake",
  "Wake",
  "Wake",
  "Wake",
  "Wake",
  "Wake",
  "Wake",
  "Wake",
  "N1",
  "N1",
  "N1",
  "N1",
  "N1",
  "N1",
  "N1",
  "N2",
  "N2",
  "N2",
  "N2",
  "N2",
  "N2",
  "N2",
  "N2",
  "N2",
  "N2",
  "N2",
  "N2",
  "N2",
  "N2",
  "N2",
  "N2",
  "N2",
  "N2",
  "N2",
  "N2",
  "N2",
  "N2",
  "N2",
  "N2",
  "N2",
  "N2",
  "N2",
  "N2",
  "N2",
  "N2",
  "N2",
  "N2",
  "N2",
  "N3",
  "N3",
  "N2",
  "N2",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N3",
  "N2",
  "N2",
  "N2",
  "N2",
  "N2",
  "N2",
  "N2",
  "N2",
  "N2",
  "N1",
  "N2",
  "N2",
  "N2",
  "N2",
  "N2",
  "N2",
  "N2",
  "N2",
  "N2",
  "N2",
  "N2",
  "N2",
  "N2",
  "N2",
  "N2",
  "N1",
  "N1",
  "Wake",
  "N2",
  "N2",
  "N2",
  "N2",
  "N2",
  "N2",
  "Wake",
  "Wake",
  "N1",
  "N1",
  "REM",
  "REM",
  "REM",
  "N1",
  "N1",
  "REM",
  "REM",
  "REM",
  "REM",
  "REM",
  "Wake",
  "REM",
  "REM",
  "REM",
  "REM",
  "REM",
  "N2",
  "N2",
  "N2",
  "N2",
  "N2",
  "N2",
  "N2",
  "N2",
  "N2",
  "N2",
  "N2",
  "N1",
  "N1",
  "N1",
  "N2",
  "N2",
  "N2",
  "N2",
  "N2",
  "N2",
  "N2",
  "N2",
  "N
…

Compare

4 charts

column

Data SeriesData — { categories: string[]; series: { label: string; values: number[] }[]; unit?: string (an ISO 4217 code writes the values as money); unitOne?: string (its singular, after a value of one) }; each series may carry observations?: { bonds?: number[] (each strictly between 0 and 1); carried?: string[]; landed?: string[] }

The options Column takes.
OptionKindDefaultTakes
titleTitletitle""text
contextContext: the unit and the periodtitle""text
figureHeadline figure, as writtentitle""text
xAxisX axisaxestruetoggle
xTitleX axis titleaxes""text
yAxisY axisaxestruetoggle
yTitleY axis titleaxes""text
gridGrid linesaxestruetoggle
legendSeries names and keylegendtruetoggle
stripesEvery series in its pattern, for printlegendfalsetoggle
valuesValue labelsvaluesfalsetoggle
figureOfHeadline figure, worked outtitle"none"none · last · total
deltaIts change on the period beforetitlefalsetoggle
roundingMoney: a half roundedvalues"half-away"half-away · half-even
negativesMoney: a negative writtenvalues"minus"minus · brackets
stackStack the seriesshapefalsetoggle
gapGap between groupsshape0.30 to 0.8, step 0.05
Sample data
{
 "categories": [
  "Q1",
  "Q2",
  "Q3",
  "Q4"
 ],
 "series": [
  {
   "label": "North",
   "values": [
    128,
    146,
    139,
    171
   ]
  },
  {
   "label": "South",
   "values": [
    96,
    104,
    121,
    133
   ]
  },
  {
   "label": "West",
   "values": [
    74,
    88,
    95,
    118
   ]
  }
 ]
}

Bar compare, ranked

Open in Chart Studio →

bar

Data SeriesData — { categories: string[]; series: { label: string; values: number[] }[]; unit?: string (an ISO 4217 code writes the values as money); unitOne?: string (its singular, after a value of one) }; each series may carry observations?: { bonds?: number[] (each strictly between 0 and 1); carried?: string[]; landed?: string[] }

The options Bar takes.
OptionKindDefaultTakes
titleTitletitle""text
contextContext: the unit and the periodtitle""text
figureHeadline figure, as writtentitle""text
xAxisX axisaxestruetoggle
xTitleX axis titleaxes""text
yAxisY axisaxestruetoggle
yTitleY axis titleaxes""text
gridGrid linesaxestruetoggle
legendSeries names and keylegendtruetoggle
stripesEvery series in its pattern, for printlegendfalsetoggle
valuesValue labelsvaluesfalsetoggle
figureOfHeadline figure, worked outtitle"none"none · last · total
deltaIts change on the period beforetitlefalsetoggle
roundingMoney: a half roundedvalues"half-away"half-away · half-even
negativesMoney: a negative writtenvalues"minus"minus · brackets
stackStack the seriesshapefalsetoggle
gapGap between groupsshape0.30 to 0.8, step 0.05
Sample data
{
 "categories": [
  "Q1",
  "Q2",
  "Q3",
  "Q4"
 ],
 "series": [
  {
   "label": "North",
   "values": [
    128,
    146,
    139,
    171
   ]
  },
  {
   "label": "South",
   "values": [
    96,
    104,
    121,
    133
   ]
  },
  {
   "label": "West",
   "values": [
    74,
    88,
    95,
    118
   ]
  }
 ]
}

Population pyramid age and sex

Open in Chart Studio →

population-pyramid

Data PyramidData — { ages: string[]; left: { label: string; values: number[] }; right: { label: string; values: number[] } }; each side may carry observations?: { bonds?: number[] (each strictly between 0 and 1); carried?: string[]; landed?: string[] }

The options Population pyramid takes.
OptionKindDefaultTakes
titleTitletitle""text
contextContext: the unit and the periodtitle""text
figureHeadline figure, as writtentitle""text
xAxisX axisaxestruetoggle
yAxisY axisaxestruetoggle
gridGrid linesaxestruetoggle
legendSeries names and keylegendtruetoggle
stripesEvery series in its pattern, for printlegendfalsetoggle
valuesValue labelsvaluesfalsetoggle
shareShow as share of totalvaluestruetoggle
Sample data
{
 "ages": [
  "85+",
  "80–84",
  "75–79",
  "70–74",
  "65–69",
  "60–64",
  "55–59",
  "50–54",
  "45–49",
  "40–44",
  "35–39",
  "30–34",
  "25–29",
  "20–24",
  "15–19",
  "10–14",
  "5–9",
  "0–4"
 ],
 "left": {
  "label": "Male",
  "values": [
   0.6,
   0.9,
   1.4,
   1.9,
   2.1,
   2.6,
   3,
   3.2,
   3.1,
   3,
   3.2,
   3.3,
   "… 6 more"
  ]
 },
 "right": {
  "label": "Female",
  "values": [
   1.1,
   1.3,
   1.7,
   2.1,
   2.3,
   2.7,
   3.1,
   3.3,
   3.1,
   3,
   3.2,
   3.3,
   "… 6 more"
  ]
 }
}

Radar many attributes

Open in Chart Studio →

radar

Data SeriesData — { categories: string[] (the axes); series: { label: string; values: number[] }[] }; each series may carry observations?: { bonds?: number[] (each strictly between 0 and 1); carried?: string[]; landed?: string[] }

The options Radar takes.
OptionKindDefaultTakes
titleTitletitle""text
contextContext: the unit and the periodtitle""text
figureHeadline figure, as writtentitle""text
legendSeries names and keylegendtruetoggle
stripesEvery series in its pattern, for printlegendfalsetoggle
valuesValue labelsvaluesfalsetoggle
fillFill each shapeshapetruetoggle
ringsGrid ringsaxes42 to 10, step 1
polygonPolygonal gridaxestruetoggle
Sample data
{
 "categories": [
  "Pace",
  "Shooting",
  "Passing",
  "Dribbling",
  "Defending",
  "Physical"
 ],
 "series": [
  {
   "label": "Player A",
   "values": [
    88,
    79,
    72,
    85,
    41,
    70
   ]
  },
  {
   "label": "Player B",
   "values": [
    70,
    62,
    88,
    80,
    68,
    74
   ]
  }
 ]
}

Part of a whole

3 charts

Donut composition

Open in Chart Studio →

donut

Data DonutData — { parts: { label: string; value: number }[]; unit?: string (an ISO 4217 code writes the amounts as money); unitOne?: string (its singular, after a value of one); label?: string (what the amounts are) }; each part may carry observations?: { bonds?: number[] (each strictly between 0 and 1); carried?: string[]; landed?: string[] }

The options Donut takes.
OptionKindDefaultTakes
titleTitletitle""text
contextContext: the unit and the periodtitle""text
figureHeadline figure, as writtentitle""text
figureOfHeadline figure, worked outtitle"none"none · total
legendSeries names and keylegendtruetoggle
stripesEvery series in its pattern, for printlegendfalsetoggle
sliceLabelsUnder each part's namevalues"percent"percent · value · none
countsWhat the whole countsvalues""text
holeHole (0 is a pie)shape0.620 to 0.9, step 0.01
startAtStart angleshape00 to 360, step 15
sliceGapGap between slices (px)shape20 to 8, step 0.5
sortLargest firstshapetruetoggle
totalTotal in the middlevaluestruetoggle
roundingMoney: a half roundedvalues"half-away"half-away · half-even
negativesMoney: a negative writtenvalues"minus"minus · brackets
Sample data
{
 "parts": [
  {
   "label": "Direct",
   "value": 3420
  },
  {
   "label": "Search",
   "value": 2890
  },
  {
   "label": "Social",
   "value": 1760
  },
  {
   "label": "Email",
   "value": 940
  },
  {
   "label": "Referral",
   "value": 610
  }
 ]
}

Treemap share of a whole

Open in Chart Studio →

treemap

Data TreemapData — { parts: { label: string; value: number; group?: string }[]; unit?: string (an ISO 4217 code writes the amounts as money); unitOne?: string (its singular, after a value of one); label?: string (what the amounts are) }; observationsOf?: Record<group name, { bonds?: number[] (each strictly between 0 and 1); carried?: string[]; landed?: string[] }>

The options Treemap takes.
OptionKindDefaultTakes
titleTitletitle""text
contextContext: the unit and the periodtitle""text
figureHeadline figure, as writtentitle""text
figureOfHeadline figure, worked outtitle"none"none · total
legendSeries names and keylegendtruetoggle
stripesEvery series in its pattern, for printlegendfalsetoggle
valuesLabels in tilesvaluestruetoggle
padTile gapshape20 to 6, step 1
colourColour byshape"group"group · value
roundingMoney: a half roundedvalues"half-away"half-away · half-even
negativesMoney: a negative writtenvalues"minus"minus · brackets
Sample data
{
 "parts": [
  {
   "label": "Laptops",
   "value": 412,
   "group": "Computing"
  },
  {
   "label": "Monitors",
   "value": 188,
   "group": "Computing"
  },
  {
   "label": "Accessories",
   "value": 97,
   "group": "Computing"
  },
  {
   "label": "Phones",
   "value": 356,
   "group": "Mobile"
  },
  {
   "label": "Tablets",
   "value": 141,
   "group": "Mobile"
  },
  {
   "label": "Wearables",
   "value": 83,
   "group": "Mobile"
  },
  {
   "label": "TVs",
   "value": 264,
   "group": "Home"
  },
  {
   "label": "Audio",
   "value": 132,
   "group": "Home"
  },
  {
   "label": "Smart home",
   "value": 71,
   "group": "Home"
  },
  {
   "label": "Consoles",
   "value": 118,
   "group": "Gaming"
  },
  {
   "label": "Games",
   "value": 94,
   "group": "Gaming"
  }
 ]
}

Funnel stage by stage

Open in Chart Studio →

funnel

Data FunnelData — { stages: { label: string; value: number }[] }; observations?: { bonds?: number[] (each strictly between 0 and 1); carried?: string[]; landed?: string[] } (the one measure's)

The options Funnel takes.
OptionKindDefaultTakes
titleTitletitle""text
contextContext: the unit and the periodtitle""text
figureHeadline figure, as writtentitle""text
conversionStep conversionvaluestruetoggle
valuesValue labelsvaluestruetoggle
gapGap between stagesshape0.120 to 0.5, step 0.02
Sample data
{
 "stages": [
  {
   "label": "Visits",
   "value": 48200
  },
  {
   "label": "Sign-ups",
   "value": 9640
  },
  {
   "label": "Activated",
   "value": 5110
  },
  {
   "label": "Trial",
   "value": 2380
  },
  {
   "label": "Paid",
   "value": 912
  }
 ]
}

Distribution

8 charts

Histogram a distribution

Open in Chart Studio →

histogram

Data HistogramData — { groups: { label: string; samples: number[]; keys?: string[] (each sample's row key, as its table names it) }[] }; each group may carry observations?: { bonds?: number[] (each strictly between 0 and 1); carried?: string[]; landed?: string[] }

The options Histogram takes.
OptionKindDefaultTakes
titleTitletitle""text
contextContext: the unit and the periodtitle""text
figureHeadline figure, as writtentitle""text
xAxisX axisaxestruetoggle
xTitleX axis titleaxes""text
yAxisY axisaxestruetoggle
yTitleY axis titleaxes""text
gridGrid linesaxestruetoggle
legendSeries names and keylegendtruetoggle
stripesEvery series in its pattern, for printlegendfalsetoggle
valuesValue labelsvaluesfalsetoggle
binsBinsshape244 to 60, step 1
measureHeight showsshape"count"count · percent
Sample data
{
 "groups": [
  {
   "label": "Batch 1",
   "samples": [
    72.07,
    49.46,
    42.43,
    50.63,
    48.9,
    57.34,
    44.17,
    40.27,
    37.77,
    62.36,
    59.62,
    59.02,
    "… 588 more"
   ]
  },
  {
   "label": "Batch 2",
   "samples": [
    65.38,
    68.14,
    64.41,
    59.9,
    58.71,
    57.28,
    49.43,
    65.24,
    64.71,
    78.46,
    63.27,
    61.9,
    "… 588 more"
   ]
  }
 ]
}

Box plot spread and outliers

Open in Chart Studio →

box-plot

Data BoxData — { groups: { label: string; samples: number[]; keys?: string[] (each sample's row key, as its table names it) }[] }; each group may carry observations?: { bonds?: number[] (each strictly between 0 and 1); carried?: string[]; landed?: string[] }

The options Box plot takes.
OptionKindDefaultTakes
titleTitletitle""text
contextContext: the unit and the periodtitle""text
figureHeadline figure, as writtentitle""text
xAxisX axisaxestruetoggle
xTitleX axis titleaxes""text
yAxisY axisaxestruetoggle
yTitleY axis titleaxes""text
gridGrid linesaxestruetoggle
valuesValue labelsvaluesfalsetoggle
outliersOutliers beyond 1.5 × IQRshapetruetoggle
meanMark the meanshapetruetoggle
Sample data
{
 "groups": [
  {
   "label": "Ward A",
   "samples": [
    2.9,
    4.9,
    1.8,
    2.8,
    3.5,
    5.1,
    3.1,
    2.4,
    5,
    3.9,
    5.9,
    4.1,
    "… 108 more"
   ]
  },
  {
   "label": "Ward B",
   "samples": [
    7,
    8.5,
    6,
    10.1,
    9.3,
    5.8,
    6.9,
    1.5,
    4.2,
    4.4,
    4.3,
    3.8,
    "… 108 more"
   ]
  },
  {
   "label": "Ward C",
   "samples": [
    3.4,
    3.5,
    5.5,
    4,
    3.1,
    4.4,
    3.3,
    6.9,
    4.4,
    4.1,
    4.3,
    4.4,
    "… 108 more"
   ]
  },
  {
   "label": "Ward D",
   "samples": [
    14.8,
    2.4,
    7.2,
    6.1,
    6.4,
    9.7,
    7.9,
    4.5,
    7.5,
    3.7,
    6.6,
    3.6,
    "… 108 more"
   ]
  },
  {
   "label": "Ward E",
   "samples": [
    2.1,
    4.5,
    5.2,
    6.7,
    6.7,
    5.4,
    8.3,
    5,
    4.8,
    6.6,
    5.3,
    4,
    "… 108 more"
   ]
  }
 ]
}

Bids and asks bids and asks

Open in Chart Studio →

market-depth

Data BookData — { label?: string; bids: [price, size][]; asks: [price, size][] }

The options Bids and asks takes.
OptionKindDefaultTakes
titleTitletitle""text
contextContext: the unit and the periodtitle""text
figureHeadline figure, as writtentitle""text
xAxisX axisaxestruetoggle
yAxisY axisaxestruetoggle
gridGrid linesaxestruetoggle
midMid price markedvaluestruetoggle
Sample data
{
 "label": "sample",
 "bids": [
  [
   99.975,
   1419
  ],
  [
   99.925,
   587
  ],
  [
   99.875,
   1236
  ],
  [
   99.825,
   618
  ],
  [
   99.775,
   518
  ],
  [
   99.725,
   1769
  ],
  [
   99.675,
   948
  ],
  [
   99.625,
   1464
  ],
  [
   99.575,
   982
  ],
  [
   99.525,
   1790
  ],
  [
   99.475,
   2034
  ],
  [
   99.425,
   1189
  ],
  [
   99.375,
   1105
  ],
  [
   99.325,
   1077
  ],
  [
   99.275,
   1895
  ],
  [
   99.225,
   2130
  ],
  [
   99.175,
   1368
  ],
  [
   99.125,
   1751
  ],
  [
   99.075,
   2164
  ],
  [
   99.025,
   2166
  ],
  [
   98.975,
   2001
  ],
  [
   98.925,
   2136
  ],
  [
   98.875,
   2098
  ],
  [
   98.825,
   1851
  ],
  [
   98.775,
   1275
  ],
  [
   98.725,
   1315
  ],
  [
   98.675,
   2818
  ],
  [
   98.625,
   1857
  ],
  [
   98.575,
   2084
  ],
  [
   98.525,
   2503
  ]
 ],
 "asks": [
  [
   100.025,
   1289
  ],
  [
   100.075,
   323
  ],
  [
   100.125,
   694
  ],
  [
   100.175,
   1765
  ],
  [
   100.225,
   549
  ],
  [
   100.275,
   2123
  ],
  [
   100.325,
   1017
  ],
  [
   100.375,
   677
  ],
  [
   100.425,
   1813
  ],
  [
   100.475,
   915
  ],
  [
   100.525,
   1304
  ],
  [
   100.575,
   1949
  ],
  [
   100.625,
   837
  ],
  [
   100.675,
   2095
  ],
  [
   100.725,
   1206
  ],
  [
   100.775,
   2261
  ],
  [
   100.825,
   2500
  ],
  [
   100.875,
   1522
  ],
  [
   100.925,
   1256
  ],
  [
   100.975,
   1367
  ],
  [
   101.025,
   2447
  ],
  [
   101.075,
   2049
  ],
  [
   101.125,
   2343
  ],
  [
   101.175,
   1346
  ],
  [
   101.225,
   2017
  ],
  [
   101.275,
   2859
  ],
  [
   101.325,
   2297
  ],
  [
   101.375,
   2786
  ],
  [
   101.425,
   1469
  ],
  [
   101.475,
   2757
  ]
 ]
}

Hour ring when things happen round the day

Open in Chart Studio →

hour-ring

Data HourData — { times?: (string | Date)[] (instants, ISO 8601 with their time, binned by the hour in the zone); weights?: number[] (one to each time, 1 each where none); keys?: string[] (each instant's row key, as its table names it, one to each time); hours?: { hour: number (0 to 23); value: number }[]; unit?: string; unitOne?: string (its singular, after a value of one) } (times or hours, one or the other)

The options Hour ring takes.
OptionKindDefaultTakes
titleTitletitle""text
contextContext: the unit and the periodtitle""text
figureHeadline figure, as writtentitle""text
markEach hour asshape"area"area · tint
clockHours byaxes"24-hour"24-hour · 12-hour
zoneTime zone (IANA name)axes""text
roundingMoney: a half roundedvalues"half-away"half-away · half-even
negativesMoney: a negative writtenvalues"minus"minus · brackets
Sample data
{
 "times": [
  "2026-01-05T07:04",
  "2026-01-05T07:36",
  "2026-01-05T08:20",
  "2026-01-05T08:48",
  "2026-01-05T09:44",
  "2026-01-05T09:38",
  "2026-01-05T10:56",
  "2026-01-05T11:54",
  "2026-01-05T12:34",
  "2026-01-05T12:17",
  "2026-01-05T12:34",
  "2026-01-05T12:37",
  "2026-01-05T12:32",
  "2026-01-05T13:17",
  "2026-01-05T13:12",
  "2026-01-05T13:45",
  "2026-01-05T13:27",
  "2026-01-05T13:10",
  "2026-01-05T14:09",
  "2026-01-05T15:50",
  "2026-01-05T15:15",
  "2026-01-05T16:01",
  "2026-01-05T17:30",
  "2026-01-05T18:16",
  "2026-01-05T18:03",
  "2026-01-05T18:25",
  "2026-01-05T18:18",
  "2026-01-05T18:04",
  "2026-01-05T18:09",
  "2026-01-05T19:19",
  "2026-01-05T19:54",
  "2026-01-05T19:41",
  "2026-01-05T19:51",
  "2026-01-05T19:54",
  "2026-01-05T19:30",
  "2026-01-05T20:17",
  "2026-01-05T20:05",
  "2026-01-05T20:07",
  "2026-01-05T20:02",
  "2026-01-05T20:23",
  "2026-01-05T20:07",
  "2026-01-05T21:23",
  "2026-01-05T21:30",
  "2026-01-05T22:20",
  "2026-01-05T22:00",
  "2026-01-05T23:30",
  "2026-01-06T03:19",
  "2026-01-06T06:18",
  "2026-01-06T07:59",
  "2026-01-06T07:44",
  "2026-01-06T08:17",
  "2026-01-06T08:39",
  "2026-01-06T09:59",
  "2026-01-06T09:36",
  "2026-01-06T10:17",
  "2026-01-06T11:46",
  "2026-01-06T12:38",
  "2026-01-06T12:40",
  "2026-01-06T12:12",
  "2026-01-06T12:51",
  "2026-01-06T13:50",
  "2026-01-06T13:00",
  "2026-01-06T13:25",
  "2026-01-06T13:21",
  "2026-01-06T13:50",
  "2026-01-06T14:29",
  "2026-01-06T15:27",
  "2026-01-06T16:40",
  "2026-01-06T17:05",
  "2026-01-06T17:41",
  "2026-01-06T18:33",
  "2026-01-06T18:16",
  "2026-01-06T18:49",
  "2026-01-06T18:00",
  "2026-01-06T18:52",
  "2026-01-06T18:09",
  "2026-01-06T19:08",
  "2026-01-06T19:28",
  "2026-01-06T19:14",
  "2026-01-06T19:08",
  "2026-01-06T19:30",
  "2
…

Persistence every acquisition overlaid, each place by how often it is crossed

Open in Chart Studio →

persistence

Data PersistenceData — { acquisitions: Waveform[] (each held, its start its first sample's time from its trigger, s); mask?: [number, number][][] (regions, each its corners in s from the trigger and the waveforms' unit); measures?: { name: string; value: string }[] (the host's: jitter, rise time) }

The options Persistence takes.
OptionKindDefaultTakes
titleTitletitle""text
contextContext: the unit and the periodtitle""text
figureHeadline figure, as writtentitle""text
xAxisX axisaxestruetoggle
yAxisY axisaxestruetoggle
gridGrid linesaxestruetoggle
topThe darkest step, fromshape"1,000"1,000 · 10,000 · 100,000 · 1,000,000 · 10,000,000 · 100,000,000 · 1,000,000,000
Sample data
{
 "acquisitions": [
  {
   "name": "Edge 1",
   "unit": "V",
   "rate": 40000000000,
   "start": -2e-9,
   "samples": {
    "0": -0.0034962682984769344,
    "1": -0.01009438931941986,
    "2": 0.00562371825799346,
    "3": -0.017977479845285416,
    "4": 0.013428718782961369,
    "5": 0.005701876245439053,
    "6": -0.00580964470282197,
    "7": 0.005436148028820753,
    "8": -0.0034086513333022594,
    "9": 0.006105873268097639,
    "10": 0.009527473710477352,
    "11": 0.006083501968532801,
    "12": 0.006696085911244154,
    "13": 0.014409507624804974,
    "14": -0.012625273317098618,
    "15": 0.0060623884201049805,
    "16": 0.012451684102416039,
    "17": 0.0051259263418614864,
    "18": 0.0020568871404975653,
    "19": 0.0004188033635728061,
    "20": 0.0012838705442845821,
    "21": -0.0006856909021735191,
    "22": -0.004936313722282648,
    "23": 0.004867641720920801,
    "24": 0.003280095988884568,
    "25": -0.007585939019918442,
    "26": -0.011143230833113194,
    "27": -0.0008526644087396562,
    "28": 0.0026550183538347483,
    "29": -0.009582228027284145,
    "30": 0.004705563187599182,
    "31": -0.008036232553422451,
    "32": 0.003759116167202592,
    "33": -0.011722487397491932,
    "34": -0.013117719441652298,
    "35": 0.004859365057200193,
    "36": -0.0029060887172818184,
    "37": -0.0012588484678417444,
    "38": -0.007472429424524307,
    "39": 0.004536791704595089,
    "40": 0.0005886162398383021,
    "41": -0.004010528326034546,
    "42": 0.005923685152083635,
    "43": 0.00908061396330595,
    "44": 0.002714982023462653,
    "45": 0.0016536860493943095,
    "46": 0.004027377348393202,
    "47": 0.003941534087061882,
    "48": 0.0031578855123370886,
    "49": -0.009223525412380695,
    "50": -0.005695761647075415,
    "51": -0.013562160544
…

Eye diagram a link's bits folded onto two unit intervals, its eye and its mask

Open in Chart Studio →

eye-diagram

Data EyeData — { waveform: Waveform (held); edges?: number[] (the clock's edges, s from the record's start, rising); unitInterval?: number (s, in place of edges); first?: number (the first edge, s); mask?: [number, number][][] (regions, each its corners in unit intervals and the waveform's unit) }

The options Eye diagram takes.
OptionKindDefaultTakes
titleTitletitle""text
contextContext: the unit and the periodtitle""text
figureHeadline figure, as writtentitle""text
xAxisX axisaxestruetoggle
yAxisY axisaxestruetoggle
gridGrid linesaxestruetoggle
topThe darkest step, fromshape"1,000"1,000 · 10,000 · 100,000 · 1,000,000 · 10,000,000 · 100,000,000 · 1,000,000,000
eyeHeightThe eye's heightshape"inner"inner · 3σ
Sample data
{
 "waveform": {
  "name": "Data",
  "unit": "V",
  "rate": 499500499500.4996,
  "samples": {
   "0": -0.19312626123428345,
   "1": -0.20648445188999176,
   "2": -0.19528958201408386,
   "3": -0.20991328358650208,
   "4": -0.20769286155700684,
   "5": -0.1936688870191574,
   "6": -0.20608285069465637,
   "7": -0.20634472370147705,
   "8": -0.20203189551830292,
   "9": -0.20554649829864502,
   "10": -0.20335698127746582,
   "11": -0.20842567086219788,
   "12": -0.1885230839252472,
   "13": -0.1980535089969635,
   "14": -0.2023952603340149,
   "15": -0.20132674276828766,
   "16": -0.19768647849559784,
   "17": -0.20638369023799896,
   "18": -0.19068379700183868,
   "19": -0.20147424936294556,
   "20": -0.19336965680122375,
   "21": -0.20834127068519592,
   "22": -0.19771763682365417,
   "23": -0.19653940200805664,
   "24": -0.2081521898508072,
   "25": -0.19764728844165802,
   "26": -0.19661933183670044,
   "27": -0.19544103741645813,
   "28": -0.20190002024173737,
   "29": -0.19630764424800873,
   "30": -0.19434335827827454,
   "31": -0.2045290619134903,
   "32": -0.19309982657432556,
   "33": -0.20145756006240845,
   "34": -0.19408634305000305,
   "35": -0.20776206254959106,
   "36": -0.1944405734539032,
   "37": -0.19427266716957092,
   "38": -0.1951282024383545,
   "39": -0.20421935617923737,
   "40": -0.19870518147945404,
   "41": -0.19205527007579803,
   "42": -0.2025979459285736,
   "43": -0.20136527717113495,
   "44": -0.20648370683193207,
   "45": -0.2017252892255783,
   "46": -0.20568697154521942,
   "47": -0.20739926397800446,
   "48": -0.1966826468706131,
   "49": -0.20106661319732666,
   "50": -0.20424246788024902,
   "51": -0.19502650201320648,
   "52": -0.19084413349628448,
   "53": -0.1986130028963089,
   "54": -0.19003309309482574,
   "55": -0.19854293763
…

Mass spectrum a compound's ions as sticks at their m/z, the base peak at 100 %, the molecular ion marked

Open in Chart Studio →

mass-spectrum

Data MassSpectrumData — { peaks: { name; x: { quantity: "m/z"; unit }; y: { quantity; unit }; at: number[] (each peak's m/z, rising); height: number[] (its abundance in any scale, naught or more, the greatest above naught) }; molecularIon?: number (its m/z, one of the peaks'); ionisation?: string ("electron ionisation at 70 eV") }

The options Mass spectrum takes.
OptionKindDefaultTakes
titleTitletitle""text
contextContext: the unit and the periodtitle""text
figureHeadline figure, as writtentitle""text
xAxisX axisaxestruetoggle
xTitleX axis titleaxes""text
yAxisY axisaxestruetoggle
yTitleY axis titleaxes""text
gridGrid linesaxestruetoggle
labelledPeaks named by their m/zvalues60 to 40, step 1
fromView fromaxes00 to 1, step 0.001
toView toaxes10 to 1, step 0.001
Sample data
{
 "peaks": {
  "name": "Toluene",
  "x": {
   "quantity": "m/z",
   "unit": ""
  },
  "y": {
   "quantity": "intensity",
   "unit": ""
  },
  "at": [
   38,
   39,
   45,
   50,
   51,
   52,
   62,
   63,
   64,
   65,
   66,
   77,
   "… 7 more"
  ],
  "height": [
   4.1,
   9.4,
   3,
   6.2,
   8,
   2.6,
   3.1,
   7.9,
   2,
   11.4,
   1.5,
   2.1,
   "… 7 more"
  ]
 },
 "molecularIon": 92,
 "ionisation": "electron ionisation at 70 eV"
}

Antenna polar an antenna's gain round it in dBi, each plane cut a closed line, its half-power beam and its back

Open in Chart Studio →

antenna-polar

Data PolarData — { cuts: { name: string; angles: number[] (degrees, -180 to 180 or 0 to 360, rising; -180 and 180 are one direction, as are 0 and 360); gain: number[] (dBi, one at each angle); frequency?: number (hertz, the cut's own, where the cuts are at unlike frequencies) }[] (twelve at most); frequency?: number (hertz, the one every cut is at) }

The options Antenna polar takes.
OptionKindDefaultTakes
titleTitletitle""text
contextContext: the unit and the periodtitle""text
figureHeadline figure, as writtentitle""text
legendSeries names and keylegendtruetoggle
topRingOuter ring in dBi (the least multiple of the step at or above the peak where left empty)axes""text
ringStepdB a ringaxes101 to 20, step 1
ringsRingsaxes42 to 8, step 1
anglesAnglesaxes"signed"signed · 0 to 360
zeroAngleThe angle at the top, in degreesaxes0-180 to 180, step 1
directionAngles runaxes"clockwise"clockwise · anticlockwise
halfPowerThe half-power ringshapetruetoggle
normaliseEach cut to its own peakshapefalsetoggle
Sample data
{
 "cuts": [
  {
   "name": "E-plane",
   "angles": [
    -180,
    -179,
    -178,
    -177,
    -176,
    -175,
    -174,
    -173,
    -172,
    -171,
    -170,
    -169,
    "… 349 more"
   ],
   "gain": [
    -9.878451464180104,
    -9.76274433320736,
    -9.662757237649986,
    -9.578558763749035,
    -9.510184000855409,
    -9.457637045093309,
    -9.420893028798202,
    -9.399899710432438,
    -9.394578655903805,
    -9.404826038399898,
    -9.430513080173883,
    -9.471486156306147,
    "… 349 more"
   ]
  },
  {
   "name": "H-plane",
   "angles": [
    -180,
    -179,
    -178,
    -177,
    -176,
    -175,
    -174,
    -173,
    -172,
    -171,
    -170,
    -169,
    "… 349 more"
   ],
   "gain": [
    -14.371437972093757,
    -13.936883568002282,
    -13.509139923020216,
    -13.092325953426956,
    -12.689860763935075,
    -12.30453992689952,
    -11.938614766458711,
    -11.593869040254711,
    -11.271689726992475,
    -10.97313028124828,
    -10.698965822512596,
    -10.449740414664914,
    "… 349 more"
   ]
  }
 ],
 "frequency": 2450000000
}

Relationship

6 charts

Scatter clusters in space

Open in Chart Studio →

scatter

Data ScatterData — { groups: { label: string; points: { x: number; y: number; size?: number }[] }[] }; each group may carry observations?: { bonds?: number[] (each strictly between 0 and 1); carried?: string[]; landed?: string[] }

The options Scatter takes.
OptionKindDefaultTakes
titleTitletitle""text
contextContext: the unit and the periodtitle""text
figureHeadline figure, as writtentitle""text
xAxisX axisaxestruetoggle
xTitleX axis titleaxes""text
yAxisY axisaxestruetoggle
yTitleY axis titleaxes""text
gridGrid linesaxestruetoggle
legendSeries names and keylegendtruetoggle
stripesEvery series in its pattern, for printlegendfalsetoggle
radiusPoint sizeshape41 to 10, step 0.5
sizeBySize carries a third valueshapetruetoggle
renderDraw asshape"auto"auto · points · density
fromView fromaxes00 to 1, step 0.001
toView toaxes10 to 1, step 0.001
yFromView from (y)axes00 to 1, step 0.001
yToView to (y)axes10 to 1, step 0.001
Sample data
{
 "groups": [
  {
   "label": "Cohort A",
   "points": [
    {
     "x": 28.3,
     "y": 39.12,
     "size": 1.14
    },
    {
     "x": 23.14,
     "y": 29.01,
     "size": 0.75
    },
    {
     "x": 25.64,
     "y": 37.26,
     "size": 0.96
    },
    {
     "x": 20.17,
     "y": 38.79,
     "size": 0.93
    },
    {
     "x": 23.27,
     "y": 28.64,
     "size": 0.63
    },
    {
     "x": 21.36,
     "y": 40.82,
     "size": 0.82
    },
    {
     "x": 19.33,
     "y": 44.87,
     "size": 0.49
    },
    {
     "x": 14.74,
     "y": 34.93,
     "size": 0.78
    },
    {
     "x": 21.66,
     "y": 44.77,
     "size": 0.33
    },
    {
     "x": 22.64,
     "y": 36.83,
     "size": 0.88
    },
    {
     "x": 18.77,
     "y": 41.88,
     "size": 0.32
    },
    {
     "x": 20.9,
     "y": 38.93,
     "size": 0.37
    },
    {
     "x": 21.35,
     "y": 43.54,
     "size": 1.12
    },
    {
     "x": 24.91,
     "y": 48.65,
     "size": 0.45
    },
    {
     "x": 21.12,
     "y": 41.21,
     "size": 0.44
    },
    {
     "x": 24.03,
     "y": 30.95,
     "size": 0.34
    },
    {
     "x": 13.73,
     "y": 35.09,
     "size": 0.21
    },
    {
     "x": 25.65,
     "y": 33.13,
     "size": 0.29
    },
    {
     "x": 21.9,
     "y": 43.9,
     "size": 0.38
    },
    {
     "x": 24.25,
     "y": 31.17,
     "size": 0.69
    },
    {
     "x": 23.25,
     "y": 33.06,
     "size": 0.67
    },
    {
     "x": 22.63,
     "y": 40.47,
     "size": 0.22
    },
    {
     "x": 19.92,
     "y": 34.47,
     "size": 0.85
    },
    {
     "x": 20.97,
     "y": 43.49,
     "size": 0.86
    },
    {
     "x": 23.99,
     "y": 30.06,
     "size": 1.17
    },
    {
     "x": 15.36,
     "y": 33.02,
     "size": 0.48
    },
    {
     "x": 20.5,
     "y": 34,
     "size": 0.32
  
…

Campbell a run's orders against its natural frequencies, its critical speed

Open in Chart Studio →

campbell

Data CampbellData — { speeds: number[] (rpm, rising or falling); keys?: string[] (each speed's row key, as its table names it, one to each speed); orders: { order: number (a multiple of the shaft's speed); label?: string (the order as its table spells it); amplitude: number[] (one a speed, at or above naught); phase?: number[] (degrees, one a speed) }[]; unit?: string (the amplitudes'); measure?: string (what they measure, "Velocity"); modes?: { name: string; at: [number, number][] (rpm and Hz, the speeds rising) }[] }

The options Campbell takes.
OptionKindDefaultTakes
titleTitletitle""text
contextContext: the unit and the periodtitle""text
figureHeadline figure, as writtentitle""text
xAxisX axisaxestruetoggle
yAxisY axisaxestruetoggle
gridGrid linesaxestruetoggle
legendSeries names and keylegendtruetoggle
stripesEvery series in its pattern, for printlegendfalsetoggle
orderReadThe order readshape10.5 to 100, step 0.5
Sample data
{
 "speeds": {
  "0": 300,
  "1": 310,
  "2": 320,
  "3": 330,
  "4": 340,
  "5": 350,
  "6": 360,
  "7": 370,
  "8": 380,
  "9": 390,
  "10": 400,
  "11": 410,
  "12": 420,
  "13": 430,
  "14": 440,
  "15": 450,
  "16": 460,
  "17": 470,
  "18": 480,
  "19": 490,
  "20": 500,
  "21": 510,
  "22": 520,
  "23": 530,
  "24": 540,
  "25": 550,
  "26": 560,
  "27": 570,
  "28": 580,
  "29": 590,
  "30": 600,
  "31": 610,
  "32": 620,
  "33": 630,
  "34": 640,
  "35": 650,
  "36": 660,
  "37": 670,
  "38": 680,
  "39": 690,
  "40": 700,
  "41": 710,
  "42": 720,
  "43": 730,
  "44": 740,
  "45": 750,
  "46": 760,
  "47": 770,
  "48": 780,
  "49": 790,
  "50": 800,
  "51": 810,
  "52": 820,
  "53": 830,
  "54": 840,
  "55": 850,
  "56": 860,
  "57": 870,
  "58": 880,
  "59": 890,
  "60": 900,
  "61": 910,
  "62": 920,
  "63": 930,
  "64": 940,
  "65": 950,
  "66": 960,
  "67": 970,
  "68": 980,
  "69": 990,
  "70": 1000,
  "71": 1010,
  "72": 1020,
  "73": 1030,
  "74": 1040,
  "75": 1050,
  "76": 1060,
  "77": 1070,
  "78": 1080,
  "79": 1090,
  "80": 1100,
  "81": 1110,
  "82": 1120,
  "83": 1130,
  "84": 1140,
  "85": 1150,
  "86": 1160,
  "87": 1170,
  "88": 1180,
  "89": 1190,
  "90": 1200,
  "91": 1210,
  "92": 1220,
  "93": 1230,
  "94": 1240,
  "95": 1250,
  "96": 1260,
  "97": 1270,
  "98": 1280,
  "99": 1290,
  "100": 1300,
  "101": 1310,
  "102": 1320,
  "103": 1330,
  "104": 1340,
  "105": 1350,
  "106": 1360,
  "107": 1370,
  "108": 1380,
  "109": 1390,
  "110": 1400,
  "111": 1410,
  "112": 1420,
  "113": 1430,
  "114": 1440,
  "115": 1450,
  "116": 1460,
  "117": 1470,
  "118": 1480,
  "119": 1490,
  "120": 1500,
  "121": 1510,
  "122": 1520,
  "123": 1530,
  "124": 1540,
  "125": 1550,
  "126": 1560,
  "127": 1570,
  "128": 1580,
  "129": 1590,
  "130": 1600,

…

Heatmap cohort retention

Open in Chart Studio →

heatmap

Data HeatmapData — { rows: string[]; cols: string[]; cells: (number | null)[][] }

The options Heatmap takes.
OptionKindDefaultTakes
titleTitletitle""text
contextContext: the unit and the periodtitle""text
figureHeadline figure, as writtentitle""text
xAxisX axisaxestruetoggle
xTitleX axis titleaxes""text
yAxisY axisaxestruetoggle
yTitleY axis titleaxes""text
valuesValue labelsvaluestruetoggle
scaleScaleshape"sequential"sequential · diverging · diverging, reversed
gapCell gapshape20 to 6, step 1
percentValues are sharesvaluesfalsetoggle
Sample data
{
 "rows": [
  "Jan",
  "Feb",
  "Mar",
  "Apr",
  "May",
  "Jun",
  "Jul"
 ],
 "cols": [
  "M0",
  "M1",
  "M2",
  "M3",
  "M4",
  "M5",
  "M6"
 ],
 "cells": [
  [
   1,
   0.748,
   0.565,
   0.432,
   0.336,
   0.266,
   0.215
  ],
  [
   1.02,
   0.763,
   0.576,
   0.44,
   0.341,
   0.27,
   null
  ],
  [
   1.04,
   0.777,
   0.586,
   0.448,
   0.347,
   null,
   null
  ],
  [
   1.06,
   0.792,
   0.597,
   0.455,
   null,
   null,
   null
  ],
  [
   1.08,
   0.806,
   0.607,
   null,
   null,
   null,
   null
  ],
  [
   1.1,
   0.821,
   null,
   null,
   null,
   null,
   null
  ],
  [
   1.12,
   null,
   null,
   null,
   null,
   null,
   null
  ]
 ],
 "shares": true
}

Punch card when things happen

Open in Chart Studio →

punch-card

Data PunchData — { times?: (string | Date)[] (instants, ISO 8601 with their time, binned by weekday and hour in the zone); weights?: number[] (one to each time, 1 each where none); keys?: string[] (each instant's row key, as its table names it, one to each time); cells?: { weekday: string | number (Monday, Mon, or 1 Monday to 7 Sunday); hour: number (0 to 23); value: number }[]; unit?: string; unitOne?: string (its singular, after a value of one) } (times or cells, one or the other)

The options Punch card takes.
OptionKindDefaultTakes
titleTitletitle""text
contextContext: the unit and the periodtitle""text
figureHeadline figure, as writtentitle""text
xAxisX axisaxestruetoggle
yAxisY axisaxestruetoggle
weekStartWeeks begin onaxes"locale"locale · monday · sunday · saturday · friday
markEach hour asshape"dot"dot · tint
clockHours byaxes"24-hour"24-hour · 12-hour
zoneTime zone (IANA name)axes""text
valuesCounts (under tint)valuesfalsetoggle
roundingMoney: a half roundedvalues"half-away"half-away · half-even
negativesMoney: a negative writtenvalues"minus"minus · brackets
Sample data
{
 "times": [
  "2025-09-01T03:40",
  "2025-09-01T08:12",
  "2025-09-01T09:59",
  "2025-09-01T09:03",
  "2025-09-01T10:01",
  "2025-09-01T10:04",
  "2025-09-01T11:55",
  "2025-09-01T11:48",
  "2025-09-01T11:44",
  "2025-09-01T12:37",
  "2025-09-01T13:12",
  "2025-09-01T13:53",
  "2025-09-01T13:04",
  "2025-09-01T14:08",
  "2025-09-01T14:01",
  "2025-09-01T14:42",
  "2025-09-01T15:51",
  "2025-09-01T15:49",
  "2025-09-01T15:50",
  "2025-09-01T16:02",
  "2025-09-01T16:20",
  "2025-09-01T16:09",
  "2025-09-01T17:22",
  "2025-09-01T17:17",
  "2025-09-01T17:47",
  "2025-09-01T18:52",
  "2025-09-02T08:05",
  "2025-09-02T09:31",
  "2025-09-02T09:27",
  "2025-09-02T09:17",
  "2025-09-02T10:04",
  "2025-09-02T10:46",
  "2025-09-02T10:12",
  "2025-09-02T11:51",
  "2025-09-02T11:36",
  "2025-09-02T11:37",
  "2025-09-02T12:14",
  "2025-09-02T12:28",
  "2025-09-02T13:37",
  "2025-09-02T13:40",
  "2025-09-02T13:13",
  "2025-09-02T14:37",
  "2025-09-02T14:00",
  "2025-09-02T14:16",
  "2025-09-02T15:45",
  "2025-09-02T15:25",
  "2025-09-02T15:22",
  "2025-09-02T16:15",
  "2025-09-02T16:17",
  "2025-09-02T16:50",
  "2025-09-02T17:35",
  "2025-09-02T17:03",
  "2025-09-02T17:52",
  "2025-09-02T18:26",
  "2025-09-02T20:17",
  "2025-09-03T04:16",
  "2025-09-03T08:58",
  "2025-09-03T09:13",
  "2025-09-03T09:29",
  "2025-09-03T09:23",
  "2025-09-03T10:30",
  "2025-09-03T10:56",
  "2025-09-03T10:46",
  "2025-09-03T11:54",
  "2025-09-03T11:23",
  "2025-09-03T11:35",
  "2025-09-03T12:27",
  "2025-09-03T12:20",
  "2025-09-03T13:53",
  "2025-09-03T13:52",
  "2025-09-03T13:10",
  "2025-09-03T14:20",
  "2025-09-03T14:02",
  "2025-09-03T14:08",
  "2025-09-03T15:48",
  "2025-09-03T15:14",
  "2025-09-03T15:33",
  "2025-09-03T16:11",
  "2025-09-03T16:36",
  "2025-09-03T16:38",
  "2025-09-03T17:54",
  "2
…

Smith chart an n-port's S11 across a sweep on the reflection plane, its best match, VSWR circle and bandwidth

Open in Chart Studio →

smith-chart

Data SmithData — { nport: { ports: number; parameter: "S"; frequencies: number[] (Hz, rising); references: number[] (ohms, one a port, above naught); matrices: { re: number[]; im: number[] }[] (one a frequency, each ports × ports row by row: entry r × ports + c is row r + 1, column c + 1) }; markers?: { frequency: number (Hz, in the sweep); name?: string }[] }

The options Smith chart takes.
OptionKindDefaultTakes
titleTitletitle""text
contextContext: the unit and the periodtitle""text
figureHeadline figure, as writtentitle""text
gridGrid linesaxestruetoggle
referenceThe reference impedance, in ohms (naught: port one's)shape00 to 1000, step 1
vswrThe VSWR the ring stands atshape21.01 to 20, step 0.01
bandwidthAtThe VSWR the bandwidth is read at (naught: none)shape20 to 20, step 0.01
resistancesThe circles of constant resistance, in units of the referenceaxes"0.2 0.5 1 2 5"text
reactancesThe arcs of constant reactance, each both ways, in units of the referenceaxes"0.2 0.5 1 2 5"text
Sample data
{
 "nport": {
  "ports": 1,
  "parameter": "S",
  "frequencies": [
   2200000000,
   2205000000,
   2210000000,
   2215000000,
   2220000000,
   2225000000,
   2230000000,
   2235000000,
   2240000000,
   2245000000,
   2250000000,
   2255000000,
   "… 89 more"
  ],
  "references": [
   50
  ],
  "matrices": [
   {
    "re": [
     -0.6081844812467412
    ],
    "im": [
     0.6511351317991768
    ]
   },
   {
    "re": [
     -0.6009894466090558
    ],
    "im": [
     0.6531051765534381
    ]
   },
   {
    "re": [
     -0.5922176536218237
    ],
    "im": [
     0.6549566914647335
    ]
   },
   {
    "re": [
     -0.5829224339071244
    ],
    "im": [
     0.6584483481908224
    ]
   },
   {
    "re": [
     -0.5734130962654008
    ],
    "im": [
     0.6607964596976209
    ]
   },
   {
    "re": [
     -0.5630875010674586
    ],
    "im": [
     0.6636634008751889
    ]
   },
   {
    "re": [
     -0.5525458721357651
    ],
    "im": [
     0.6662230717525228
    ]
   },
   {
    "re": [
     -0.5423703781944549
    ],
    "im": [
     0.6689041512474221
    ]
   },
   {
    "re": [
     -0.5322453470474201
    ],
    "im": [
     0.6690076560137194
    ]
   },
   {
    "re": [
     -0.519059752650852
    ],
    "im": [
     0.672506083594073
    ]
   },
   {
    "re": [
     -0.509186591058144
    ],
    "im": [
     0.6742975478343008
    ]
   },
   {
    "re": [
     -0.49653157521911556
    ],
    "im": [
     0.6745944114671029
    ]
   },
   {
    "re": [
     -0.48430776491278793
    ],
    "im": [
     0.6752887973375682
    ]
   },
   {
    "re": [
     -0.4696481078639392
    ],
    "im": [
     0.6756517084704173
    ]
   },
   {
    "re": [
     -0.45635053228867817
    ],
    "im": [
     0.678193096907388
    ]
   },
   {
    "re": [
     -0.444459887
…

Cross-plot one series of a well against another, a point a sample coloured by a third, over the host's lines

Open in Chart Studio →

cross-plot

Data CrossPlotData — { well: Well (a name; measuredDepth: { unit: "m" | "ft"; values: number[] }; series: { mnemonic, unit, description: string; values: (number | null)[] }[]); x, y, colour: { series: string (a mnemonic of the well's); lo?: number; hi?: number }; lines?: { name: string; points: { x: number; y: number }[] (two or more); marks?: { x: number; y: number }[] }[] (three at most); leaveOut?: boolean (a value at or under naught on a log axis left out and counted) }

The options Cross-plot takes.
OptionKindDefaultTakes
titleTitletitle""text
contextContext: the unit and the periodtitle""text
figureHeadline figure, as writtentitle""text
xAxisX axisaxestruetoggle
xTitleX axis titleaxes""text
yAxisY axisaxestruetoggle
yTitleY axis titleaxes""text
gridGrid linesaxestruetoggle
legendSeries names and keylegendtruetoggle
xLogThe x on log tenaxesfalsetoggle
yLogThe y on log tenaxesfalsetoggle
yReversedThe y increasing downwardaxesfalsetoggle
densityDrawn as a density, each cell by how many points fall in itshapefalsetoggle
Sample data
{
 "well": {
  "name": "Harrow 1",
  "identification": "Sample well",
  "measuredDepth": {
   "unit": "m",
   "values": [
    2400,
    2400.1524,
    2400.3048,
    2400.4572,
    2400.6096,
    2400.762,
    2400.9144,
    2401.0668,
    2401.2192,
    2401.3716,
    2401.524,
    2401.6764,
    "… 1301 more"
   ]
  },
  "series": [
   {
    "mnemonic": "GR",
    "unit": "API",
    "description": "Gamma ray",
    "values": {
     "0": 109.78314256874972,
     "1": 108.807980899252,
     "2": 109.25877755849423,
     "3": 115.59876979205168,
     "4": 113.3540868750264,
     "5": 116.92031121282453,
     "6": 112.57170596241541,
     "7": 111.81364291265376,
     "8": 111.73717747018335,
     "9": 112.26934652866596,
     "10": 113.5768132373995,
     "11": 112.09053876994341,
     "12": 111.64623230890528,
     "13": 109.69355173381831,
     "14": 114.33400103019797,
     "15": 110.29416711718238,
     "16": 113.88987488659919,
     "17": 113.26660894091114,
     "18": 116.01447456013199,
     "19": 114.47509115398931,
     "20": 106.40120949512487,
     "21": 112.7286905373213,
     "22": 115.16837125803623,
     "23": 117.24398911193724,
     "24": 110.6444741212999,
     "25": 115.34068453356149,
     "26": 110.37199034385104,
     "27": 118.44352145208916,
     "28": 113.28747625029013,
     "29": 109.18017100834653,
     "30": 107.56210950296581,
     "31": 110.19053832968142,
     "32": 109.93507056807536,
     "33": 111.26603571854491,
     "34": 106.9351095171148,
     "35": 108.33563567534625,
     "36": 104.43930144592511,
     "37": 113.33151736293905,
     "38": 107.92377711634043,
     "39": 108.17969559565915,
     "40": 105.94197186918318,
     "41": 110.9793194948882,
     "42": 115.28226502205891,
     "43": 116.57712190334007,
     "44": 111.24649743
…

Against a target

2 charts

Gauge one metric

Open in Chart Studio →

gauge

Data GaugeData — { label: string; value: number; min: number; max: number; target?: number; unit?: string; unitOne?: string (its singular, after a value of one) }; observations?: { bonds?: number[] (each strictly between 0 and 1); carried?: string[]; landed?: string[] } (the one measure's)

The options Gauge takes.
OptionKindDefaultTakes
titleTitletitle""text
contextContext: the unit and the periodtitle""text
figureHeadline figure, as writtentitle""text
sweepSweepshape"240"180 · 240 · 270
thicknessArc thicknessshape0.150.05 to 0.5, step 0.01
valuesValue labelsvaluestruetoggle
roundingMoney: a half roundedvalues"half-away"half-away · half-even
negativesMoney: a negative writtenvalues"minus"minus · brackets
Sample data
{
 "label": "Conversion",
 "value": 3.8,
 "min": 0,
 "max": 6,
 "target": 4,
 "unit": "%"
}

Bullet against a target

Open in Chart Studio →

bullet

Data BulletData — { rows: { label: string; value: number; target: number; bands: number[] }[]; unit?: string (one for every row; an ISO 4217 code writes the values as money); unitOne?: string (its singular, after a value of one) }; observations?: { bonds?: number[] (each strictly between 0 and 1); carried?: string[]; landed?: string[] } (the one measure's)

The options Bullet takes.
OptionKindDefaultTakes
titleTitletitle""text
contextContext: the unit and the periodtitle""text
figureHeadline figure, as writtentitle""text
yAxisY axisaxestruetoggle
legendSeries names and keylegendtruetoggle
valuesValue labelsvaluestruetoggle
sharedOne scale for every rowaxesfalsetoggle
roundingMoney: a half roundedvalues"half-away"half-away · half-even
negativesMoney: a negative writtenvalues"minus"minus · brackets
Sample data
{
 "rows": [
  {
   "label": "Revenue £k",
   "value": 270,
   "target": 250,
   "bands": [
    150,
    225,
    300
   ]
  },
  {
   "label": "Margin %",
   "value": 22.5,
   "target": 26,
   "bands": [
    20,
    25,
    30
   ]
  },
  {
   "label": "Orders",
   "value": 1620,
   "target": 1500,
   "bands": [
    1000,
    1400,
    2000
   ]
  },
  {
   "label": "New users",
   "value": 318,
   "target": 400,
   "bands": [
    200,
    350,
    500
   ]
  },
  {
   "label": "NPS",
   "value": 41,
   "target": 45,
   "bands": [
    20,
    40,
    60
   ]
  }
 ]
}

Hue Web Components

13 charts

Choropleth value by region

Open in Chart Studio →

choropleth

Data ChoroplethData — { values: Record<regionId, number>; label: string; unit?: string; unitOne?: string (its singular, after a value of one); regions?: { id; name; rings: number[][] }[] }

The options Choropleth takes.
OptionKindDefaultTakes
titleTitletitle""text
contextContext: the unit and the periodtitle""text
figureHeadline figure, as writtentitle""text
regionsRegionsshape"countries"countries · world regions · country regions · US states · UK regions
countryCountryshape""text
projectionProjectionshape"equal-earth"equal-earth · equirectangular · mercator
graticuleGraticuleaxestruetoggle
scaleScaleshape"quantile"quantile · log · linear
classesClassesshape63 to 9, step 1
bordersBordersshapetruetoggle
legendColour keylegendtruetoggle
roundingMoney: a half roundedvalues"half-away"half-away · half-even
negativesMoney: a negative writtenvalues"minus"minus · brackets
Sample data
{
 "label": "GDP per person",
 "unit": "$",
 "values": {
  "AFG": 507,
  "AGO": 2791,
  "ALB": 5353,
  "ARE": 43103,
  "ARG": 9912,
  "ARM": 4622,
  "ATA": 200000,
  "ATF": 114286,
  "AUS": 55060,
  "AUT": 50138,
  "AZE": 4794,
  "BDI": 261,
  "BEL": 46421,
  "BEN": 1219,
  "BFA": 787,
  "BGD": 1856,
  "BGR": 9828,
  "BHS": 34862,
  "BIH": 6108,
  "BLR": 6663,
  "BLZ": 4814,
  "BOL": 3552,
  "BRA": 8717,
  "BRN": 31086,
  "BTN": 3315,
  "BWA": 7961,
  "CAF": 468,
  "CAN": 46195,
  "CHE": 81994,
  "CHL": 14896,
  "CHN": 10262,
  "CIV": 2276,
  "CMR": 1507,
  "COD": 581,
  "COG": 2280,
  "COL": 6429,
  "CRI": 12244,
  "CUB": 8825,
  "CYN": 11043,
  "CYP": 20815,
  "CZE": 23495,
  "DEU": 46445,
  "DJI": 3414,
  "DNK": 60170,
  "DOM": 8282,
  "DZA": 3974,
  "ECU": 6184,
  "EGY": 3019,
  "ERI": 340,
  "ESH": 1504,
  "ESP": 29600,
  "EST": 23723,
  "ETH": 856,
  "FIN": 48783,
  "FJI": 6176,
  "FLK": 82990,
  "FRA": 40494,
  "GAB": 7767,
  "GBR": 42330,
  "GEO": 4698,
  "GHA": 2202,
  "GIN": 963,
  "GMB": 778,
  "GNB": 697,
  "GNQ": 8131,
  "GRC": 19582,
  "GRL": 54264,
  "GTM": 4620,
  "GUY": 6609,
  "HND": 2575,
  "HRV": 14936,
  "HTI": 1272,
  "HUN": 16732,
  "IDN": 4136,
  "IND": 2100,
  "IRL": 78661,
  "IRN": 5476,
  "IRQ": 5955,
  "ISL": 66945,
  "ISR": 43592,
  "ITA": 33228,
  "JAM": 5582,
  "JOR": 4405,
  "JPN": 40247,
  "KAZ": 9812,
  "KEN": 1817,
  "KGZ": 1309,
  "KHM": 1643,
  "KOR": 31846,
  "KOS": 4417,
  "KWT": 32000,
  "LAO": 2535,
  "LBN": 7584,
  "LBR": 622,
  "LBY": 7686,
  "LKA": 3853,
  "LSO": 1118,
  "LTU": 19602,
  "LUX": 114703,
  "LVA": 17828,
  "MAR": 3282,
  "MDA": 4503,
  "MDG": 523,
  "MEX": 9946,
  "MKD": 6022,
  "MLI": 879,
  "MMR": 1408,
  "MNE": 8908,
  "MNG": 4340,
  "MOZ": 504,
  "MRT": 1679,
  "MWI": 412,
  "MYS": 11414,
  "NAM": 4957,
  "NCL
…

flow-map

Data FlowData — { routes: { from: { name; lon; lat }; to: { name; lon; lat }; value: number }[]; unit?: string; unitOne?: string (its singular, after a value of one); unplaced?: { from; to; value }[] }; observationsOf?: Record<origin name, { bonds?: number[] (each strictly between 0 and 1); carried?: string[]; landed?: string[] }>

The options Flow takes.
OptionKindDefaultTakes
titleTitletitle""text
contextContext: the unit and the periodtitle""text
figureHeadline figure, as writtentitle""text
projectionProjectionshape"equal-earth"equal-earth · equirectangular · mercator
graticuleGraticuleaxestruetoggle
legendSeries names and keylegendtruetoggle
stripesEvery series in its pattern, for printlegendfalsetoggle
curveRouteshape"great circle"great circle · straight
widthWidest routeshape51 to 10, step 0.5
valuesName the placesvaluestruetoggle
roundingMoney: a half roundedvalues"half-away"half-away · half-even
negativesMoney: a negative writtenvalues"minus"minus · brackets
Sample data
{
 "unit": "k TEU",
 "routes": [
  {
   "from": {
    "name": "Shanghai",
    "lon": 121.47,
    "lat": 31.23
   },
   "to": {
    "name": "Rotterdam",
    "lon": 4.48,
    "lat": 51.92
   },
   "value": 820
  },
  {
   "from": {
    "name": "Shanghai",
    "lon": 121.47,
    "lat": 31.23
   },
   "to": {
    "name": "Los Angeles",
    "lon": -118.24,
    "lat": 34.05
   },
   "value": 760
  },
  {
   "from": {
    "name": "Singapore",
    "lon": 103.82,
    "lat": 1.35
   },
   "to": {
    "name": "Rotterdam",
    "lon": 4.48,
    "lat": 51.92
   },
   "value": 540
  },
  {
   "from": {
    "name": "Singapore",
    "lon": 103.82,
    "lat": 1.35
   },
   "to": {
    "name": "Dubai",
    "lon": 55.27,
    "lat": 25.2
   },
   "value": 380
  },
  {
   "from": {
    "name": "Rotterdam",
    "lon": 4.48,
    "lat": 51.92
   },
   "to": {
    "name": "New York",
    "lon": -74,
    "lat": 40.71
   },
   "value": 410
  },
  {
   "from": {
    "name": "Dubai",
    "lon": 55.27,
    "lat": 25.2
   },
   "to": {
    "name": "Mumbai",
    "lon": 72.88,
    "lat": 19.08
   },
   "value": 290
  },
  {
   "from": {
    "name": "Santos",
    "lon": -46.33,
    "lat": -23.96
   },
   "to": {
    "name": "Rotterdam",
    "lon": 4.48,
    "lat": 51.92
   },
   "value": 260
  },
  {
   "from": {
    "name": "Tokyo",
    "lon": 139.69,
    "lat": 35.69
   },
   "to": {
    "name": "Vancouver",
    "lon": -123.12,
    "lat": 49.28
   },
   "value": 240
  },
  {
   "from": {
    "name": "Singapore",
    "lon": 103.82,
    "lat": 1.35
   },
   "to": {
    "name": "Sydney",
    "lon": 151.21,
    "lat": -33.87
   },
   "value": 210
  },
  {
   "from": {
    "name": "Lagos",
    "lon": 3.38,
    "lat": 6.52
   },
   "to": {
    "name": "London",
    "lon": -0.13,
    "lat": 51.51
   },
   "va
…

Calendar a month of days

Open in Chart Studio →

calendar

Data CalendarData — { dates: (string | Date)[] (ISO 8601 or Date, one to each day); values: (number | null)[]; unit?: string; unitOne?: string (its singular, after a value of one) }

The options Calendar takes.
OptionKindDefaultTakes
titleTitletitle""text
contextContext: the unit and the periodtitle""text
figureHeadline figure, as writtentitle""text
monthMonth shown (YYYY-MM, or all)axes""text
weekStartWeeks begin onaxes"locale"locale · monday · sunday · saturday · friday
weekNumbersWeek numbersaxesfalsetoggle
todayMark todayaxestruetoggle
selectedSelected day (YYYY-MM-DD)axes""text
zoneTime zone (IANA name)axes""text
markEach day's value asshape"tint"bar · dot · tint · none
scaleScaleshape"sequential"sequential · diverging · diverging, reversed
valuesValue labelsvaluestruetoggle
roundingMoney: a half roundedvalues"half-away"half-away · half-even
negativesMoney: a negative writtenvalues"minus"minus · brackets
Sample data
{
 "dates": [
  "2025-08-01",
  "2025-08-02",
  "2025-08-03",
  "2025-08-04",
  "2025-08-05",
  "2025-08-06",
  "2025-08-07",
  "2025-08-08",
  "2025-08-09",
  "2025-08-10",
  "2025-08-11",
  "2025-08-12",
  "2025-08-13",
  "2025-08-14",
  "2025-08-15",
  "2025-08-16",
  "2025-08-17",
  "2025-08-18",
  "2025-08-19",
  "2025-08-20",
  "2025-08-21",
  "2025-08-22",
  "2025-08-23",
  "2025-08-24",
  "2025-08-25",
  "2025-08-26",
  "2025-08-27",
  "2025-08-28",
  "2025-08-29",
  "2025-08-30",
  "2025-08-31",
  "2025-09-01",
  "2025-09-02",
  "2025-09-03",
  "2025-09-04",
  "2025-09-05",
  "2025-09-06",
  "2025-09-07",
  "2025-09-08",
  "2025-09-09",
  "2025-09-10",
  "2025-09-11",
  "2025-09-12",
  "2025-09-13",
  "2025-09-14",
  "2025-09-15",
  "2025-09-16",
  "2025-09-17",
  "2025-09-18",
  "2025-09-19",
  "2025-09-20",
  "2025-09-21",
  "2025-09-22",
  "2025-09-23",
  "2025-09-24",
  "2025-09-25",
  "2025-09-26",
  "2025-09-27",
  "2025-09-28",
  "2025-09-29",
  "2025-09-30",
  "2025-10-01",
  "2025-10-02",
  "2025-10-03",
  "2025-10-04",
  "2025-10-05",
  "2025-10-06",
  "2025-10-07",
  "2025-10-08",
  "2025-10-09",
  "2025-10-10",
  "2025-10-11",
  "2025-10-12",
  "2025-10-13",
  "2025-10-14",
  "2025-10-15",
  "2025-10-16",
  "2025-10-17",
  "2025-10-18",
  "2025-10-19",
  "2025-10-20",
  "2025-10-21",
  "2025-10-22",
  "2025-10-23",
  "2025-10-24",
  "2025-10-25",
  "2025-10-26",
  "2025-10-27",
  "2025-10-28",
  "2025-10-29",
  "2025-10-30",
  "2025-10-31"
 ],
 "values": [
  45,
  22,
  31,
  55,
  49,
  49,
  61,
  64,
  40,
  45,
  74,
  72,
  "… 80 more"
 ],
 "unit": "orders"
}

Timeline events on lanes

Open in Chart Studio →

timeline

Data TimelineData — { events: { label: string; date: string | Date (ISO 8601; a day alone is that day); end?: string | Date (a day alone, the whole of it); group?: string }[] }

The options Timeline takes.
OptionKindDefaultTakes
titleTitletitle""text
contextContext: the unit and the periodtitle""text
figureHeadline figure, as writtentitle""text
xAxisX axisaxestruetoggle
yAxisY axisaxestruetoggle
gridGrid linesaxestruetoggle
rangeRangeaxes"All"All · 1M · 3M · 6M · YTD · 1Y
todayToday linevaluestruetoggle
zoneTime zone (IANA name)axes""text
valuesEvent namesvaluestruetoggle
Sample data
{
 "events": [
  {
   "label": "Kick-off",
   "date": "2025-01-13",
   "group": "Product"
  },
  {
   "label": "Design sign-off",
   "date": "2025-03-03",
   "group": "Product"
  },
  {
   "label": "Alpha",
   "date": "2025-04-14",
   "group": "Engineering"
  },
  {
   "label": "Private beta",
   "date": "2025-05-05",
   "end": "2025-07-25",
   "group": "Engineering"
  },
  {
   "label": "Pricing set",
   "date": "2025-06-02",
   "group": "Marketing"
  },
  {
   "label": "Launch event",
   "date": "2025-09-16",
   "group": "Marketing"
  },
  {
   "label": "Code freeze",
   "date": "2025-08-25",
   "end": "2025-09-05",
   "group": "Engineering"
  },
  {
   "label": "1.0",
   "date": "2025-09-16",
   "group": "Engineering"
  },
  {
   "label": "Press tour",
   "date": "2025-09-22",
   "end": "2025-10-03",
   "group": "Marketing"
  },
  {
   "label": "Roadmap review",
   "date": "2025-10-20",
   "group": "Product"
  },
  {
   "label": "1.1",
   "date": "2025-11-17",
   "group": "Engineering"
  }
 ]
}

Status timeline states over time

Open in Chart Studio →

status-timeline

Data StatusData — { stretches: { row: string; start: string | Date (ISO 8601; a day alone is that day); end: string | Date (a day alone, the whole of it); state: string }[] }

The options Status timeline takes.
OptionKindDefaultTakes
titleTitletitle""text
contextContext: the unit and the periodtitle""text
figureHeadline figure, as writtentitle""text
xAxisX axisaxestruetoggle
yAxisY axisaxestruetoggle
gridGrid linesaxestruetoggle
legendSeries names and keylegendtruetoggle
stripesEvery series in its pattern, for printlegendfalsetoggle
rangeRangeaxes"All"All · 1M · 3M · 6M · YTD · 1Y
todayToday linevaluestruetoggle
zoneTime zone (IANA name)axes""text
Sample data
{
 "stretches": [
  {
   "row": "Pump 1",
   "start": "2025-10-02T00:00",
   "end": "2025-10-02T14:00",
   "state": "Running"
  },
  {
   "row": "Pump 1",
   "start": "2025-10-02T14:00",
   "end": "2025-10-02T16:30",
   "state": "Maintenance"
  },
  {
   "row": "Pump 1",
   "start": "2025-10-02T16:30",
   "end": "2025-10-04T00:00",
   "state": "Running"
  },
  {
   "row": "Pump 2",
   "start": "2025-10-02T00:00",
   "end": "2025-10-02T06:00",
   "state": "Idle"
  },
  {
   "row": "Pump 2",
   "start": "2025-10-02T06:00",
   "end": "2025-10-03T09:15",
   "state": "Running"
  },
  {
   "row": "Pump 2",
   "start": "2025-10-03T09:15",
   "end": "2025-10-03T11:40",
   "state": "Fault"
  },
  {
   "row": "Pump 2",
   "start": "2025-10-03T11:40",
   "end": "2025-10-04T00:00",
   "state": "Idle"
  },
  {
   "row": "Pump 3",
   "start": "2025-10-02T00:00",
   "end": "2025-10-03T00:00",
   "state": "Running"
  },
  {
   "row": "Pump 3",
   "start": "2025-10-03T00:00",
   "end": "2025-10-03T08:00",
   "state": "Idle"
  },
  {
   "row": "Pump 3",
   "start": "2025-10-03T08:00",
   "end": "2025-10-04T00:00",
   "state": "Running"
  },
  {
   "row": "Pump 4",
   "start": "2025-10-02T00:00",
   "end": "2025-10-02T12:00",
   "state": "Running"
  },
  {
   "row": "Pump 4",
   "start": "2025-10-02T18:00",
   "end": "2025-10-03T20:00",
   "state": "Running"
  },
  {
   "row": "Pump 4",
   "start": "2025-10-03T20:00",
   "end": "2025-10-04T00:00",
   "state": "Fault"
  }
 ]
}

Gantt a schedule

Open in Chart Studio →

gantt

Data GanttData — { tasks: { label: string; start: number | string; end: number | string; group?: string; progress?: number (a share, 0 to 1) }[]; today?: number | string } (start and end days from the project's start, or instants as ISO 8601 text, laid on the local calendar); observationsOf?: Record<group name, { bonds?: number[] (each strictly between 0 and 1); carried?: string[]; landed?: string[] }>

The options Gantt takes.
OptionKindDefaultTakes
titleTitletitle""text
contextContext: the unit and the periodtitle""text
figureHeadline figure, as writtentitle""text
xAxisX axisaxestruetoggle
yAxisY axisaxestruetoggle
gridGrid linesaxestruetoggle
legendSeries names and keylegendtruetoggle
stripesEvery series in its pattern, for printlegendfalsetoggle
progressShow progressshapetruetoggle
todayToday linevaluestruetoggle
Sample data
{
 "today": 23,
 "tasks": [
  {
   "label": "Discovery",
   "start": 0,
   "end": 8,
   "group": "Plan",
   "progress": 1
  },
  {
   "label": "Requirements",
   "start": 5,
   "end": 14,
   "group": "Plan",
   "progress": 1
  },
  {
   "label": "Design",
   "start": 12,
   "end": 24,
   "group": "Build",
   "progress": 0.8
  },
  {
   "label": "Backend",
   "start": 18,
   "end": 40,
   "group": "Build",
   "progress": 0.35
  },
  {
   "label": "Frontend",
   "start": 22,
   "end": 44,
   "group": "Build",
   "progress": 0.2
  },
  {
   "label": "Testing",
   "start": 36,
   "end": 52,
   "group": "Ship",
   "progress": 0
  },
  {
   "label": "Rollout",
   "start": 50,
   "end": 58,
   "group": "Ship",
   "progress": 0
  }
 ]
}

Weather board a seven-day forecast

Open in Chart Studio →

weather

Data WeatherData — { city: string; days: { date; hi; lo; rain; wind; code }[]; hourly: number[][] (24 per day); selected: number; units?: { temperature?; rain?; wind? } (the numbers' units, where known: none is printed without them); attribution?: string (what the data's source asks to be said with it) }

The options Weather board takes.
OptionKindDefaultTakes
titleTitletitle""text
contextContext: the unit and the periodtitle""text
figureHeadline figure, as writtentitle""text
unitsUnitsvalues"°C"°C · °F
rainRainvaluestruetoggle
windWindvaluesfalsetoggle
Sample data
{
 "city": "London",
 "days": [
  {
   "date": "2026-09-23",
   "hi": 19,
   "lo": 9,
   "rain": 0,
   "wind": 14,
   "code": 1
  },
  {
   "date": "2026-09-24",
   "hi": 20,
   "lo": 11,
   "rain": 0,
   "wind": 31,
   "code": 3
  },
  {
   "date": "2026-09-25",
   "hi": 22,
   "lo": 13,
   "rain": 3.9,
   "wind": 19,
   "code": 61
  },
  {
   "date": "2026-09-26",
   "hi": 21,
   "lo": 13,
   "rain": 1.8,
   "wind": 27,
   "code": 2
  },
  {
   "date": "2026-09-27",
   "hi": 18,
   "lo": 11,
   "rain": 3.6,
   "wind": 31,
   "code": 80
  },
  {
   "date": "2026-09-28",
   "hi": 16,
   "lo": 9,
   "rain": 0.1,
   "wind": 28,
   "code": 0
  },
  {
   "date": "2026-09-29",
   "hi": 14,
   "lo": 7,
   "rain": 1.7,
   "wind": 19,
   "code": 3
  }
 ],
 "selected": 0,
 "units": {
  "temperature": "°C",
  "rain": "mm",
  "wind": "km/h"
 },
 "hourly": [
  [
   11.5,
   10.5,
   9.7,
   9.2,
   9,
   9.2,
   9.7,
   10.5,
   11.5,
   12.7,
   14,
   15.3,
   "… 12 more"
  ],
  [
   13.3,
   12.3,
   11.6,
   11.2,
   11,
   11.2,
   11.6,
   12.3,
   13.3,
   14.3,
   15.5,
   16.7,
   "… 12 more"
  ],
  [
   15.3,
   14.3,
   13.6,
   13.2,
   13,
   13.2,
   13.6,
   14.3,
   15.3,
   16.3,
   17.5,
   18.7,
   "… 12 more"
  ],
  [
   15,
   14.2,
   13.5,
   13.1,
   13,
   13.1,
   13.5,
   14.2,
   15,
   16,
   17,
   18,
   "… 12 more"
  ],
  [
   12.8,
   12,
   11.5,
   11.1,
   11,
   11.1,
   11.5,
   12,
   12.8,
   13.6,
   14.5,
   15.4,
   "… 12 more"
  ],
  [
   10.8,
   10,
   9.5,
   9.1,
   9,
   9.1,
   9.5,
   10,
   10.8,
   11.6,
   12.5,
   13.4,
   "… 12 more"
  ],
  [
   8.8,
   8,
   7.5,
   7.1,
   7,
   7.1,
   7.5,
   8,
   8.8,
   9.6,
   10.5,
   11.4,
   "… 12 more"
  ]
 ]
}

Clock the time in a zone, on a face

Open in Chart Studio →

clock

Data ClockData — { zone?: string (an IANA name, the device's where none); label?: string (said for its city); reading?: { wall: number; mono: number; origin: number } (the two clocks read for this picture); heldAt?: { wall; mono; origin } (held there) }

The options Clock takes.
OptionKindDefaultTakes
titleTitletitle""text
contextContext: the unit and the periodtitle""text
dialDialshape"12 hours"12 hours · 24 hours
numeralsNumeralsshape"all"all · quarters · none
ticksTicksshape"minutes"minutes · hours · none
secondsSecondsvaluestruetoggle
glideGlidevaluesfalsetoggle
dateDatevaluesfalsetoggle
Sample data
{
 "zone": "Europe/London",
 "reading": {
  "wall": 1768471770000,
  "mono": 0,
  "origin": 0
 }
}

Digital clock the time in a zone, in figures

Open in Chart Studio →

digital-clock

Data ClockData — { zone?: string (an IANA name, the device's where none); label?: string (said for its city); reading?: { wall: number; mono: number; origin: number } (the two clocks read for this picture); heldAt?: { wall; mono; origin } (held there) }

The options Digital clock takes.
OptionKindDefaultTakes
titleTitletitle""text
contextContext: the unit and the periodtitle""text
clockClockvalues"locale"locale · 24-hour · 12-hour
secondsSecondsvaluestruetoggle
dateDatevaluestruetoggle
Sample data
{
 "zone": "Europe/London",
 "reading": {
  "wall": 1768471770000,
  "mono": 0,
  "origin": 0
 }
}

World clock the time in several zones

Open in Chart Studio →

world-clock

Data WorldClockData — { zones: { zone: string (an IANA name); label?: string }[]; here?: string (the zone the others are told against, the device's where none); reading?: { wall: number; mono: number; origin: number }; heldAt?: { wall; mono; origin } }

The options World clock takes.
OptionKindDefaultTakes
titleTitletitle""text
contextContext: the unit and the periodtitle""text
formFormshape"digital"digital · analogue
clockClockvalues"locale"locale · 24-hour · 12-hour
secondsSecondsvaluesfalsetoggle
Sample data
{
 "here": "Europe/London",
 "zones": [
  {
   "zone": "America/New_York"
  },
  {
   "zone": "Asia/Kolkata"
  },
  {
   "zone": "Asia/Tokyo"
  },
  {
   "zone": "Australia/Sydney"
  }
 ],
 "reading": {
  "wall": 1768471770000,
  "mono": 0,
  "origin": 0
 }
}

Day dial a day's events round a clock face

Open in Chart Studio →

day-dial

Data DayDialData — { events: { label: string; start: string; end: string (each an ISO 8601 instant, a wall time in the zone, 2026-10-17T09:00, or a time of day alone, 09:00, for a routine); group?: string }[]; zone?: string; reading?: { wall; mono; origin }; heldAt?: { wall; mono; origin }; observationsOf?: Record<group name, { bonds?: number[] (each strictly between 0 and 1); carried?: string[]; landed?: string[] }> }

The options Day dial takes.
OptionKindDefaultTakes
titleTitletitle""text
contextContext: the unit and the periodtitle""text
legendSeries names and keylegendtruetoggle
dayDay (YYYY-MM-DD)axes""text
nowNowvaluestruetoggle
clockClockvalues"locale"locale · 24-hour · 12-hour
Sample data
{
 "zone": "Europe/London",
 "reading": {
  "wall": 1768471770000,
  "mono": 0,
  "origin": 0
 },
 "events": [
  {
   "label": "Sleep",
   "start": "23:00",
   "end": "07:00",
   "group": "Rest"
  },
  {
   "label": "Run",
   "start": "07:15",
   "end": "08:00",
   "group": "Health"
  },
  {
   "label": "Deep work",
   "start": "09:00",
   "end": "12:00",
   "group": "Work"
  },
  {
   "label": "Lunch",
   "start": "12:30",
   "end": "13:15",
   "group": "Rest"
  },
  {
   "label": "Meetings",
   "start": "13:30",
   "end": "15:00",
   "group": "Work"
  },
  {
   "label": "Writing",
   "start": "15:00",
   "end": "17:30",
   "group": "Work"
  },
  {
   "label": "Dinner",
   "start": "19:00",
   "end": "20:00",
   "group": "Rest"
  }
 ]
}

Countdown the time left

Open in Chart Studio →

countdown

Data CountdownData — { until?: string (an ISO 8601 instant) | length?: string | number (an ISO 8601 duration, PT10M, or seconds); since?: string (where the ring is full); label?: string; zone?: string; state?: TimerState (a length's timer); reading?: { wall; mono; origin }; heldAt?: { wall; mono; origin } }

The options Countdown takes.
OptionKindDefaultTakes
titleTitletitle""text
contextContext: the unit and the periodtitle""text
largestLargest unitvalues"auto"auto · days · hours · minutes
ringRingshapetruetoggle
endAt naughtvalues"stop"stop · over
secondsSecondsvaluestruetoggle
Sample data
{
 "label": "Sale ends",
 "until": "2026-01-15T10:20:00Z",
 "since": "2026-01-15T09:50:00Z",
 "zone": "Europe/London",
 "reading": {
  "wall": 1768471770000,
  "mono": 0,
  "origin": 0
 }
}

Stopwatch the time run, and its laps

Open in Chart Studio →

stopwatch

Data StopwatchData — { state?: TimerState ({ running: boolean; banked: number; from?: reading; laps: number[]; origin: number; seen?: reading }); reading?: { wall: number; mono: number; origin: number } }

The options Stopwatch takes.
OptionKindDefaultTakes
titleTitletitle""text
contextContext: the unit and the periodtitle""text
hundredthsHundredthsvaluestruetoggle
lapsLapsvaluestruetoggle
Sample data
{
 "state": {
  "running": false,
  "banked": 83450,
  "laps": [
   21300,
   43010,
   63870
  ],
  "origin": 0,
  "seen": {
   "wall": 1768471770000,
   "mono": 0,
   "origin": 0
  }
 },
 "reading": {
  "wall": 1768471770000,
  "mono": 0,
  "origin": 0
 }
}

The kernel's own

2 charts

The columns of a chamber a recorded run of the core, not a measurement: the kernel's own

chamber

Data ChamberData — { concepts: { label: string; position: number; lightness: number; saturation: number }[] }

The options The columns of a chamber takes.
OptionKindDefaultTakes
titleTitletitle""text
contextContext: the unit and the periodtitle""text
figureHeadline figure, as writtentitle""text
xAxisX axisaxestruetoggle
xTitleX axis titleaxes"concept, by its position on the cycle"text
yAxisY axisaxestruetoggle
yTitleY axis titleaxes"lightness"text
gridGrid linesaxestruetoggle
topThe top line: L = 1, never reachedaxestruetoggle
valuesValue labelsvaluesfalsetoggle
Sample data
{
 "concepts": [
  {
   "label": "10°",
   "position": 10,
   "lightness": 0.6141569260349786,
   "saturation": 0.7916666666666666
  },
  {
   "label": "55°",
   "position": 55,
   "lightness": 0.5140990884130953,
   "saturation": 0.7583333333333333
  },
  {
   "label": "130°",
   "position": 130,
   "lightness": 0.49507824010567497,
   "saturation": 0.9916666666666666
  },
  {
   "label": "200°",
   "position": 200,
   "lightness": 0.5140990884130954,
   "saturation": 0.7583333333333333
  },
  {
   "label": "245°",
   "position": 245,
   "lightness": 0.6141569260349786,
   "saturation": 0.7916666666666667
  },
  {
   "label": "300°",
   "position": 300,
   "lightness": 0.6022276615677075,
   "saturation": 0.975
  },
  {
   "label": "340°",
   "position": 340,
   "lightness": 0.6053494707220047,
   "saturation": 0.8916666666666666
  }
 ]
}

The series of a loop a recorded run of the core, not a measurement: the kernel's own

loop

Data LoopData — { turns: number[]; concepts: { label: string; position: number; lightness: (number | null)[]; saturation: number }[] }

The options The series of a loop takes.
OptionKindDefaultTakes
titleTitletitle""text
contextContext: the unit and the periodtitle""text
figureHeadline figure, as writtentitle""text
xAxisX axisaxestruetoggle
xTitleX axis titleaxes"turn"text
yAxisY axisaxestruetoggle
yTitleY axis titleaxes"lightness"text
gridGrid linesaxestruetoggle
topThe top line: L = 1, never reachedaxestruetoggle
legendSeries names and keylegendtruetoggle
stripesEvery series in its pattern, for printlegendfalsetoggle
Sample data
{
 "turns": [
  1,
  2,
  3,
  4,
  5,
  6,
  7,
  8,
  9,
  10,
  11,
  12,
  "… 32 more"
 ],
 "concepts": [
  {
   "label": "10°",
   "position": 10,
   "lightness": [
    0.22916666666666666,
    0.27199074074074076,
    0.27199074074074076,
    0.27199074074074076,
    0.27199074074074076,
    0.27199074074074076,
    0.27199074074074076,
    0.27199074074074076,
    0.27199074074074076,
    0.27199074074074076,
    0.27199074074074076,
    0.27199074074074076,
    "… 32 more"
   ],
   "saturation": 0.7916666666666666
  },
  {
   "label": "20°",
   "position": 20,
   "lightness": [
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    0.24305555555555555
   ],
   "saturation": 0.5
  },
  {
   "label": "55°",
   "position": 55,
   "lightness": [
    null,
    null,
    0.20833333333333331,
    0.2138310185185185,
    0.2138310185185185,
    0.2138310185185185,
    0.2138310185185185,
    0.2138310185185185,
    0.2138310185185185,
    0.2138310185185185,
    0.2138310185185185,
    0.2138310185185185,
    0.2138310185185185,
    0.2138310185185185,
    0.2138310185185185,
    0.2138310185185185,
    0.37761622299382713,
    0.38193833255637,
    0.38193833255637,
    0.38193833255637,
    0.38193833255637,
    0.38193833255637,
    0.38193833255637,
    0.38193833255637,
    0.38193833255637,
    0.38193833255637,
    0.38193833255637,
    0.38193833255637,
    0.38193833255637,
    0.381938332
…