{ "$schema": "http://json-schema.org/draft-07/schema#", "$id": "https://insightcharts.dev/schema/insight-spec.json", "title": "InsightCharts spec", "description": "A component described as JSON: { type, ...props }. Render with . Generated from the component manifest.", "oneOf": [ { "$ref": "#/definitions/components/arc-diagram" }, { "$ref": "#/definitions/components/area-chart" }, { "$ref": "#/definitions/components/arrow-chart" }, { "$ref": "#/definitions/components/bar-chart" }, { "$ref": "#/definitions/components/beeswarm-chart" }, { "$ref": "#/definitions/components/big-number" }, { "$ref": "#/definitions/components/block-bar" }, { "$ref": "#/definitions/components/box-plot" }, { "$ref": "#/definitions/components/bubble-network" }, { "$ref": "#/definitions/components/bubble-scale" }, { "$ref": "#/definitions/components/bullet-chart" }, { "$ref": "#/definitions/components/bump-chart" }, { "$ref": "#/definitions/components/calendar-heatmap" }, { "$ref": "#/definitions/components/callout" }, { "$ref": "#/definitions/components/choropleth-map" }, { "$ref": "#/definitions/components/circle-pack" }, { "$ref": "#/definitions/components/curve-rank" }, { "$ref": "#/definitions/components/data-table" }, { "$ref": "#/definitions/components/delta" }, { "$ref": "#/definitions/components/diverging-bar-chart" }, { "$ref": "#/definitions/components/donut-chart" }, { "$ref": "#/definitions/components/dumbbell-chart" }, { "$ref": "#/definitions/components/fan-flow" }, { "$ref": "#/definitions/components/funnel-chart" }, { "$ref": "#/definitions/components/glyph-table" }, { "$ref": "#/definitions/components/headline" }, { "$ref": "#/definitions/components/heatmap" }, { "$ref": "#/definitions/components/histogram" }, { "$ref": "#/definitions/components/icon-array-grid" }, { "$ref": "#/definitions/components/icon-stat" }, { "$ref": "#/definitions/components/legend-key" }, { "$ref": "#/definitions/components/line-chart" }, { "$ref": "#/definitions/components/lollipop-chart" }, { "$ref": "#/definitions/components/nested-shares" }, { "$ref": "#/definitions/components/orbit-chart" }, { "$ref": "#/definitions/components/pictogram-chart" }, { "$ref": "#/definitions/components/pill-rank" }, { "$ref": "#/definitions/components/progress-meter" }, { "$ref": "#/definitions/components/proportional-area" }, { "$ref": "#/definitions/components/prose" }, { "$ref": "#/definitions/components/pull-quote" }, { "$ref": "#/definitions/components/radial-bar-chart" }, { "$ref": "#/definitions/components/radial-spokes" }, { "$ref": "#/definitions/components/ribbon-chart" }, { "$ref": "#/definitions/components/sankey-chart" }, { "$ref": "#/definitions/components/scale-ladder" }, { "$ref": "#/definitions/components/scatter-chart" }, { "$ref": "#/definitions/components/segmented-bar" }, { "$ref": "#/definitions/components/shape-fill" }, { "$ref": "#/definitions/components/slope-chart" }, { "$ref": "#/definitions/components/small-multiples" }, { "$ref": "#/definitions/components/source-note" }, { "$ref": "#/definitions/components/sparkline" }, { "$ref": "#/definitions/components/stat-circles" }, { "$ref": "#/definitions/components/stat-tile" }, { "$ref": "#/definitions/components/step-marker" }, { "$ref": "#/definitions/components/strip-plot" }, { "$ref": "#/definitions/components/timeline-chart" }, { "$ref": "#/definitions/components/treemap" }, { "$ref": "#/definitions/components/unit-blocks" }, { "$ref": "#/definitions/components/waffle-chart" }, { "$ref": "#/definitions/components/annotated-timeline" }, { "$ref": "#/definitions/components/before-after" }, { "$ref": "#/definitions/components/chart-callout" }, { "$ref": "#/definitions/components/chart-tabs" }, { "$ref": "#/definitions/components/comparison-table" }, { "$ref": "#/definitions/components/filter-chips" }, { "$ref": "#/definitions/components/hero-figure" }, { "$ref": "#/definitions/components/kpi-grid" }, { "$ref": "#/definitions/components/linked-charts" }, { "$ref": "#/definitions/components/metric-breakdown" }, { "$ref": "#/definitions/components/poster" }, { "$ref": "#/definitions/components/proportion-statement" }, { "$ref": "#/definitions/components/quote-figure" }, { "$ref": "#/definitions/components/ranked-list" }, { "$ref": "#/definitions/components/scrolly-chart" }, { "$ref": "#/definitions/components/section" }, { "$ref": "#/definitions/components/small-multiple-grid" }, { "$ref": "#/definitions/components/stat-row" }, { "$ref": "#/definitions/components/trend-card" }, { "$ref": "#/definitions/components/atlas-poster" }, { "$ref": "#/definitions/components/comparison-brief" }, { "$ref": "#/definitions/components/count-poster" }, { "$ref": "#/definitions/components/data-explorer" }, { "$ref": "#/definitions/components/executive-brief" }, { "$ref": "#/definitions/components/explainer" }, { "$ref": "#/definitions/components/flow-poster" }, { "$ref": "#/definitions/components/matrix-poster" }, { "$ref": "#/definitions/components/network-poster" }, { "$ref": "#/definitions/components/profile-poster" }, { "$ref": "#/definitions/components/radial-poster" }, { "$ref": "#/definitions/components/ranking-poster" }, { "$ref": "#/definitions/components/report-page" }, { "$ref": "#/definitions/components/scale-poster" }, { "$ref": "#/definitions/components/scorecard" }, { "$ref": "#/definitions/components/social-card" }, { "$ref": "#/definitions/components/story-deck" }, { "$ref": "#/definitions/components/timeline-poster" }, { "$ref": "#/definitions/components/timeline-story" }, { "$ref": "#/definitions/components/visual-essay" } ], "definitions": { "components": { "arc-diagram": { "title": "Arc diagram", "description": "Places entities in order on a line and joins each related pair with a semicircular arc whose thickness is the value of the connection; dots are sized by each entity's total. Use: Connections among up to about 20 entities that have a meaningful order (stops on a line, chapters, age groups, teams by size): trips between stations, trade between neighbours, characters sharing scenes. Avoid: Flows with a direction through stages (use sankey-chart); one source splitting into parts (use fan-flow); a full matrix of every pair where exact values matter (use heatmap); more than about 20 entities or 60 connections (use heatmap).", "type": "object", "properties": { "type": { "const": "arc-diagram" }, "data": { "$ref": "#/definitions/data", "description": "Rows, CSV text, a URL, `{ url, path }`, an async function, or an Arrow-style table. Omit inside ``." }, "transform": { "anyOf": [ { "$ref": "#/definitions/transform" }, { "type": "array", "items": { "$ref": "#/definitions/transform" } } ], "description": "A pipeline of transforms applied before drawing." }, "title": { "type": "string", "description": "The title. One plain statement of what the data shows, with the number and the period (\"Monthly churn fell from 4.2% to 2.1% in 2024\"), or a plain label (\"Monthly churn, 2024\"). One clause, no figures of speech." }, "subtitle": { "type": "string", "description": "Measure, unit, population, period." }, "source": { "type": "string", "description": "Data source, shown as \"Source: ...\"." }, "note": { "type": "string", "description": "Method notes or caveats." }, "height": { "anyOf": [ { "type": "number" }, { "type": "string" } ], "description": "CSS height of the plot. Default 360." }, "aspect": { "type": "number", "description": "Width / height. Overrides `height`." }, "highlight": { "anyOf": [ { "type": "string" }, { "type": "array", "items": { "type": "string" } } ], "description": "The entity (or entities) the title is about. Every other series is drawn in grey." }, "annotations": { "type": "array", "items": { "$ref": "#/definitions/annotation" }, "description": "Reference lines, shaded bands and callouts, in data coordinates." }, "format": { "$ref": "#/definitions/format", "description": "How to print values: `\"compact\"`, `\"percent\"`, `\"currency:USD\"`, `\"{value} kg\"`, Intl options, or a function." }, "legend": { "type": "boolean", "description": "Show the legend. Default: shown when there are two or more series." }, "select": { "anyOf": [ { "type": "boolean" }, { "type": "string" } ], "description": "Make marks clickable to filter. Inside `` the selection filters every other chart. Pass a field name, or `true` to use the chart's category field." }, "option": { "type": "object", "description": "Deep-merged over the generated ECharts option, or a function that receives and returns it. Use it for ECharts settings no prop covers." }, "theme": { "type": "object", "description": "A full theme, `{ light, dark }` partial tokens, or flat tokens applied to both modes. Merged over the surrounding `InsightProvider` theme." }, "mode": { "enum": [ "auto", "system", "light", "dark" ], "description": "`\"auto\"` (default) follows the page, `\"system\"` follows the OS, or force `\"light\"` / `\"dark\"`." }, "renderer": { "enum": [ "auto", "svg", "canvas" ], "description": "`\"auto\"` (default) uses SVG for light charts and canvas for heavy ones." }, "animate": { "type": "boolean", "description": "Set false to disable animation for this chart. Reduced-motion preferences are always respected." }, "lazy": { "type": "boolean", "description": "Mount the chart only when it scrolls within 200px of the viewport. Default true (from `InsightProvider`)." }, "group": { "type": "string", "description": "Link tooltips with other charts sharing this group id." }, "exportable": { "anyOf": [ { "type": "boolean" }, { "type": "array", "items": { "enum": [ "png", "jpeg", "svg", "pdf", "csv", "json" ] } } ], "description": "Show an export menu: `true` or a list of formats from png, jpeg, svg, pdf, csv, json." }, "table": { "type": "boolean", "description": "Show a collapsible \"View data\" table under the chart." }, "alt": { "type": "string", "description": "Accessible description: the chart type and measures, then the main pattern and the notable values." }, "id": { "type": "string", "description": "Stable id for this chart's selection in the shared store." }, "className": { "type": "string", "description": "Class on the figure element." }, "style": { "type": "object", "description": "Inline style on the figure element." }, "from": { "type": "string", "description": "Field naming one end of each connection. With `select: true` a click selects the entity under this field name, so inside `` other charts are filtered on `from`; pass `select: \"\"` to link on the field that holds the entity in the shared rows." }, "to": { "type": "string", "description": "Field naming the other end." }, "value": { "type": "string", "description": "Value field: arc thickness. Omit to count rows. Rows joining the same pair are summed, in either direction." }, "order": { "type": "array", "items": { "type": "string" }, "description": "Entity names in the order they sit on the line. Entities not listed follow in data order." }, "orientation": { "enum": [ "auto", "horizontal", "vertical" ], "description": "Line along the bottom with arcs above, or down the left with arcs to the right. Auto turns vertical on narrow screens.", "$comment": "default: \"auto\"" }, "colorBy": { "enum": [ "series", "none" ], "description": "`series`: each arc in the colour of its first entity; past the size of the theme's palette the extra colours are derived from the theme's own. `none`: every arc in the accent. Default: series while the entities fit the palette (at most 8), none beyond." }, "arcLabels": { "type": "boolean", "description": "Print values at the top of the arcs, largest first, wherever they do not collide. The values that do not fit are printed while their entity is hovered or selected, and every value is in the tooltip.", "$comment": "default: true" }, "names": { "type": "object", "additionalProperties": { "type": "string" }, "description": "Display names for entity keys." } }, "required": [ "type", "from", "to" ], "additionalProperties": false }, "area-chart": { "title": "Area chart", "description": "Shows a quantity over time as a filled area from zero: one series, stacked series, shares of 100%, or a streamgraph. Use: A volume or cumulative quantity over time where the filled magnitude matters; stacked when the total and its composition both matter; percent when only the mix matters; stream for the changing mix of many series over a long period. Avoid: Comparing the trajectories of several series against each other (use line-chart: only the bottom band of a stack has a flat baseline); a few time points (use bar-chart with stack); more than about 6 bands.", "type": "object", "properties": { "type": { "const": "area-chart" }, "data": { "$ref": "#/definitions/data", "description": "Rows, CSV text, a URL, `{ url, path }`, an async function, or an Arrow-style table. Omit inside ``." }, "transform": { "anyOf": [ { "$ref": "#/definitions/transform" }, { "type": "array", "items": { "$ref": "#/definitions/transform" } } ], "description": "A pipeline of transforms applied before drawing." }, "title": { "type": "string", "description": "The title. One plain statement of what the data shows, with the number and the period (\"Monthly churn fell from 4.2% to 2.1% in 2024\"), or a plain label (\"Monthly churn, 2024\"). One clause, no figures of speech." }, "subtitle": { "type": "string", "description": "Measure, unit, population, period." }, "source": { "type": "string", "description": "Data source, shown as \"Source: ...\"." }, "note": { "type": "string", "description": "Method notes or caveats." }, "height": { "anyOf": [ { "type": "number" }, { "type": "string" } ], "description": "CSS height of the plot. Default 360." }, "aspect": { "type": "number", "description": "Width / height. Overrides `height`." }, "highlight": { "anyOf": [ { "type": "string" }, { "type": "array", "items": { "type": "string" } } ], "description": "The entity (or entities) the title is about. Every other series is drawn in grey." }, "annotations": { "type": "array", "items": { "$ref": "#/definitions/annotation" }, "description": "Reference lines, shaded bands and callouts, in data coordinates." }, "format": { "$ref": "#/definitions/format", "description": "How to print values: `\"compact\"`, `\"percent\"`, `\"currency:USD\"`, `\"{value} kg\"`, Intl options, or a function." }, "legend": { "type": "boolean", "description": "Show the legend. Default: shown when there are two or more series." }, "select": { "anyOf": [ { "type": "boolean" }, { "type": "string" } ], "description": "Make marks clickable to filter. Inside `` the selection filters every other chart. Pass a field name, or `true` to use the chart's category field." }, "option": { "type": "object", "description": "Deep-merged over the generated ECharts option, or a function that receives and returns it. Use it for ECharts settings no prop covers." }, "theme": { "type": "object", "description": "A full theme, `{ light, dark }` partial tokens, or flat tokens applied to both modes. Merged over the surrounding `InsightProvider` theme." }, "mode": { "enum": [ "auto", "system", "light", "dark" ], "description": "`\"auto\"` (default) follows the page, `\"system\"` follows the OS, or force `\"light\"` / `\"dark\"`." }, "renderer": { "enum": [ "auto", "svg", "canvas" ], "description": "`\"auto\"` (default) uses SVG for light charts and canvas for heavy ones." }, "animate": { "type": "boolean", "description": "Set false to disable animation for this chart. Reduced-motion preferences are always respected." }, "lazy": { "type": "boolean", "description": "Mount the chart only when it scrolls within 200px of the viewport. Default true (from `InsightProvider`)." }, "group": { "type": "string", "description": "Link tooltips with other charts sharing this group id." }, "exportable": { "anyOf": [ { "type": "boolean" }, { "type": "array", "items": { "enum": [ "png", "jpeg", "svg", "pdf", "csv", "json" ] } } ], "description": "Show an export menu: `true` or a list of formats from png, jpeg, svg, pdf, csv, json." }, "table": { "type": "boolean", "description": "Show a collapsible \"View data\" table under the chart." }, "alt": { "type": "string", "description": "Accessible description: the chart type and measures, then the main pattern and the notable values." }, "id": { "type": "string", "description": "Stable id for this chart's selection in the shared store." }, "className": { "type": "string", "description": "Class on the figure element." }, "style": { "type": "object", "description": "Inline style on the figure element." }, "x": { "type": "string", "description": "Time or ordered category field. ISO dates are placed on a true time axis." }, "y": { "anyOf": [ { "type": "string" }, { "type": "array", "items": { "type": "string" } } ], "description": "Value field, or several (one area each)." }, "series": { "type": "string", "description": "Field that splits rows into areas (long data)." }, "stack": { "anyOf": [ { "type": "boolean" }, { "const": "percent" } ], "description": "Stack the areas; `percent` normalises every x position to 100%.", "$comment": "default: false" }, "stream": { "type": "boolean", "description": "Streamgraph: stack around a centred baseline. The value axis is dropped because only band thickness is readable.", "$comment": "default: false" }, "curve": { "enum": [ "linear", "smooth", "step" ], "description": "Edge shape. A streamgraph defaults to smooth.", "$comment": "default: \"linear\"" }, "labels": { "type": "boolean", "description": "Name each band inside itself where it fits; the rest go to the legend. Default: on when stacked." }, "names": { "type": "object", "additionalProperties": { "type": "string" }, "description": "Display names for series keys." } }, "required": [ "type", "x", "y" ], "additionalProperties": false }, "arrow-chart": { "title": "Arrow chart", "description": "Draws an arrow per category from a start value to an end value, showing the direction and size of each shift. Use: Shifts between two moments across up to about 25 categories when some rise and some fall: swings between elections, before / after a policy. Avoid: When both levels matter more than the direction (use dumbbell-chart); more than two points in time (use slope-chart or line-chart); a single value per category (use bar-chart).", "type": "object", "properties": { "type": { "const": "arrow-chart" }, "data": { "$ref": "#/definitions/data", "description": "Rows, CSV text, a URL, `{ url, path }`, an async function, or an Arrow-style table. Omit inside ``." }, "transform": { "anyOf": [ { "$ref": "#/definitions/transform" }, { "type": "array", "items": { "$ref": "#/definitions/transform" } } ], "description": "A pipeline of transforms applied before drawing." }, "title": { "type": "string", "description": "The title. One plain statement of what the data shows, with the number and the period (\"Monthly churn fell from 4.2% to 2.1% in 2024\"), or a plain label (\"Monthly churn, 2024\"). One clause, no figures of speech." }, "subtitle": { "type": "string", "description": "Measure, unit, population, period." }, "source": { "type": "string", "description": "Data source, shown as \"Source: ...\"." }, "note": { "type": "string", "description": "Method notes or caveats." }, "height": { "anyOf": [ { "type": "number" }, { "type": "string" } ], "description": "CSS height of the plot. Default 360." }, "aspect": { "type": "number", "description": "Width / height. Overrides `height`." }, "highlight": { "anyOf": [ { "type": "string" }, { "type": "array", "items": { "type": "string" } } ], "description": "The entity (or entities) the title is about. Every other series is drawn in grey." }, "annotations": { "type": "array", "items": { "$ref": "#/definitions/annotation" }, "description": "Reference lines, shaded bands and callouts, in data coordinates." }, "format": { "$ref": "#/definitions/format", "description": "How to print values: `\"compact\"`, `\"percent\"`, `\"currency:USD\"`, `\"{value} kg\"`, Intl options, or a function." }, "legend": { "type": "boolean", "description": "Show the legend. Default: shown when there are two or more series." }, "select": { "anyOf": [ { "type": "boolean" }, { "type": "string" } ], "description": "Make marks clickable to filter. Inside `` the selection filters every other chart. Pass a field name, or `true` to use the chart's category field." }, "option": { "type": "object", "description": "Deep-merged over the generated ECharts option, or a function that receives and returns it. Use it for ECharts settings no prop covers." }, "theme": { "type": "object", "description": "A full theme, `{ light, dark }` partial tokens, or flat tokens applied to both modes. Merged over the surrounding `InsightProvider` theme." }, "mode": { "enum": [ "auto", "system", "light", "dark" ], "description": "`\"auto\"` (default) follows the page, `\"system\"` follows the OS, or force `\"light\"` / `\"dark\"`." }, "renderer": { "enum": [ "auto", "svg", "canvas" ], "description": "`\"auto\"` (default) uses SVG for light charts and canvas for heavy ones." }, "animate": { "type": "boolean", "description": "Set false to disable animation for this chart. Reduced-motion preferences are always respected." }, "lazy": { "type": "boolean", "description": "Mount the chart only when it scrolls within 200px of the viewport. Default true (from `InsightProvider`)." }, "group": { "type": "string", "description": "Link tooltips with other charts sharing this group id." }, "exportable": { "anyOf": [ { "type": "boolean" }, { "type": "array", "items": { "enum": [ "png", "jpeg", "svg", "pdf", "csv", "json" ] } } ], "description": "Show an export menu: `true` or a list of formats from png, jpeg, svg, pdf, csv, json." }, "table": { "type": "boolean", "description": "Show a collapsible \"View data\" table under the chart." }, "alt": { "type": "string", "description": "Accessible description: the chart type and measures, then the main pattern and the notable values." }, "id": { "type": "string", "description": "Stable id for this chart's selection in the shared store." }, "className": { "type": "string", "description": "Class on the figure element." }, "style": { "type": "object", "description": "Inline style on the figure element." }, "category": { "type": "string", "description": "Category field: one arrow each." }, "from": { "type": "string", "description": "Field with the start value, or (long data) the `series` value that marks it." }, "to": { "type": "string", "description": "Field with the end value, or (long data) the `series` value that marks it." }, "series": { "type": "string", "description": "Long data: the field whose values are `from` and `to`." }, "value": { "type": "string", "description": "Long data: the measure field.", "$comment": "default: \"value\"" }, "good": { "enum": [ "up", "down", "none" ], "description": "Direction drawn in the positive colour. `none` uses the accent for every arrow.", "$comment": "default: \"up\"" }, "sort": { "enum": [ "change", "from", "to", "none" ], "description": "Row order.", "$comment": "default: \"change\"" }, "order": { "enum": [ "desc", "asc" ], "description": "Sort direction.", "$comment": "default: \"desc\"" }, "labels": { "type": "boolean", "description": "Start and end values at the tail and head. Default: on for up to 14 rows; otherwise a value axis is drawn." }, "changeLabel": { "anyOf": [ { "type": "boolean" }, { "type": "string" } ], "description": "Print the signed change in a right-hand column; a string sets the column header.", "$comment": "default: false" }, "zero": { "type": "boolean", "description": "Start the value axis at zero.", "$comment": "default: false" }, "names": { "type": "object", "additionalProperties": { "type": "string" }, "description": "Display names for the `from` and `to` keys." } }, "required": [ "type", "category", "from", "to" ], "additionalProperties": false }, "bar-chart": { "title": "Bar chart", "description": "Compares a value across categories with bars from a zero baseline. Use: Ranking or comparing up to about 20 categories; grouped for a few series, stacked when the total and its composition both matter. Avoid: Change over many time points (use line-chart); two values per category (use dumbbell-chart); more than about 5 stacked segments.", "type": "object", "properties": { "type": { "const": "bar-chart" }, "data": { "$ref": "#/definitions/data", "description": "Rows, CSV text, a URL, `{ url, path }`, an async function, or an Arrow-style table. Omit inside ``." }, "transform": { "anyOf": [ { "$ref": "#/definitions/transform" }, { "type": "array", "items": { "$ref": "#/definitions/transform" } } ], "description": "A pipeline of transforms applied before drawing." }, "title": { "type": "string", "description": "The title. One plain statement of what the data shows, with the number and the period (\"Monthly churn fell from 4.2% to 2.1% in 2024\"), or a plain label (\"Monthly churn, 2024\"). One clause, no figures of speech." }, "subtitle": { "type": "string", "description": "Measure, unit, population, period." }, "source": { "type": "string", "description": "Data source, shown as \"Source: ...\"." }, "note": { "type": "string", "description": "Method notes or caveats." }, "height": { "anyOf": [ { "type": "number" }, { "type": "string" } ], "description": "CSS height of the plot. Default 360." }, "aspect": { "type": "number", "description": "Width / height. Overrides `height`." }, "highlight": { "anyOf": [ { "type": "string" }, { "type": "array", "items": { "type": "string" } } ], "description": "The entity (or entities) the title is about. Every other series is drawn in grey." }, "annotations": { "type": "array", "items": { "$ref": "#/definitions/annotation" }, "description": "Reference lines, shaded bands and callouts, in data coordinates." }, "format": { "$ref": "#/definitions/format", "description": "How to print values: `\"compact\"`, `\"percent\"`, `\"currency:USD\"`, `\"{value} kg\"`, Intl options, or a function." }, "legend": { "type": "boolean", "description": "Show the legend. Default: shown when there are two or more series." }, "select": { "anyOf": [ { "type": "boolean" }, { "type": "string" } ], "description": "Make marks clickable to filter. Inside `` the selection filters every other chart. Pass a field name, or `true` to use the chart's category field." }, "option": { "type": "object", "description": "Deep-merged over the generated ECharts option, or a function that receives and returns it. Use it for ECharts settings no prop covers." }, "theme": { "type": "object", "description": "A full theme, `{ light, dark }` partial tokens, or flat tokens applied to both modes. Merged over the surrounding `InsightProvider` theme." }, "mode": { "enum": [ "auto", "system", "light", "dark" ], "description": "`\"auto\"` (default) follows the page, `\"system\"` follows the OS, or force `\"light\"` / `\"dark\"`." }, "renderer": { "enum": [ "auto", "svg", "canvas" ], "description": "`\"auto\"` (default) uses SVG for light charts and canvas for heavy ones." }, "animate": { "type": "boolean", "description": "Set false to disable animation for this chart. Reduced-motion preferences are always respected." }, "lazy": { "type": "boolean", "description": "Mount the chart only when it scrolls within 200px of the viewport. Default true (from `InsightProvider`)." }, "group": { "type": "string", "description": "Link tooltips with other charts sharing this group id." }, "exportable": { "anyOf": [ { "type": "boolean" }, { "type": "array", "items": { "enum": [ "png", "jpeg", "svg", "pdf", "csv", "json" ] } } ], "description": "Show an export menu: `true` or a list of formats from png, jpeg, svg, pdf, csv, json." }, "table": { "type": "boolean", "description": "Show a collapsible \"View data\" table under the chart." }, "alt": { "type": "string", "description": "Accessible description: the chart type and measures, then the main pattern and the notable values." }, "id": { "type": "string", "description": "Stable id for this chart's selection in the shared store." }, "className": { "type": "string", "description": "Class on the figure element." }, "style": { "type": "object", "description": "Inline style on the figure element." }, "x": { "type": "string", "description": "Category field." }, "y": { "anyOf": [ { "type": "string" }, { "type": "array", "items": { "type": "string" } } ], "description": "Value field, or several for grouped / stacked bars." }, "series": { "type": "string", "description": "Field that splits rows into series (long data)." }, "orientation": { "enum": [ "auto", "horizontal", "vertical" ], "description": "Horizontal for rankings and long labels, vertical for time.", "$comment": "default: \"auto\"" }, "sort": { "enum": [ "none", "asc", "desc" ], "description": "Bar order. Default: descending for rankings, data order for time." }, "stack": { "anyOf": [ { "type": "boolean" }, { "const": "percent" } ], "description": "Stack series; `percent` normalises to 100%.", "$comment": "default: false" }, "labels": { "type": "boolean", "description": "Value labels at bar ends. Default: on for one series of up to 12 bars." }, "names": { "type": "object", "additionalProperties": { "type": "string" }, "description": "Display names for series keys." } }, "required": [ "type", "x", "y" ], "additionalProperties": false }, "beeswarm-chart": { "title": "Beeswarm chart", "description": "Shows a distribution as one dot per row along a value axis, with dots stacked sideways where they would collide. Use: Showing a distribution while keeping every individual visible: 30 to about 2,000 named things (countries, players, schools), optionally in a few rows by group, with one or two highlighted. Avoid: More than about 2,000 rows or when only the summary matters (use histogram or box-plot); many groups with few rows each (use strip-plot); two numeric measures (use scatter-chart).", "type": "object", "properties": { "type": { "const": "beeswarm-chart" }, "data": { "$ref": "#/definitions/data", "description": "Rows, CSV text, a URL, `{ url, path }`, an async function, or an Arrow-style table. Omit inside ``." }, "transform": { "anyOf": [ { "$ref": "#/definitions/transform" }, { "type": "array", "items": { "$ref": "#/definitions/transform" } } ], "description": "A pipeline of transforms applied before drawing." }, "title": { "type": "string", "description": "The title. One plain statement of what the data shows, with the number and the period (\"Monthly churn fell from 4.2% to 2.1% in 2024\"), or a plain label (\"Monthly churn, 2024\"). One clause, no figures of speech." }, "subtitle": { "type": "string", "description": "Measure, unit, population, period." }, "source": { "type": "string", "description": "Data source, shown as \"Source: ...\"." }, "note": { "type": "string", "description": "Method notes or caveats." }, "height": { "anyOf": [ { "type": "number" }, { "type": "string" } ], "description": "CSS height of the plot. Default 360." }, "aspect": { "type": "number", "description": "Width / height. Overrides `height`." }, "highlight": { "anyOf": [ { "type": "string" }, { "type": "array", "items": { "type": "string" } } ], "description": "The entity (or entities) the title is about. Every other series is drawn in grey." }, "annotations": { "type": "array", "items": { "$ref": "#/definitions/annotation" }, "description": "Reference lines, shaded bands and callouts, in data coordinates." }, "format": { "$ref": "#/definitions/format", "description": "How to print values: `\"compact\"`, `\"percent\"`, `\"currency:USD\"`, `\"{value} kg\"`, Intl options, or a function." }, "legend": { "type": "boolean", "description": "Show the legend. Default: shown when there are two or more series." }, "select": { "anyOf": [ { "type": "boolean" }, { "type": "string" } ], "description": "Make marks clickable to filter. Inside `` the selection filters every other chart. Pass a field name, or `true` to use the chart's category field." }, "option": { "type": "object", "description": "Deep-merged over the generated ECharts option, or a function that receives and returns it. Use it for ECharts settings no prop covers." }, "theme": { "type": "object", "description": "A full theme, `{ light, dark }` partial tokens, or flat tokens applied to both modes. Merged over the surrounding `InsightProvider` theme." }, "mode": { "enum": [ "auto", "system", "light", "dark" ], "description": "`\"auto\"` (default) follows the page, `\"system\"` follows the OS, or force `\"light\"` / `\"dark\"`." }, "renderer": { "enum": [ "auto", "svg", "canvas" ], "description": "`\"auto\"` (default) uses SVG for light charts and canvas for heavy ones." }, "animate": { "type": "boolean", "description": "Set false to disable animation for this chart. Reduced-motion preferences are always respected." }, "lazy": { "type": "boolean", "description": "Mount the chart only when it scrolls within 200px of the viewport. Default true (from `InsightProvider`)." }, "group": { "type": "string", "description": "Field that splits the dots into rows, one swarm per group." }, "exportable": { "anyOf": [ { "type": "boolean" }, { "type": "array", "items": { "enum": [ "png", "jpeg", "svg", "pdf", "csv", "json" ] } } ], "description": "Show an export menu: `true` or a list of formats from png, jpeg, svg, pdf, csv, json." }, "table": { "type": "boolean", "description": "Show a collapsible \"View data\" table under the chart." }, "alt": { "type": "string", "description": "Accessible description: the chart type and measures, then the main pattern and the notable values." }, "id": { "type": "string", "description": "Stable id for this chart's selection in the shared store." }, "className": { "type": "string", "description": "Class on the figure element." }, "style": { "type": "object", "description": "Inline style on the figure element." }, "value": { "type": "string", "description": "Numeric field that positions each dot along the axis." }, "series": { "type": "string", "description": "Field that colours dots by category. Beyond 6 categories the rest turn grey." }, "label": { "type": "string", "description": "Field naming each dot, for tooltips, `highlight` and labels on highlighted dots." }, "radius": { "type": "number", "description": "Dot radius in px. Default 5 down to 3 by row count; shrinks if a swarm would overflow its row." }, "median": { "type": "boolean", "description": "Mark each row's median with a vertical tick.", "$comment": "default: false" }, "names": { "type": "object", "additionalProperties": { "type": "string" }, "description": "Display names for series keys." } }, "required": [ "type", "value" ], "additionalProperties": false }, "big-number": { "title": "Big number", "description": "A featured statistic with its label, change and the context that gives it meaning. Use: A single headline figure, or a row of three or four key numbers. Always give it context: a comparison, a denominator or a period. Avoid: Showing a number with no comparison; using a gauge or a one-slice donut for the same job.", "type": "object", "properties": { "type": { "const": "big-number" }, "value": { "anyOf": [ { "type": "number" }, { "type": "string" } ], "description": "The figure. Numbers are formatted with `format`." }, "label": { "type": "string", "description": "What it measures, sentence case." }, "context": { "type": "string", "description": "The comparison, denominator or period that gives it meaning." }, "delta": { "anyOf": [ { "type": "number" }, { "type": "string" } ], "description": "Change against a baseline. Numbers render as signed percentages (0.12 is +12%)." }, "deltaLabel": { "type": "string", "description": "What the delta is against, e.g. \"vs last quarter\"." }, "upIsGood": { "type": "boolean", "description": "Whether an increase is good news; decides the delta colour.", "$comment": "default: true" }, "format": { "$ref": "#/definitions/format", "description": "Number format.", "$comment": "default: \"auto\"" }, "size": { "enum": [ "hero", "stat" ], "description": "`hero` for the one number a piece leads with.", "$comment": "default: \"stat\"" }, "align": { "enum": [ "left", "center" ], "description": "Text alignment.", "$comment": "default: \"left\"" }, "className": { "type": "string" }, "style": { "type": "object" }, "theme": { "type": "object", "description": "Theme override: partial tokens, or { light, dark }." }, "mode": { "enum": [ "auto", "system", "light", "dark" ], "description": "Colour mode." } }, "required": [ "type", "value", "label" ], "additionalProperties": false }, "block-bar": { "title": "Block bars", "description": "Compares 3 to 12 values as thick rounded bars from a zero baseline, with each value printed inside the end of its bar and the category beneath. Use: A short series or ranking that should read as a bold graphic with no axis: ticket sales in each of six years, two paired measures in five regions. Add `detail` for a second small figure above each bar and `marker` for an event between two bars. Avoid: More than 12 bars, more than two series or stacked parts (use bar-chart); negative values (use diverging-bar-chart); a long time series (use line-chart); values that differ by more than about 50 times, where the short bars vanish (use proportional-area).", "type": "object", "properties": { "type": { "const": "block-bar" }, "data": { "$ref": "#/definitions/data", "description": "Rows, CSV text, a URL, `{ url, path }`, an async function, or an Arrow-style table. Omit inside ``." }, "transform": { "anyOf": [ { "$ref": "#/definitions/transform" }, { "type": "array", "items": { "$ref": "#/definitions/transform" } } ], "description": "A pipeline of transforms applied before drawing." }, "title": { "type": "string", "description": "The title. One plain statement of what the data shows, with the number and the period (\"Monthly churn fell from 4.2% to 2.1% in 2024\"), or a plain label (\"Monthly churn, 2024\"). One clause, no figures of speech." }, "subtitle": { "type": "string", "description": "Measure, unit, population, period." }, "source": { "type": "string", "description": "Data source, shown as \"Source: ...\"." }, "note": { "type": "string", "description": "Method notes or caveats." }, "height": { "anyOf": [ { "type": "number" }, { "type": "string" } ], "description": "CSS height of the plot. Default 360." }, "aspect": { "type": "number", "description": "Width / height. Overrides `height`." }, "highlight": { "anyOf": [ { "type": "string" }, { "type": "array", "items": { "type": "string" } } ], "description": "The entity (or entities) the title is about. Every other series is drawn in grey." }, "annotations": { "type": "array", "items": { "$ref": "#/definitions/annotation" }, "description": "Reference lines, shaded bands and callouts, in data coordinates." }, "format": { "$ref": "#/definitions/format", "description": "How to print values: `\"compact\"`, `\"percent\"`, `\"currency:USD\"`, `\"{value} kg\"`, Intl options, or a function." }, "legend": { "type": "boolean", "description": "Show the legend. Default: shown when there are two or more series." }, "select": { "anyOf": [ { "type": "boolean" }, { "type": "string" } ], "description": "Make marks clickable to filter. Inside `` the selection filters every other chart. Pass a field name, or `true` to use the chart's category field." }, "option": { "type": "object", "description": "Deep-merged over the generated ECharts option, or a function that receives and returns it. Use it for ECharts settings no prop covers." }, "theme": { "type": "object", "description": "A full theme, `{ light, dark }` partial tokens, or flat tokens applied to both modes. Merged over the surrounding `InsightProvider` theme." }, "mode": { "enum": [ "auto", "system", "light", "dark" ], "description": "`\"auto\"` (default) follows the page, `\"system\"` follows the OS, or force `\"light\"` / `\"dark\"`." }, "renderer": { "enum": [ "auto", "svg", "canvas" ], "description": "`\"auto\"` (default) uses SVG for light charts and canvas for heavy ones." }, "animate": { "type": "boolean", "description": "Set false to disable animation for this chart. Reduced-motion preferences are always respected." }, "lazy": { "type": "boolean", "description": "Mount the chart only when it scrolls within 200px of the viewport. Default true (from `InsightProvider`)." }, "group": { "type": "string", "description": "Link tooltips with other charts sharing this group id." }, "exportable": { "anyOf": [ { "type": "boolean" }, { "type": "array", "items": { "enum": [ "png", "jpeg", "svg", "pdf", "csv", "json" ] } } ], "description": "Show an export menu: `true` or a list of formats from png, jpeg, svg, pdf, csv, json." }, "table": { "type": "boolean", "description": "Show a collapsible \"View data\" table under the chart." }, "alt": { "type": "string", "description": "Accessible description: the chart type and measures, then the main pattern and the notable values." }, "id": { "type": "string", "description": "Stable id for this chart's selection in the shared store." }, "className": { "type": "string", "description": "Class on the figure element." }, "style": { "type": "object", "description": "Inline style on the figure element." }, "name": { "type": "string", "description": "Category field: one bar (or one pair of bars) per value." }, "value": { "anyOf": [ { "type": "string" }, { "type": "array", "items": { "type": "string" } } ], "description": "Value field, or two fields for paired bars." }, "series": { "type": "string", "description": "Field that splits long-format rows into paired series." }, "detail": { "type": "string", "description": "Field holding a short secondary label printed above each bar, e.g. \"3.5% of GDP\"." }, "marker": { "type": "object", "description": "A dotted line after the named category, marking an event, with an optional label." }, "orientation": { "enum": [ "auto", "vertical", "horizontal" ], "description": "`auto` draws columns and switches to horizontal bars on narrow widths.", "$comment": "default: \"auto\"" }, "names": { "type": "object", "additionalProperties": { "type": "string" }, "description": "Display names for series keys." } }, "required": [ "type", "name", "value" ], "additionalProperties": false }, "box-plot": { "title": "Box plot", "description": "Summarises a numeric field per group as median, quartile box, whiskers and outlier dots, computed from raw rows. Use: Comparing the centre and spread of a numeric value across several groups, especially with many rows per group and an audience comfortable with quartiles. Avoid: A general audience or fewer than about 20 rows per group (use strip-plot or beeswarm-chart, which show the observations themselves); one group whose shape matters, such as two peaks, which a box hides (use histogram).", "type": "object", "properties": { "type": { "const": "box-plot" }, "data": { "$ref": "#/definitions/data", "description": "Rows, CSV text, a URL, `{ url, path }`, an async function, or an Arrow-style table. Omit inside ``." }, "transform": { "anyOf": [ { "$ref": "#/definitions/transform" }, { "type": "array", "items": { "$ref": "#/definitions/transform" } } ], "description": "A pipeline of transforms applied before drawing." }, "title": { "type": "string", "description": "The title. One plain statement of what the data shows, with the number and the period (\"Monthly churn fell from 4.2% to 2.1% in 2024\"), or a plain label (\"Monthly churn, 2024\"). One clause, no figures of speech." }, "subtitle": { "type": "string", "description": "Measure, unit, population, period." }, "source": { "type": "string", "description": "Data source, shown as \"Source: ...\"." }, "note": { "type": "string", "description": "Method notes or caveats." }, "height": { "anyOf": [ { "type": "number" }, { "type": "string" } ], "description": "CSS height of the plot. Default 360." }, "aspect": { "type": "number", "description": "Width / height. Overrides `height`." }, "highlight": { "anyOf": [ { "type": "string" }, { "type": "array", "items": { "type": "string" } } ], "description": "The entity (or entities) the title is about. Every other series is drawn in grey." }, "annotations": { "type": "array", "items": { "$ref": "#/definitions/annotation" }, "description": "Reference lines, shaded bands and callouts, in data coordinates." }, "format": { "$ref": "#/definitions/format", "description": "How to print values: `\"compact\"`, `\"percent\"`, `\"currency:USD\"`, `\"{value} kg\"`, Intl options, or a function." }, "legend": { "type": "boolean", "description": "Show the legend. Default: shown when there are two or more series." }, "select": { "anyOf": [ { "type": "boolean" }, { "type": "string" } ], "description": "Make marks clickable to filter. Inside `` the selection filters every other chart. Pass a field name, or `true` to use the chart's category field." }, "option": { "type": "object", "description": "Deep-merged over the generated ECharts option, or a function that receives and returns it. Use it for ECharts settings no prop covers." }, "theme": { "type": "object", "description": "A full theme, `{ light, dark }` partial tokens, or flat tokens applied to both modes. Merged over the surrounding `InsightProvider` theme." }, "mode": { "enum": [ "auto", "system", "light", "dark" ], "description": "`\"auto\"` (default) follows the page, `\"system\"` follows the OS, or force `\"light\"` / `\"dark\"`." }, "renderer": { "enum": [ "auto", "svg", "canvas" ], "description": "`\"auto\"` (default) uses SVG for light charts and canvas for heavy ones." }, "animate": { "type": "boolean", "description": "Set false to disable animation for this chart. Reduced-motion preferences are always respected." }, "lazy": { "type": "boolean", "description": "Mount the chart only when it scrolls within 200px of the viewport. Default true (from `InsightProvider`)." }, "group": { "type": "string", "description": "Category field: one box per distinct value. Omit for a single box." }, "exportable": { "anyOf": [ { "type": "boolean" }, { "type": "array", "items": { "enum": [ "png", "jpeg", "svg", "pdf", "csv", "json" ] } } ], "description": "Show an export menu: `true` or a list of formats from png, jpeg, svg, pdf, csv, json." }, "table": { "type": "boolean", "description": "Show a collapsible \"View data\" table under the chart." }, "alt": { "type": "string", "description": "Accessible description: the chart type and measures, then the main pattern and the notable values." }, "id": { "type": "string", "description": "Stable id for this chart's selection in the shared store." }, "className": { "type": "string", "description": "Class on the figure element." }, "style": { "type": "object", "description": "Inline style on the figure element." }, "value": { "type": "string", "description": "Numeric field to summarise. Pass raw rows; quartiles are computed in the chart." }, "label": { "type": "string", "description": "Field naming each row, shown when hovering an outlier." }, "orientation": { "enum": [ "horizontal", "vertical" ], "description": "Horizontal leaves room for long names; vertical suits ordered categories.", "$comment": "default: \"horizontal\"" }, "whiskers": { "enum": [ "tukey", "minmax" ], "description": "`tukey`: furthest point within 1.5 × IQR, the rest drawn as outliers. `minmax`: the extremes.", "$comment": "default: \"tukey\"" }, "sort": { "enum": [ "none", "asc", "desc" ], "description": "Order boxes by median.", "$comment": "default: \"none\"" } }, "required": [ "type", "value" ], "additionalProperties": false }, "bubble-network": { "title": "Bubble network", "description": "Draws a small set of circles sized by value and joined by thin lines, with one circle highlighted and tagged. Use: Showing which of up to about 12 named things are connected, and how big each is: trade blocs, route maps between hubs, partnerships, shared ownership. Give `x` and `y` to place the circles by hand, for example roughly geographically. Avoid: Flows with magnitudes between stages (use sankey-chart); more than about 12 circles or a dense web of links (use heatmap as a matrix, or data-table); comparison of the sizes alone (use bar-chart or circle-pack).", "type": "object", "properties": { "type": { "const": "bubble-network" }, "data": { "$ref": "#/definitions/data", "description": "Rows, CSV text, a URL, `{ url, path }`, an async function, or an Arrow-style table. Omit inside ``." }, "transform": { "anyOf": [ { "$ref": "#/definitions/transform" }, { "type": "array", "items": { "$ref": "#/definitions/transform" } } ], "description": "A pipeline of transforms applied before drawing." }, "title": { "type": "string", "description": "The title. One plain statement of what the data shows, with the number and the period (\"Monthly churn fell from 4.2% to 2.1% in 2024\"), or a plain label (\"Monthly churn, 2024\"). One clause, no figures of speech." }, "subtitle": { "type": "string", "description": "Measure, unit, population, period." }, "source": { "type": "string", "description": "Data source, shown as \"Source: ...\"." }, "note": { "type": "string", "description": "Method notes or caveats." }, "height": { "anyOf": [ { "type": "number" }, { "type": "string" } ], "description": "CSS height of the plot. Default 360." }, "aspect": { "type": "number", "description": "Width / height. Overrides `height`." }, "highlight": { "anyOf": [ { "type": "string" }, { "type": "array", "items": { "type": "string" } } ], "description": "The entity (or entities) the title is about. Every other series is drawn in grey." }, "annotations": { "type": "array", "items": { "$ref": "#/definitions/annotation" }, "description": "Reference lines, shaded bands and callouts, in data coordinates." }, "format": { "$ref": "#/definitions/format", "description": "How to print values: `\"compact\"`, `\"percent\"`, `\"currency:USD\"`, `\"{value} kg\"`, Intl options, or a function." }, "legend": { "type": "boolean", "description": "Show the legend. Default: shown when there are two or more series." }, "select": { "anyOf": [ { "type": "boolean" }, { "type": "string" } ], "description": "Make marks clickable to filter. Inside `` the selection filters every other chart. Pass a field name, or `true` to use the chart's category field." }, "option": { "type": "object", "description": "Deep-merged over the generated ECharts option, or a function that receives and returns it. Use it for ECharts settings no prop covers." }, "theme": { "type": "object", "description": "A full theme, `{ light, dark }` partial tokens, or flat tokens applied to both modes. Merged over the surrounding `InsightProvider` theme." }, "mode": { "enum": [ "auto", "system", "light", "dark" ], "description": "`\"auto\"` (default) follows the page, `\"system\"` follows the OS, or force `\"light\"` / `\"dark\"`." }, "renderer": { "enum": [ "auto", "svg", "canvas" ], "description": "`\"auto\"` (default) uses SVG for light charts and canvas for heavy ones." }, "animate": { "type": "boolean", "description": "Set false to disable animation for this chart. Reduced-motion preferences are always respected." }, "lazy": { "type": "boolean", "description": "Mount the chart only when it scrolls within 200px of the viewport. Default true (from `InsightProvider`)." }, "group": { "type": "string", "description": "Link tooltips with other charts sharing this group id." }, "exportable": { "anyOf": [ { "type": "boolean" }, { "type": "array", "items": { "enum": [ "png", "jpeg", "svg", "pdf", "csv", "json" ] } } ], "description": "Show an export menu: `true` or a list of formats from png, jpeg, svg, pdf, csv, json." }, "table": { "type": "boolean", "description": "Show a collapsible \"View data\" table under the chart." }, "alt": { "type": "string", "description": "Accessible description: the chart type and measures, then the main pattern and the notable values." }, "id": { "type": "string", "description": "Stable id for this chart's selection in the shared store." }, "className": { "type": "string", "description": "Class on the figure element." }, "style": { "type": "object", "description": "Inline style on the figure element." }, "name": { "type": "string", "description": "Name field: one circle per row." }, "value": { "type": "string", "description": "Value field: circle area." }, "x": { "type": "string", "description": "Horizontal position field, 0 (left) to 100 (right). With `y`, places the circles by hand." }, "y": { "type": "string", "description": "Vertical position field, 0 (top) to 100 (bottom)." }, "links": { "type": "array", "items": { "type": "object" }, "description": "Lines between circles, by name. `value` sets the line width and is printed on the line." }, "tag": { "type": "string", "description": "Short tag attached to the highlighted circle, e.g. \"Joined 2024\"." }, "linkFormat": { "$ref": "#/definitions/format", "description": "How to print link values." }, "linkLabels": { "type": "boolean", "description": "Print link values on the lines. Default: on when any link has a value." }, "layout": { "enum": [ "ring", "hub" ], "description": "Without `x` and `y`: \"ring\" spaces the circles round an ellipse in data order, \"hub\" also moves the most-connected circle to the middle. Default: \"hub\" when one circle links to most of the others." } }, "required": [ "type", "name", "value" ], "additionalProperties": false }, "bubble-scale": { "title": "Bubble scale", "description": "Places circles sized by one measure along a single value scale set by another, spread sideways so none overlap, with boxed scale marks instead of an axis. Use: A poster answer to \"where does each one sit on this scale, and how big is it\": 5 to about 40 named things with a rate or score (the scale) and a magnitude (the area), such as import dependency against share of demand. Avoid: Two measures that should be read against each other on two axes (use scatter-chart); one measure only (use beeswarm-chart or strip-plot); precise comparison of the sizes (use bar-chart); more than about 60 rows (use beeswarm-chart).", "type": "object", "properties": { "type": { "const": "bubble-scale" }, "data": { "$ref": "#/definitions/data", "description": "Rows, CSV text, a URL, `{ url, path }`, an async function, or an Arrow-style table. Omit inside ``." }, "transform": { "anyOf": [ { "$ref": "#/definitions/transform" }, { "type": "array", "items": { "$ref": "#/definitions/transform" } } ], "description": "A pipeline of transforms applied before drawing." }, "title": { "type": "string", "description": "The title. One plain statement of what the data shows, with the number and the period (\"Monthly churn fell from 4.2% to 2.1% in 2024\"), or a plain label (\"Monthly churn, 2024\"). One clause, no figures of speech." }, "subtitle": { "type": "string", "description": "Measure, unit, population, period." }, "source": { "type": "string", "description": "Data source, shown as \"Source: ...\"." }, "note": { "type": "string", "description": "Method notes or caveats." }, "height": { "anyOf": [ { "type": "number" }, { "type": "string" } ], "description": "CSS height of the plot. Default 360." }, "aspect": { "type": "number", "description": "Width / height. Overrides `height`." }, "highlight": { "anyOf": [ { "type": "string" }, { "type": "array", "items": { "type": "string" } } ], "description": "The entity (or entities) the title is about. Every other series is drawn in grey." }, "annotations": { "type": "array", "items": { "$ref": "#/definitions/annotation" }, "description": "Reference lines, shaded bands and callouts, in data coordinates." }, "format": { "$ref": "#/definitions/format", "description": "How to print values: `\"compact\"`, `\"percent\"`, `\"currency:USD\"`, `\"{value} kg\"`, Intl options, or a function." }, "legend": { "type": "boolean", "description": "Show the legend. Default: shown when there are two or more series." }, "select": { "anyOf": [ { "type": "boolean" }, { "type": "string" } ], "description": "Make marks clickable to filter. Inside `` the selection filters every other chart. Pass a field name, or `true` to use the chart's category field." }, "option": { "type": "object", "description": "Deep-merged over the generated ECharts option, or a function that receives and returns it. Use it for ECharts settings no prop covers." }, "theme": { "type": "object", "description": "A full theme, `{ light, dark }` partial tokens, or flat tokens applied to both modes. Merged over the surrounding `InsightProvider` theme." }, "mode": { "enum": [ "auto", "system", "light", "dark" ], "description": "`\"auto\"` (default) follows the page, `\"system\"` follows the OS, or force `\"light\"` / `\"dark\"`." }, "renderer": { "enum": [ "auto", "svg", "canvas" ], "description": "`\"auto\"` (default) uses SVG for light charts and canvas for heavy ones." }, "animate": { "type": "boolean", "description": "Set false to disable animation for this chart. Reduced-motion preferences are always respected." }, "lazy": { "type": "boolean", "description": "Mount the chart only when it scrolls within 200px of the viewport. Default true (from `InsightProvider`)." }, "group": { "type": "string", "description": "Link tooltips with other charts sharing this group id." }, "exportable": { "anyOf": [ { "type": "boolean" }, { "type": "array", "items": { "enum": [ "png", "jpeg", "svg", "pdf", "csv", "json" ] } } ], "description": "Show an export menu: `true` or a list of formats from png, jpeg, svg, pdf, csv, json." }, "table": { "type": "boolean", "description": "Show a collapsible \"View data\" table under the chart." }, "alt": { "type": "string", "description": "Accessible description: the chart type and measures, then the main pattern and the notable values." }, "id": { "type": "string", "description": "Stable id for this chart's selection in the shared store." }, "className": { "type": "string", "description": "Class on the figure element." }, "style": { "type": "object", "description": "Inline style on the figure element." }, "name": { "type": "string", "description": "Name field: one circle per row." }, "value": { "type": "string", "description": "Numeric field that positions each circle along the scale. Printed with `format`." }, "size": { "type": "string", "description": "Numeric field for circle area. Printed inside or beside each circle with `sizeFormat`." }, "series": { "type": "string", "description": "Field that colours circles by category. Default: circles are shaded along the scale with the sequential ramp." }, "orientation": { "enum": [ "vertical", "horizontal" ], "description": "Direction of the scale. Narrow containers always use vertical.", "$comment": "default: \"vertical\"" }, "domain": { "type": "array", "description": "Scale range. Default: the data extent rounded out to the tick step." }, "ticks": { "type": "array", "items": { "type": "number" }, "description": "Values to mark on the scale. Default: about five round values." }, "scaleLabel": { "type": "string", "description": "Short name of the scale measure, printed at the head of the scale." }, "sizeFormat": { "$ref": "#/definitions/format", "description": "How to print the size measure." }, "guides": { "type": "boolean", "description": "Thin dotted guide line at each scale mark.", "$comment": "default: true" }, "names": { "type": "object", "additionalProperties": { "type": "string" }, "description": "Display names for series keys." } }, "required": [ "type", "name", "value", "size" ], "additionalProperties": false }, "bullet-chart": { "title": "Bullet chart", "description": "Compares one measure per row with its target, optionally against qualitative bands such as poor / fair / good. Use: Progress against a target or budget for one to about 10 measures, including measures in different units (`scale: \"independent\"`); a compact scorecard instead of a row of gauges. Avoid: No target or thresholds to compare with (use bar-chart); a single share of a whole (use progress-meter); change over time (use line-chart).", "type": "object", "properties": { "type": { "const": "bullet-chart" }, "data": { "$ref": "#/definitions/data", "description": "Rows, CSV text, a URL, `{ url, path }`, an async function, or an Arrow-style table. Omit inside ``." }, "transform": { "anyOf": [ { "$ref": "#/definitions/transform" }, { "type": "array", "items": { "$ref": "#/definitions/transform" } } ], "description": "A pipeline of transforms applied before drawing." }, "title": { "type": "string", "description": "The title. One plain statement of what the data shows, with the number and the period (\"Monthly churn fell from 4.2% to 2.1% in 2024\"), or a plain label (\"Monthly churn, 2024\"). One clause, no figures of speech." }, "subtitle": { "type": "string", "description": "Measure, unit, population, period." }, "source": { "type": "string", "description": "Data source, shown as \"Source: ...\"." }, "note": { "type": "string", "description": "Method notes or caveats." }, "height": { "anyOf": [ { "type": "number" }, { "type": "string" } ], "description": "CSS height of the plot. Default 360." }, "aspect": { "type": "number", "description": "Width / height. Overrides `height`." }, "highlight": { "anyOf": [ { "type": "string" }, { "type": "array", "items": { "type": "string" } } ], "description": "The entity (or entities) the title is about. Every other series is drawn in grey." }, "annotations": { "type": "array", "items": { "$ref": "#/definitions/annotation" }, "description": "Reference lines, shaded bands and callouts, in data coordinates." }, "format": { "$ref": "#/definitions/format", "description": "How to print values: `\"compact\"`, `\"percent\"`, `\"currency:USD\"`, `\"{value} kg\"`, Intl options, or a function." }, "legend": { "type": "boolean", "description": "Show the legend. Default: shown when there are two or more series." }, "select": { "anyOf": [ { "type": "boolean" }, { "type": "string" } ], "description": "Make marks clickable to filter. Inside `` the selection filters every other chart. Pass a field name, or `true` to use the chart's category field." }, "option": { "type": "object", "description": "Deep-merged over the generated ECharts option, or a function that receives and returns it. Use it for ECharts settings no prop covers." }, "theme": { "type": "object", "description": "A full theme, `{ light, dark }` partial tokens, or flat tokens applied to both modes. Merged over the surrounding `InsightProvider` theme." }, "mode": { "enum": [ "auto", "system", "light", "dark" ], "description": "`\"auto\"` (default) follows the page, `\"system\"` follows the OS, or force `\"light\"` / `\"dark\"`." }, "renderer": { "enum": [ "auto", "svg", "canvas" ], "description": "`\"auto\"` (default) uses SVG for light charts and canvas for heavy ones." }, "animate": { "type": "boolean", "description": "Set false to disable animation for this chart. Reduced-motion preferences are always respected." }, "lazy": { "type": "boolean", "description": "Mount the chart only when it scrolls within 200px of the viewport. Default true (from `InsightProvider`)." }, "group": { "type": "string", "description": "Link tooltips with other charts sharing this group id." }, "exportable": { "anyOf": [ { "type": "boolean" }, { "type": "array", "items": { "enum": [ "png", "jpeg", "svg", "pdf", "csv", "json" ] } } ], "description": "Show an export menu: `true` or a list of formats from png, jpeg, svg, pdf, csv, json." }, "table": { "type": "boolean", "description": "Show a collapsible \"View data\" table under the chart." }, "alt": { "type": "string", "description": "Accessible description: the chart type and measures, then the main pattern and the notable values." }, "id": { "type": "string", "description": "Stable id for this chart's selection in the shared store." }, "className": { "type": "string", "description": "Class on the figure element." }, "style": { "type": "object", "description": "Inline style on the figure element." }, "category": { "type": "string", "description": "Field naming each row." }, "value": { "type": "string", "description": "Field with the measured value. Values below zero are not supported." }, "target": { "type": "string", "description": "Field with the target, drawn as a tick across the bar." }, "bands": { "anyOf": [ { "type": "array", "items": { "type": "number" } }, { "type": "array", "items": { "type": "string" } } ], "description": "Ascending upper bounds of qualitative bands, or the fields holding them per row. Omit unless the thresholds are real." }, "bandNames": { "type": "array", "items": { "type": "string" }, "description": "Band names, lowest first, for the legend and tooltip." }, "max": { "anyOf": [ { "type": "number" }, { "type": "string" } ], "description": "End of the scale: a number or a per-row field. Default: just past the largest value, target or band." }, "scale": { "enum": [ "shared", "independent" ], "description": "One axis for all rows, or each row on its own scale (different units).", "$comment": "default: \"shared\"" }, "formatField": { "type": "string", "description": "Field holding a format spec per row, for mixed units." }, "names": { "type": "object", "additionalProperties": { "type": "string" }, "description": "Display names for the value and target fields." } }, "required": [ "type", "category", "value" ], "additionalProperties": false }, "bump-chart": { "title": "Bump chart", "description": "Shows how the ranking of entities changes over time, with rank 1 at the top and each line named at its end. Use: League tables over 3 to about 15 periods for up to about 12 entities, when the order and the changes in rank are what matter and the underlying values differ too much (or too little) to share an axis. Avoid: When the size of the values matters (use line-chart); only two periods (use slope-chart); a single ranking (use bar-chart or lollipop-chart).", "type": "object", "properties": { "type": { "const": "bump-chart" }, "data": { "$ref": "#/definitions/data", "description": "Rows, CSV text, a URL, `{ url, path }`, an async function, or an Arrow-style table. Omit inside ``." }, "transform": { "anyOf": [ { "$ref": "#/definitions/transform" }, { "type": "array", "items": { "$ref": "#/definitions/transform" } } ], "description": "A pipeline of transforms applied before drawing." }, "title": { "type": "string", "description": "The title. One plain statement of what the data shows, with the number and the period (\"Monthly churn fell from 4.2% to 2.1% in 2024\"), or a plain label (\"Monthly churn, 2024\"). One clause, no figures of speech." }, "subtitle": { "type": "string", "description": "Measure, unit, population, period." }, "source": { "type": "string", "description": "Data source, shown as \"Source: ...\"." }, "note": { "type": "string", "description": "Method notes or caveats." }, "height": { "anyOf": [ { "type": "number" }, { "type": "string" } ], "description": "CSS height of the plot. Default 360." }, "aspect": { "type": "number", "description": "Width / height. Overrides `height`." }, "highlight": { "anyOf": [ { "type": "string" }, { "type": "array", "items": { "type": "string" } } ], "description": "The entity (or entities) the title is about. Every other series is drawn in grey." }, "annotations": { "type": "array", "items": { "$ref": "#/definitions/annotation" }, "description": "Reference lines, shaded bands and callouts, in data coordinates." }, "format": { "$ref": "#/definitions/format", "description": "How to print values: `\"compact\"`, `\"percent\"`, `\"currency:USD\"`, `\"{value} kg\"`, Intl options, or a function." }, "legend": { "type": "boolean", "description": "Show the legend. Default: shown when there are two or more series." }, "select": { "anyOf": [ { "type": "boolean" }, { "type": "string" } ], "description": "Make marks clickable to filter. Inside `` the selection filters every other chart. Pass a field name, or `true` to use the chart's category field." }, "option": { "type": "object", "description": "Deep-merged over the generated ECharts option, or a function that receives and returns it. Use it for ECharts settings no prop covers." }, "theme": { "type": "object", "description": "A full theme, `{ light, dark }` partial tokens, or flat tokens applied to both modes. Merged over the surrounding `InsightProvider` theme." }, "mode": { "enum": [ "auto", "system", "light", "dark" ], "description": "`\"auto\"` (default) follows the page, `\"system\"` follows the OS, or force `\"light\"` / `\"dark\"`." }, "renderer": { "enum": [ "auto", "svg", "canvas" ], "description": "`\"auto\"` (default) uses SVG for light charts and canvas for heavy ones." }, "animate": { "type": "boolean", "description": "Set false to disable animation for this chart. Reduced-motion preferences are always respected." }, "lazy": { "type": "boolean", "description": "Mount the chart only when it scrolls within 200px of the viewport. Default true (from `InsightProvider`)." }, "group": { "type": "string", "description": "Link tooltips with other charts sharing this group id." }, "exportable": { "anyOf": [ { "type": "boolean" }, { "type": "array", "items": { "enum": [ "png", "jpeg", "svg", "pdf", "csv", "json" ] } } ], "description": "Show an export menu: `true` or a list of formats from png, jpeg, svg, pdf, csv, json." }, "table": { "type": "boolean", "description": "Show a collapsible \"View data\" table under the chart." }, "alt": { "type": "string", "description": "Accessible description: the chart type and measures, then the main pattern and the notable values." }, "id": { "type": "string", "description": "Stable id for this chart's selection in the shared store." }, "className": { "type": "string", "description": "Class on the figure element." }, "style": { "type": "object", "description": "Inline style on the figure element." }, "x": { "type": "string", "description": "Time or ordered category field." }, "y": { "anyOf": [ { "type": "string" }, { "type": "array", "items": { "type": "string" } } ], "description": "Value field to rank by, or several (one line each)." }, "series": { "type": "string", "description": "Field that splits rows into entities (long data)." }, "ranked": { "type": "boolean", "description": "The values are already ranks (1 = best) and are plotted as given.", "$comment": "default: false" }, "order": { "enum": [ "desc", "asc" ], "description": "Which values rank first when ranks are computed: largest (`desc`) or smallest (`asc`).", "$comment": "default: \"desc\"" }, "startLabels": { "type": "boolean", "description": "Name lines at the start as well as the end. Default: on when the chart is wide enough." }, "names": { "type": "object", "additionalProperties": { "type": "string" }, "description": "Display names for series keys." } }, "required": [ "type", "x", "y" ], "additionalProperties": false }, "calendar-heatmap": { "title": "Calendar heatmap", "description": "Colours every day of one or more years by a value, laid out as a grid of weeks. Use: Daily data over months or years where weekly rhythm, seasonality, streaks and gaps matter: activity, sales, incidents, habits. Avoid: Reading the trend or exact values (use line-chart); fewer than about three months of days (use bar-chart); a non-daily grain such as hour by weekday (use heatmap).", "type": "object", "properties": { "type": { "const": "calendar-heatmap" }, "data": { "$ref": "#/definitions/data", "description": "Rows, CSV text, a URL, `{ url, path }`, an async function, or an Arrow-style table. Omit inside ``." }, "transform": { "anyOf": [ { "$ref": "#/definitions/transform" }, { "type": "array", "items": { "$ref": "#/definitions/transform" } } ], "description": "A pipeline of transforms applied before drawing." }, "title": { "type": "string", "description": "The title. One plain statement of what the data shows, with the number and the period (\"Monthly churn fell from 4.2% to 2.1% in 2024\"), or a plain label (\"Monthly churn, 2024\"). One clause, no figures of speech." }, "subtitle": { "type": "string", "description": "Measure, unit, population, period." }, "source": { "type": "string", "description": "Data source, shown as \"Source: ...\"." }, "note": { "type": "string", "description": "Method notes or caveats." }, "height": { "anyOf": [ { "type": "number" }, { "type": "string" } ], "description": "Common prop, but note the default: when omitted the height follows the cell size, which follows the width, so cells stay square." }, "aspect": { "type": "number", "description": "Width / height. Overrides `height`." }, "highlight": { "anyOf": [ { "type": "string" }, { "type": "array", "items": { "type": "string" } } ], "description": "The entity (or entities) the title is about. Every other series is drawn in grey." }, "annotations": { "type": "array", "items": { "$ref": "#/definitions/annotation" }, "description": "Reference lines, shaded bands and callouts, in data coordinates." }, "format": { "$ref": "#/definitions/format", "description": "How to print values: `\"compact\"`, `\"percent\"`, `\"currency:USD\"`, `\"{value} kg\"`, Intl options, or a function." }, "legend": { "type": "boolean", "description": "Show the legend. Default: shown when there are two or more series." }, "select": { "anyOf": [ { "type": "boolean" }, { "type": "string" } ], "description": "Make marks clickable to filter. Inside `` the selection filters every other chart. Pass a field name, or `true` to use the chart's category field." }, "option": { "type": "object", "description": "Deep-merged over the generated ECharts option, or a function that receives and returns it. Use it for ECharts settings no prop covers." }, "theme": { "type": "object", "description": "A full theme, `{ light, dark }` partial tokens, or flat tokens applied to both modes. Merged over the surrounding `InsightProvider` theme." }, "mode": { "enum": [ "auto", "system", "light", "dark" ], "description": "`\"auto\"` (default) follows the page, `\"system\"` follows the OS, or force `\"light\"` / `\"dark\"`." }, "renderer": { "enum": [ "auto", "svg", "canvas" ], "description": "`\"auto\"` (default) uses SVG for light charts and canvas for heavy ones." }, "animate": { "type": "boolean", "description": "Set false to disable animation for this chart. Reduced-motion preferences are always respected." }, "lazy": { "type": "boolean", "description": "Mount the chart only when it scrolls within 200px of the viewport. Default true (from `InsightProvider`)." }, "group": { "type": "string", "description": "Link tooltips with other charts sharing this group id." }, "exportable": { "anyOf": [ { "type": "boolean" }, { "type": "array", "items": { "enum": [ "png", "jpeg", "svg", "pdf", "csv", "json" ] } } ], "description": "Show an export menu: `true` or a list of formats from png, jpeg, svg, pdf, csv, json." }, "table": { "type": "boolean", "description": "Show a collapsible \"View data\" table under the chart." }, "alt": { "type": "string", "description": "Accessible description: the chart type and measures, then the main pattern and the notable values." }, "id": { "type": "string", "description": "Stable id for this chart's selection in the shared store." }, "className": { "type": "string", "description": "Class on the figure element." }, "style": { "type": "object", "description": "Inline style on the figure element." }, "date": { "type": "string", "description": "Date field: ISO strings, Dates or epoch milliseconds. One cell per calendar day." }, "value": { "type": "string", "description": "Numeric field that colours each day. Rows sharing a day are summed." }, "orientation": { "enum": [ "auto", "horizontal", "vertical" ], "description": "Weeks left to right, or top to bottom. `auto` goes vertical under 480px.", "$comment": "default: \"auto\"" }, "weekStart": { "enum": [ "monday", "sunday" ], "description": "First day of the week.", "$comment": "default: \"monday\"" }, "domain": { "type": "array", "description": "Fix the ends of the colour scale. Default: 0 to the maximum." } }, "required": [ "type", "date", "value" ], "additionalProperties": false }, "callout": { "title": "Callout", "description": "A boxed statement of fact with a short bold lead and a sentence of explanation. The tone is marked by icon and tint. Use: Beside or under a chart, to state its main fact in words, with the number. Also for a caveat the reader must not miss (`negative`). Avoid: Long narration (use `prose`), a featured number (use `big-number` or `stat-tile`), or more than one callout per chart.", "type": "object", "properties": { "type": { "const": "callout" }, "lead": { "type": "string", "description": "The fact in a few bold words. State it with its number." }, "text": { "type": "string", "description": "One sentence of explanation or evidence." }, "children": { "$ref": "#/definitions/slot", "description": "JSX alternative to `text`." }, "tone": { "enum": [ "neutral", "positive", "negative", "accent" ], "description": "Sets the icon shape and the tint together.", "$comment": "default: \"neutral\"" }, "label": { "type": "string", "description": "Small label above the lead, e.g. \"Summary\"." }, "variant": { "enum": [ "soft", "outline", "plain" ], "description": "Tinted box, bordered box, or no box.", "$comment": "default: \"soft\"" }, "className": { "type": "string" }, "style": { "type": "object" }, "theme": { "type": "object", "description": "Theme override: partial tokens, or { light, dark }." }, "mode": { "enum": [ "auto", "system", "light", "dark" ], "description": "Colour mode." } }, "required": [ "type" ], "additionalProperties": false }, "choropleth-map": { "title": "Choropleth map", "description": "Colours the regions of a map by a normalised value, from GeoJSON you supply. Use: A rate, share or per-capita figure that varies by place, where the geographic pattern (a north-south divide, a cluster) is what the reader needs to see. Use a diverging scale for change or for values either side of a meaningful midpoint. Avoid: Raw counts, which mostly map population (normalise first, or use bar-chart); ranking regions precisely (use bar-chart); a handful of regions with no spatial pattern (use bar-chart); regions so different in size that small ones vanish (use a tile-grid GeoJSON).", "type": "object", "properties": { "type": { "const": "choropleth-map" }, "data": { "$ref": "#/definitions/data", "description": "Rows, CSV text, a URL, `{ url, path }`, an async function, or an Arrow-style table. Omit inside ``." }, "transform": { "anyOf": [ { "$ref": "#/definitions/transform" }, { "type": "array", "items": { "$ref": "#/definitions/transform" } } ], "description": "A pipeline of transforms applied before drawing." }, "title": { "type": "string", "description": "The title. One plain statement of what the data shows, with the number and the period (\"Monthly churn fell from 4.2% to 2.1% in 2024\"), or a plain label (\"Monthly churn, 2024\"). One clause, no figures of speech." }, "subtitle": { "type": "string", "description": "Measure, unit, population, period." }, "source": { "type": "string", "description": "Data source, shown as \"Source: ...\"." }, "note": { "type": "string", "description": "Method notes or caveats." }, "height": { "anyOf": [ { "type": "number" }, { "type": "string" } ], "description": "CSS height of the plot. Default 360." }, "aspect": { "type": "number", "description": "Width / height. Overrides `height`." }, "highlight": { "anyOf": [ { "type": "string" }, { "type": "array", "items": { "type": "string" } } ], "description": "The entity (or entities) the title is about. Every other series is drawn in grey." }, "annotations": { "type": "array", "items": { "$ref": "#/definitions/annotation" }, "description": "Reference lines, shaded bands and callouts, in data coordinates." }, "format": { "$ref": "#/definitions/format", "description": "How to print values: `\"compact\"`, `\"percent\"`, `\"currency:USD\"`, `\"{value} kg\"`, Intl options, or a function." }, "legend": { "type": "boolean", "description": "Show the legend. Default: shown when there are two or more series." }, "select": { "anyOf": [ { "type": "boolean" }, { "type": "string" } ], "description": "Make marks clickable to filter. Inside `` the selection filters every other chart. Pass a field name, or `true` to use the chart's category field." }, "option": { "type": "object", "description": "Deep-merged over the generated ECharts option, or a function that receives and returns it. Use it for ECharts settings no prop covers." }, "theme": { "type": "object", "description": "A full theme, `{ light, dark }` partial tokens, or flat tokens applied to both modes. Merged over the surrounding `InsightProvider` theme." }, "mode": { "enum": [ "auto", "system", "light", "dark" ], "description": "`\"auto\"` (default) follows the page, `\"system\"` follows the OS, or force `\"light\"` / `\"dark\"`." }, "renderer": { "enum": [ "auto", "svg", "canvas" ], "description": "`\"auto\"` (default) uses SVG for light charts and canvas for heavy ones." }, "animate": { "type": "boolean", "description": "Set false to disable animation for this chart. Reduced-motion preferences are always respected." }, "lazy": { "type": "boolean", "description": "Mount the chart only when it scrolls within 200px of the viewport. Default true (from `InsightProvider`)." }, "group": { "type": "string", "description": "Link tooltips with other charts sharing this group id." }, "exportable": { "anyOf": [ { "type": "boolean" }, { "type": "array", "items": { "enum": [ "png", "jpeg", "svg", "pdf", "csv", "json" ] } } ], "description": "Show an export menu: `true` or a list of formats from png, jpeg, svg, pdf, csv, json." }, "table": { "type": "boolean", "description": "Show a collapsible \"View data\" table under the chart." }, "alt": { "type": "string", "description": "Accessible description: the chart type and measures, then the main pattern and the notable values." }, "id": { "type": "string", "description": "Stable id for this chart's selection in the shared store." }, "className": { "type": "string", "description": "Class on the figure element." }, "style": { "type": "object", "description": "Inline style on the figure element." }, "geo": { "anyOf": [ {}, { "type": "string" } ], "description": "The map: a GeoJSON object, or a URL to fetch one from. Registered with ECharts automatically." }, "region": { "type": "string", "description": "Row field holding the region name that joins to the GeoJSON." }, "value": { "type": "string", "description": "Row field holding the value. Use a rate or share, not a raw count." }, "nameProperty": { "type": "string", "description": "GeoJSON feature property holding each region's name.", "$comment": "default: \"name\"" }, "scale": { "enum": [ "sequential", "diverging" ], "description": "Sequential for magnitude; diverging for values either side of a midpoint.", "$comment": "default: \"sequential\"" }, "midpoint": { "type": "number", "description": "Centre of the diverging scale.", "$comment": "default: 0" }, "domain": { "type": "array", "description": "Fix the colour scale instead of using the data's range." }, "labels": { "anyOf": [ { "type": "boolean" }, { "const": "value" } ], "description": "Print region names on the map; `\"value\"` adds the value on a second line.", "$comment": "default: false" }, "labelProperty": { "type": "string", "description": "GeoJSON feature property to print instead of the full name, e.g. a postal or ISO code." }, "missingLabel": { "type": "string", "description": "Legend text for regions without a value.", "$comment": "default: \"No data\"" }, "aspectScale": { "type": "number", "description": "Horizontal stretch for longitude; 1 for tile maps and projected coordinates.", "$comment": "default: 0.75" } }, "required": [ "type", "geo", "region", "value" ], "additionalProperties": false }, "circle-pack": { "title": "Circle pack", "description": "Shows parts as tightly packed circles sized by value, optionally clustered into groups, with the value and name printed inside each circle. Use: A poster view of 5 to about 60 parts of very different sizes where the reader should see the largest ones and their rough proportions at once: budgets by programme, emissions by source, users by product. One level of grouping is supported. Avoid: Values that need precise comparison (use bar-chart, where bars share a baseline); parts that must visibly add up to a whole (use treemap or waffle-chart); more than about 80 parts (use treemap); negative values (use diverging-bar-chart).", "type": "object", "properties": { "type": { "const": "circle-pack" }, "data": { "$ref": "#/definitions/data", "description": "Rows, CSV text, a URL, `{ url, path }`, an async function, or an Arrow-style table. Omit inside ``." }, "transform": { "anyOf": [ { "$ref": "#/definitions/transform" }, { "type": "array", "items": { "$ref": "#/definitions/transform" } } ], "description": "A pipeline of transforms applied before drawing." }, "title": { "type": "string", "description": "The title. One plain statement of what the data shows, with the number and the period (\"Monthly churn fell from 4.2% to 2.1% in 2024\"), or a plain label (\"Monthly churn, 2024\"). One clause, no figures of speech." }, "subtitle": { "type": "string", "description": "Measure, unit, population, period." }, "source": { "type": "string", "description": "Data source, shown as \"Source: ...\"." }, "note": { "type": "string", "description": "Method notes or caveats." }, "height": { "anyOf": [ { "type": "number" }, { "type": "string" } ], "description": "CSS height of the plot. Default 360." }, "aspect": { "type": "number", "description": "Width / height. Overrides `height`." }, "highlight": { "anyOf": [ { "type": "string" }, { "type": "array", "items": { "type": "string" } } ], "description": "The entity (or entities) the title is about. Every other series is drawn in grey." }, "annotations": { "type": "array", "items": { "$ref": "#/definitions/annotation" }, "description": "Reference lines, shaded bands and callouts, in data coordinates." }, "format": { "$ref": "#/definitions/format", "description": "How to print values: `\"compact\"`, `\"percent\"`, `\"currency:USD\"`, `\"{value} kg\"`, Intl options, or a function." }, "legend": { "type": "boolean", "description": "Show the legend. Default: shown when there are two or more series." }, "select": { "anyOf": [ { "type": "boolean" }, { "type": "string" } ], "description": "Make marks clickable to filter. Inside `` the selection filters every other chart. Pass a field name, or `true` to use the chart's category field." }, "option": { "type": "object", "description": "Deep-merged over the generated ECharts option, or a function that receives and returns it. Use it for ECharts settings no prop covers." }, "theme": { "type": "object", "description": "A full theme, `{ light, dark }` partial tokens, or flat tokens applied to both modes. Merged over the surrounding `InsightProvider` theme." }, "mode": { "enum": [ "auto", "system", "light", "dark" ], "description": "`\"auto\"` (default) follows the page, `\"system\"` follows the OS, or force `\"light\"` / `\"dark\"`." }, "renderer": { "enum": [ "auto", "svg", "canvas" ], "description": "`\"auto\"` (default) uses SVG for light charts and canvas for heavy ones." }, "animate": { "type": "boolean", "description": "Set false to disable animation for this chart. Reduced-motion preferences are always respected." }, "lazy": { "type": "boolean", "description": "Mount the chart only when it scrolls within 200px of the viewport. Default true (from `InsightProvider`)." }, "group": { "type": "string", "description": "Parent field. Circles sharing a group sit together and share a colour." }, "exportable": { "anyOf": [ { "type": "boolean" }, { "type": "array", "items": { "enum": [ "png", "jpeg", "svg", "pdf", "csv", "json" ] } } ], "description": "Show an export menu: `true` or a list of formats from png, jpeg, svg, pdf, csv, json." }, "table": { "type": "boolean", "description": "Show a collapsible \"View data\" table under the chart." }, "alt": { "type": "string", "description": "Accessible description: the chart type and measures, then the main pattern and the notable values." }, "id": { "type": "string", "description": "Stable id for this chart's selection in the shared store." }, "className": { "type": "string", "description": "Class on the figure element." }, "style": { "type": "object", "description": "Inline style on the figure element." }, "name": { "type": "string", "description": "Name field: one circle per row." }, "value": { "type": "string", "description": "Value field: circle area. Non-positive values are dropped." }, "ring": { "enum": [ "none", "group", "all" ], "description": "Thin dotted enclosing ring: one per group with its name and total, or one around the whole pack. Default \"group\" when `group` is set, else \"none\"." }, "colorBy": { "enum": [ "group", "value", "single" ], "description": "Colour by group, shade by value along the sequential ramp, or use the accent for every circle. Default \"group\" when `group` is set, else \"single\"." }, "icon": { "anyOf": [ { "type": "string" }, { "type": "object", "additionalProperties": { "type": "string" } } ], "description": "Icon drawn above the number in large circles: one for all, or a map from circle or group name to icon. Built-in name or `path://`." }, "sizeLegend": { "anyOf": [ { "type": "boolean" }, { "type": "array", "items": { "type": "number" } } ], "description": "Size key of nested reference circles. `true` picks round values; an array sets them.", "$comment": "default: false" }, "labels": { "type": "boolean", "description": "Print names and values inside circles, and beside the ones too small to hold them.", "$comment": "default: true" }, "names": { "type": "object", "additionalProperties": { "type": "string" }, "description": "Display names for group keys." } }, "required": [ "type", "name", "value" ], "additionalProperties": false }, "curve-rank": { "title": "Curve rank", "description": "Places each entity on two parallel scales, one per measure, and joins its two positions with a smooth S-curve labelled with the name and both values. Use: Two different measures of the same 4 to about 15 entities, when the point is how standing on one relates to standing on the other: price against sales, staff against output, cost against usage. Each side has its own scale, stated in its heading. Avoid: The same measure at two moments (use slope-chart); ranks across many periods (use bump-chart); more than about 15 entities or a statistical relationship (use scatter-chart); exact comparison on one measure (use bar-chart).", "type": "object", "properties": { "type": { "const": "curve-rank" }, "data": { "$ref": "#/definitions/data", "description": "Rows, CSV text, a URL, `{ url, path }`, an async function, or an Arrow-style table. Omit inside ``." }, "transform": { "anyOf": [ { "$ref": "#/definitions/transform" }, { "type": "array", "items": { "$ref": "#/definitions/transform" } } ], "description": "A pipeline of transforms applied before drawing." }, "title": { "type": "string", "description": "The title. One plain statement of what the data shows, with the number and the period (\"Monthly churn fell from 4.2% to 2.1% in 2024\"), or a plain label (\"Monthly churn, 2024\"). One clause, no figures of speech." }, "subtitle": { "type": "string", "description": "Measure, unit, population, period." }, "source": { "type": "string", "description": "Data source, shown as \"Source: ...\"." }, "note": { "type": "string", "description": "Method notes or caveats." }, "height": { "anyOf": [ { "type": "number" }, { "type": "string" } ], "description": "CSS height of the plot. Default 360." }, "aspect": { "type": "number", "description": "Width / height. Overrides `height`." }, "highlight": { "anyOf": [ { "type": "string" }, { "type": "array", "items": { "type": "string" } } ], "description": "The entity (or entities) the title is about. Every other series is drawn in grey." }, "annotations": { "type": "array", "items": { "$ref": "#/definitions/annotation" }, "description": "Reference lines, shaded bands and callouts, in data coordinates." }, "format": { "$ref": "#/definitions/format", "description": "How to print values: `\"compact\"`, `\"percent\"`, `\"currency:USD\"`, `\"{value} kg\"`, Intl options, or a function." }, "legend": { "type": "boolean", "description": "Show the legend. Default: shown when there are two or more series." }, "select": { "anyOf": [ { "type": "boolean" }, { "type": "string" } ], "description": "Make marks clickable to filter. Inside `` the selection filters every other chart. Pass a field name, or `true` to use the chart's category field." }, "option": { "type": "object", "description": "Deep-merged over the generated ECharts option, or a function that receives and returns it. Use it for ECharts settings no prop covers." }, "theme": { "type": "object", "description": "A full theme, `{ light, dark }` partial tokens, or flat tokens applied to both modes. Merged over the surrounding `InsightProvider` theme." }, "mode": { "enum": [ "auto", "system", "light", "dark" ], "description": "`\"auto\"` (default) follows the page, `\"system\"` follows the OS, or force `\"light\"` / `\"dark\"`." }, "renderer": { "enum": [ "auto", "svg", "canvas" ], "description": "`\"auto\"` (default) uses SVG for light charts and canvas for heavy ones." }, "animate": { "type": "boolean", "description": "Set false to disable animation for this chart. Reduced-motion preferences are always respected." }, "lazy": { "type": "boolean", "description": "Mount the chart only when it scrolls within 200px of the viewport. Default true (from `InsightProvider`)." }, "group": { "type": "string", "description": "Link tooltips with other charts sharing this group id." }, "exportable": { "anyOf": [ { "type": "boolean" }, { "type": "array", "items": { "enum": [ "png", "jpeg", "svg", "pdf", "csv", "json" ] } } ], "description": "Show an export menu: `true` or a list of formats from png, jpeg, svg, pdf, csv, json." }, "table": { "type": "boolean", "description": "Show a collapsible \"View data\" table under the chart." }, "alt": { "type": "string", "description": "Accessible description: the chart type and measures, then the main pattern and the notable values." }, "id": { "type": "string", "description": "Stable id for this chart's selection in the shared store." }, "className": { "type": "string", "description": "Class on the figure element." }, "style": { "type": "object", "description": "Inline style on the figure element." }, "name": { "type": "string", "description": "Entity field: one curve per row." }, "left": { "type": "string", "description": "Field for the left-hand measure." }, "right": { "type": "string", "description": "Field for the right-hand measure." }, "leftLabel": { "type": "string", "description": "Heading over the left rule: the measure and its unit. Defaults to the field name." }, "rightLabel": { "type": "string", "description": "Heading over the right rule. Defaults to the field name." }, "leftScale": { "enum": [ "linear", "log" ], "description": "Scale of the left measure. A log scale is stated in the heading.", "$comment": "default: \"linear\"" }, "rightScale": { "enum": [ "linear", "log" ], "description": "Scale of the right measure.", "$comment": "default: \"linear\"" }, "leftTop": { "enum": [ "high", "low" ], "description": "Which end of the left measure sits at the top.", "$comment": "default: \"high\"" }, "rightTop": { "enum": [ "high", "low" ], "description": "Which end of the right measure sits at the top.", "$comment": "default: \"high\"" }, "leftFormat": { "$ref": "#/definitions/format", "description": "How to print left values. Defaults to `format`." }, "rightFormat": { "$ref": "#/definitions/format", "description": "How to print right values. Defaults to `format`." }, "order": { "type": "array", "items": { "type": "string" }, "description": "Entity names in the order that assigns colours. Pass the same list to glyph-table to match its row colours." }, "colorBy": { "enum": [ "series", "none" ], "description": "`series`: one colour per entity; past the size of the theme's palette the extra colours are derived from the theme's own (glyph-table derives the same ones). `none`: every curve in the accent. Default: series while the entities fit the palette (at most 8), none beyond." }, "names": { "type": "object", "additionalProperties": { "type": "string" }, "description": "Display names for entity keys." } }, "required": [ "type", "name", "left", "right" ], "additionalProperties": false }, "data-table": { "title": "Data table", "description": "A restrained editorial table from rows and a column config: aligned tabular numbers, an optional in-cell bar, row highlight and click-to-sort headers. Use: When readers need to look up exact values, or compare a handful of entities across several measures with different units. Sort it by the column the caption refers to and highlight the row it names. Avoid: Showing a trend or a single comparison (use `line-chart` or `bar-chart`); more than about 7 columns or 30 rows without `maxHeight`.", "type": "object", "properties": { "type": { "const": "data-table" }, "rows": { "type": "array", "items": { "type": "object" }, "description": "One object per row." }, "columns": { "type": "array", "items": { "anyOf": [ { "type": "string" }, { "type": "object" } ] }, "description": "Columns in order. Defaults to every key of the first row. Numeric columns are right-aligned." }, "caption": { "type": "string", "description": "The table's title, as a real ``." }, "subtitle": { "type": "string", "description": "Units and period, under the caption." }, "source": { "type": "string", "description": "Shown under the table as \"Source: ...\"." }, "highlight": { "anyOf": [ { "type": "string" }, { "type": "number" }, { "type": "array", "items": { "anyOf": [ { "type": "string" }, { "type": "number" } ] } } ], "description": "Rows to emphasise, matched on the first column (or `highlightKey`)." }, "highlightKey": { "type": "string", "description": "Field `highlight` matches against." }, "sort": { "type": "object", "description": "Initial sort." }, "sortable": { "type": "boolean", "description": "Click or press Enter on a header to sort; a third press restores the original order.", "$comment": "default: true" }, "maxHeight": { "anyOf": [ { "type": "number" }, { "type": "string" } ], "description": "Height before the body scrolls under the sticky header." }, "density": { "enum": [ "comfortable", "compact" ], "description": "Row padding.", "$comment": "default: \"comfortable\"" }, "className": { "type": "string" }, "style": { "type": "object" }, "theme": { "type": "object", "description": "Theme override: partial tokens, or { light, dark }." }, "mode": { "enum": [ "auto", "system", "light", "dark" ], "description": "Colour mode." } }, "required": [ "type", "rows" ], "additionalProperties": false }, "delta": { "title": "Delta", "description": "An inline change indicator: direction arrow, signed value and an optional baseline label. Use: Next to a figure, in a sentence, a table cell or a tile, to say how much it changed and against what. Set `upIsGood: false` for measures where a fall is the good news (churn, emissions, wait times). Avoid: Standing alone as the main figure (use `big-number` or `stat-tile`, which include a delta). Do not omit the baseline label unless the surrounding text names it.", "type": "object", "properties": { "type": { "const": "delta" }, "value": { "anyOf": [ { "type": "number" }, { "type": "string" } ], "description": "The change. Numbers format as signed percentages by default (0.12 is +12%)." }, "label": { "type": "string", "description": "The baseline, e.g. \"vs last quarter\"." }, "upIsGood": { "type": "boolean", "description": "Whether an increase is good news; decides the colour only.", "$comment": "default: true" }, "direction": { "enum": [ "up", "down", "flat" ], "description": "Override the direction inferred from the sign." }, "format": { "$ref": "#/definitions/format", "description": "Number format, e.g. `\"signed\"` for absolute changes or `\"{value} pts\"`.", "$comment": "default: signed percent" }, "size": { "enum": [ "sm", "md", "lg" ], "description": "12, 14 or 16px. Inherits the surrounding size when omitted." }, "variant": { "enum": [ "text", "pill" ], "description": "`pill` adds a tinted capsule behind the value.", "$comment": "default: \"text\"" }, "className": { "type": "string" }, "style": { "type": "object" }, "theme": { "type": "object", "description": "Theme override: partial tokens, or { light, dark }." }, "mode": { "enum": [ "auto", "system", "light", "dark" ], "description": "Colour mode." } }, "required": [ "type", "value" ], "additionalProperties": false }, "diverging-bar-chart": { "title": "Diverging bar chart", "description": "Draws bars either side of a centre line: positive against negative values, or stacked agree / disagree responses around a neutral midpoint. Use: Values that can be above or below zero (net change, balance, deviation from average); survey scales where the split between the two sides matters; two opposed groups back to back. Avoid: Values that are all positive (use bar-chart); parts that do not have a natural two-sided order (use a stacked bar-chart); change between two dates (use arrow-chart or dumbbell-chart).", "type": "object", "properties": { "type": { "const": "diverging-bar-chart" }, "data": { "$ref": "#/definitions/data", "description": "Rows, CSV text, a URL, `{ url, path }`, an async function, or an Arrow-style table. Omit inside ``." }, "transform": { "anyOf": [ { "$ref": "#/definitions/transform" }, { "type": "array", "items": { "$ref": "#/definitions/transform" } } ], "description": "A pipeline of transforms applied before drawing." }, "title": { "type": "string", "description": "The title. One plain statement of what the data shows, with the number and the period (\"Monthly churn fell from 4.2% to 2.1% in 2024\"), or a plain label (\"Monthly churn, 2024\"). One clause, no figures of speech." }, "subtitle": { "type": "string", "description": "Measure, unit, population, period." }, "source": { "type": "string", "description": "Data source, shown as \"Source: ...\"." }, "note": { "type": "string", "description": "Method notes or caveats." }, "height": { "anyOf": [ { "type": "number" }, { "type": "string" } ], "description": "CSS height of the plot. Default 360." }, "aspect": { "type": "number", "description": "Width / height. Overrides `height`." }, "highlight": { "anyOf": [ { "type": "string" }, { "type": "array", "items": { "type": "string" } } ], "description": "The entity (or entities) the title is about. Every other series is drawn in grey." }, "annotations": { "type": "array", "items": { "$ref": "#/definitions/annotation" }, "description": "Reference lines, shaded bands and callouts, in data coordinates." }, "format": { "$ref": "#/definitions/format", "description": "How to print values: `\"compact\"`, `\"percent\"`, `\"currency:USD\"`, `\"{value} kg\"`, Intl options, or a function." }, "legend": { "type": "boolean", "description": "Show the legend. Default: shown when there are two or more series." }, "select": { "anyOf": [ { "type": "boolean" }, { "type": "string" } ], "description": "Make marks clickable to filter. Inside `` the selection filters every other chart. Pass a field name, or `true` to use the chart's category field." }, "option": { "type": "object", "description": "Deep-merged over the generated ECharts option, or a function that receives and returns it. Use it for ECharts settings no prop covers." }, "theme": { "type": "object", "description": "A full theme, `{ light, dark }` partial tokens, or flat tokens applied to both modes. Merged over the surrounding `InsightProvider` theme." }, "mode": { "enum": [ "auto", "system", "light", "dark" ], "description": "`\"auto\"` (default) follows the page, `\"system\"` follows the OS, or force `\"light\"` / `\"dark\"`." }, "renderer": { "enum": [ "auto", "svg", "canvas" ], "description": "`\"auto\"` (default) uses SVG for light charts and canvas for heavy ones." }, "animate": { "type": "boolean", "description": "Set false to disable animation for this chart. Reduced-motion preferences are always respected." }, "lazy": { "type": "boolean", "description": "Mount the chart only when it scrolls within 200px of the viewport. Default true (from `InsightProvider`)." }, "group": { "type": "string", "description": "Link tooltips with other charts sharing this group id." }, "exportable": { "anyOf": [ { "type": "boolean" }, { "type": "array", "items": { "enum": [ "png", "jpeg", "svg", "pdf", "csv", "json" ] } } ], "description": "Show an export menu: `true` or a list of formats from png, jpeg, svg, pdf, csv, json." }, "table": { "type": "boolean", "description": "Show a collapsible \"View data\" table under the chart." }, "alt": { "type": "string", "description": "Accessible description: the chart type and measures, then the main pattern and the notable values." }, "id": { "type": "string", "description": "Stable id for this chart's selection in the shared store." }, "className": { "type": "string", "description": "Class on the figure element." }, "style": { "type": "object", "description": "Inline style on the figure element." }, "x": { "type": "string", "description": "Category field." }, "y": { "anyOf": [ { "type": "string" }, { "type": "array", "items": { "type": "string" } } ], "description": "One signed value field, or several fields ordered from most negative to most positive." }, "series": { "type": "string", "description": "Field that splits rows into ordered series (long data)." }, "neutral": { "anyOf": [ { "type": "string" }, { "const": false } ], "description": "Series centred on the midline. Default: the middle one of an odd number of series." }, "percent": { "type": "boolean", "description": "Normalise each row to 100% (stacked series).", "$comment": "default: false" }, "colors": { "enum": [ "polarity", "sentiment" ], "description": "Single series: diverging poles, or the positive / negative colours when one side is good and the other bad.", "$comment": "default: \"polarity\"" }, "sort": { "enum": [ "none", "asc", "desc" ], "description": "Row order. Default: descending by value or by the positive side; data order for dates." }, "orientation": { "enum": [ "auto", "horizontal", "vertical" ], "description": "Horizontal, except vertical for a single series over dates.", "$comment": "default: \"auto\"" }, "labels": { "type": "boolean", "description": "Values at bar ends (single) or inside segments (stacked). Default: on when there is room." }, "names": { "type": "object", "additionalProperties": { "type": "string" }, "description": "Display names for series keys." } }, "required": [ "type", "x", "y" ], "additionalProperties": false }, "donut-chart": { "title": "Donut chart", "description": "Shows how 2 to 5 parts make up one whole, with each slice labelled by name and share. Use: A simple composition with one dominant part, or one part the title is about, where the total itself is worth printing in the centre. Avoid: More than 5 categories or parts of similar size that must be ranked (use bar-chart); a single figure (use big-number); composition compared across groups or time (use bar-chart with stack \"percent\"); a compact card (use segmented-bar).", "type": "object", "properties": { "type": { "const": "donut-chart" }, "data": { "$ref": "#/definitions/data", "description": "Rows, CSV text, a URL, `{ url, path }`, an async function, or an Arrow-style table. Omit inside ``." }, "transform": { "anyOf": [ { "$ref": "#/definitions/transform" }, { "type": "array", "items": { "$ref": "#/definitions/transform" } } ], "description": "A pipeline of transforms applied before drawing." }, "title": { "type": "string", "description": "The title. One plain statement of what the data shows, with the number and the period (\"Monthly churn fell from 4.2% to 2.1% in 2024\"), or a plain label (\"Monthly churn, 2024\"). One clause, no figures of speech." }, "subtitle": { "type": "string", "description": "Measure, unit, population, period." }, "source": { "type": "string", "description": "Data source, shown as \"Source: ...\"." }, "note": { "type": "string", "description": "Method notes or caveats." }, "height": { "anyOf": [ { "type": "number" }, { "type": "string" } ], "description": "CSS height of the plot. Default 360." }, "aspect": { "type": "number", "description": "Width / height. Overrides `height`." }, "highlight": { "anyOf": [ { "type": "string" }, { "type": "array", "items": { "type": "string" } } ], "description": "The entity (or entities) the title is about. Every other series is drawn in grey." }, "annotations": { "type": "array", "items": { "$ref": "#/definitions/annotation" }, "description": "Reference lines, shaded bands and callouts, in data coordinates." }, "format": { "$ref": "#/definitions/format", "description": "How to print values: `\"compact\"`, `\"percent\"`, `\"currency:USD\"`, `\"{value} kg\"`, Intl options, or a function." }, "legend": { "type": "boolean", "description": "Show the legend. Default: shown when there are two or more series." }, "select": { "anyOf": [ { "type": "boolean" }, { "type": "string" } ], "description": "Make marks clickable to filter. Inside `` the selection filters every other chart. Pass a field name, or `true` to use the chart's category field." }, "option": { "type": "object", "description": "Deep-merged over the generated ECharts option, or a function that receives and returns it. Use it for ECharts settings no prop covers." }, "theme": { "type": "object", "description": "A full theme, `{ light, dark }` partial tokens, or flat tokens applied to both modes. Merged over the surrounding `InsightProvider` theme." }, "mode": { "enum": [ "auto", "system", "light", "dark" ], "description": "`\"auto\"` (default) follows the page, `\"system\"` follows the OS, or force `\"light\"` / `\"dark\"`." }, "renderer": { "enum": [ "auto", "svg", "canvas" ], "description": "`\"auto\"` (default) uses SVG for light charts and canvas for heavy ones." }, "animate": { "type": "boolean", "description": "Set false to disable animation for this chart. Reduced-motion preferences are always respected." }, "lazy": { "type": "boolean", "description": "Mount the chart only when it scrolls within 200px of the viewport. Default true (from `InsightProvider`)." }, "group": { "type": "string", "description": "Link tooltips with other charts sharing this group id." }, "exportable": { "anyOf": [ { "type": "boolean" }, { "type": "array", "items": { "enum": [ "png", "jpeg", "svg", "pdf", "csv", "json" ] } } ], "description": "Show an export menu: `true` or a list of formats from png, jpeg, svg, pdf, csv, json." }, "table": { "type": "boolean", "description": "Show a collapsible \"View data\" table under the chart." }, "alt": { "type": "string", "description": "Accessible description: the chart type and measures, then the main pattern and the notable values." }, "id": { "type": "string", "description": "Stable id for this chart's selection in the shared store." }, "className": { "type": "string", "description": "Class on the figure element." }, "style": { "type": "object", "description": "Inline style on the figure element." }, "name": { "type": "string", "description": "Category field: one slice per distinct value." }, "value": { "type": "string", "description": "Value field." }, "maxSlices": { "type": "number", "description": "Most slices drawn, including \"Other\"; smaller categories are folded.", "$comment": "default: 5" }, "centerLabel": { "type": "string", "description": "Small label in the hole, e.g. \"Total\". Turns the centre text on." }, "centerValue": { "anyOf": [ { "type": "string" }, { "type": "number" } ], "description": "Big text in the hole. Default: the formatted total when `centerLabel` is set." }, "otherLabel": { "type": "string", "description": "Name of the folded slice.", "$comment": "default: \"Other\"" }, "names": { "type": "object", "additionalProperties": { "type": "string" }, "description": "Display names for category keys." } }, "required": [ "type", "name", "value" ], "additionalProperties": false }, "dumbbell-chart": { "title": "Dumbbell chart", "description": "Shows two values per category as dots joined by a line, so the length of the line shows the difference. Use: Before / after or group A / group B across up to about 20 categories, when the size of the difference is what the reader needs. Avoid: A single value per category (use lollipop-chart or bar-chart); when the direction of change matters more than the two levels (use arrow-chart); more than two points in time (use slope-chart or line-chart).", "type": "object", "properties": { "type": { "const": "dumbbell-chart" }, "data": { "$ref": "#/definitions/data", "description": "Rows, CSV text, a URL, `{ url, path }`, an async function, or an Arrow-style table. Omit inside ``." }, "transform": { "anyOf": [ { "$ref": "#/definitions/transform" }, { "type": "array", "items": { "$ref": "#/definitions/transform" } } ], "description": "A pipeline of transforms applied before drawing." }, "title": { "type": "string", "description": "The title. One plain statement of what the data shows, with the number and the period (\"Monthly churn fell from 4.2% to 2.1% in 2024\"), or a plain label (\"Monthly churn, 2024\"). One clause, no figures of speech." }, "subtitle": { "type": "string", "description": "Measure, unit, population, period." }, "source": { "type": "string", "description": "Data source, shown as \"Source: ...\"." }, "note": { "type": "string", "description": "Method notes or caveats." }, "height": { "anyOf": [ { "type": "number" }, { "type": "string" } ], "description": "CSS height of the plot. Default 360." }, "aspect": { "type": "number", "description": "Width / height. Overrides `height`." }, "highlight": { "anyOf": [ { "type": "string" }, { "type": "array", "items": { "type": "string" } } ], "description": "The entity (or entities) the title is about. Every other series is drawn in grey." }, "annotations": { "type": "array", "items": { "$ref": "#/definitions/annotation" }, "description": "Reference lines, shaded bands and callouts, in data coordinates." }, "format": { "$ref": "#/definitions/format", "description": "How to print values: `\"compact\"`, `\"percent\"`, `\"currency:USD\"`, `\"{value} kg\"`, Intl options, or a function." }, "legend": { "type": "boolean", "description": "Show the legend. Default: shown when there are two or more series." }, "select": { "anyOf": [ { "type": "boolean" }, { "type": "string" } ], "description": "Make marks clickable to filter. Inside `` the selection filters every other chart. Pass a field name, or `true` to use the chart's category field." }, "option": { "type": "object", "description": "Deep-merged over the generated ECharts option, or a function that receives and returns it. Use it for ECharts settings no prop covers." }, "theme": { "type": "object", "description": "A full theme, `{ light, dark }` partial tokens, or flat tokens applied to both modes. Merged over the surrounding `InsightProvider` theme." }, "mode": { "enum": [ "auto", "system", "light", "dark" ], "description": "`\"auto\"` (default) follows the page, `\"system\"` follows the OS, or force `\"light\"` / `\"dark\"`." }, "renderer": { "enum": [ "auto", "svg", "canvas" ], "description": "`\"auto\"` (default) uses SVG for light charts and canvas for heavy ones." }, "animate": { "type": "boolean", "description": "Set false to disable animation for this chart. Reduced-motion preferences are always respected." }, "lazy": { "type": "boolean", "description": "Mount the chart only when it scrolls within 200px of the viewport. Default true (from `InsightProvider`)." }, "group": { "type": "string", "description": "Link tooltips with other charts sharing this group id." }, "exportable": { "anyOf": [ { "type": "boolean" }, { "type": "array", "items": { "enum": [ "png", "jpeg", "svg", "pdf", "csv", "json" ] } } ], "description": "Show an export menu: `true` or a list of formats from png, jpeg, svg, pdf, csv, json." }, "table": { "type": "boolean", "description": "Show a collapsible \"View data\" table under the chart." }, "alt": { "type": "string", "description": "Accessible description: the chart type and measures, then the main pattern and the notable values." }, "id": { "type": "string", "description": "Stable id for this chart's selection in the shared store." }, "className": { "type": "string", "description": "Class on the figure element." }, "style": { "type": "object", "description": "Inline style on the figure element." }, "category": { "type": "string", "description": "Category field: one row of the chart each." }, "from": { "type": "string", "description": "Field with the first value, or (long data) the `series` value that marks it." }, "to": { "type": "string", "description": "Field with the second value, or (long data) the `series` value that marks it." }, "series": { "type": "string", "description": "Long data: the field whose values are `from` and `to`." }, "value": { "type": "string", "description": "Long data: the measure field.", "$comment": "default: \"value\"" }, "kind": { "enum": [ "change", "groups" ], "description": "`change` draws a tint then the accent (before / after); `groups` uses two hues (two peers).", "$comment": "default: \"change\"" }, "sort": { "enum": [ "gap", "from", "to", "none" ], "description": "Row order.", "$comment": "default: \"gap\"" }, "order": { "enum": [ "desc", "asc" ], "description": "Sort direction.", "$comment": "default: \"desc\"" }, "labels": { "type": "boolean", "description": "Value labels beside both dots. Default: on for up to 14 rows; otherwise a value axis is drawn." }, "gapLabel": { "anyOf": [ { "type": "boolean" }, { "type": "string" } ], "description": "Print the gap in a right-hand column; a string sets the column header.", "$comment": "default: false" }, "zero": { "type": "boolean", "description": "Start the value axis at zero.", "$comment": "default: false" }, "names": { "type": "object", "additionalProperties": { "type": "string" }, "description": "Display names for the `from` and `to` keys." } }, "required": [ "type", "category", "from", "to" ], "additionalProperties": false }, "fan-flow": { "title": "Fan flow", "description": "One solid block that splits into curved ribbons, each as thick as its value, ending at an aligned column of names, values and shares. Use: One total divided among 4 to about 14 destinations (or collected from that many origins, with `direction: \"in\"`) when the picture of the split is the point: where a budget goes, what a day's water is used for, which sources feed one total. Avoid: Flows with more than one stage or several sources (use sankey-chart); precise comparison of the parts (use bar-chart); 2 to 4 parts (use segmented-bar or donut-chart); values that can be negative (use bar-chart).", "type": "object", "properties": { "type": { "const": "fan-flow" }, "data": { "$ref": "#/definitions/data", "description": "Rows, CSV text, a URL, `{ url, path }`, an async function, or an Arrow-style table. Omit inside ``." }, "transform": { "anyOf": [ { "$ref": "#/definitions/transform" }, { "type": "array", "items": { "$ref": "#/definitions/transform" } } ], "description": "A pipeline of transforms applied before drawing." }, "title": { "type": "string", "description": "The title. One plain statement of what the data shows, with the number and the period (\"Monthly churn fell from 4.2% to 2.1% in 2024\"), or a plain label (\"Monthly churn, 2024\"). One clause, no figures of speech." }, "subtitle": { "type": "string", "description": "Measure, unit, population, period." }, "source": { "type": "string", "description": "Data source, shown as \"Source: ...\"." }, "note": { "type": "string", "description": "Method notes or caveats." }, "height": { "anyOf": [ { "type": "number" }, { "type": "string" } ], "description": "CSS height of the plot. Default 360." }, "aspect": { "type": "number", "description": "Width / height. Overrides `height`." }, "highlight": { "anyOf": [ { "type": "string" }, { "type": "array", "items": { "type": "string" } } ], "description": "The entity (or entities) the title is about. Every other series is drawn in grey." }, "annotations": { "type": "array", "items": { "$ref": "#/definitions/annotation" }, "description": "Reference lines, shaded bands and callouts, in data coordinates." }, "format": { "$ref": "#/definitions/format", "description": "How to print values: `\"compact\"`, `\"percent\"`, `\"currency:USD\"`, `\"{value} kg\"`, Intl options, or a function." }, "legend": { "type": "boolean", "description": "Show the legend. Default: shown when there are two or more series." }, "select": { "anyOf": [ { "type": "boolean" }, { "type": "string" } ], "description": "Make marks clickable to filter. Inside `` the selection filters every other chart. Pass a field name, or `true` to use the chart's category field." }, "option": { "type": "object", "description": "Deep-merged over the generated ECharts option, or a function that receives and returns it. Use it for ECharts settings no prop covers." }, "theme": { "type": "object", "description": "A full theme, `{ light, dark }` partial tokens, or flat tokens applied to both modes. Merged over the surrounding `InsightProvider` theme." }, "mode": { "enum": [ "auto", "system", "light", "dark" ], "description": "`\"auto\"` (default) follows the page, `\"system\"` follows the OS, or force `\"light\"` / `\"dark\"`." }, "renderer": { "enum": [ "auto", "svg", "canvas" ], "description": "`\"auto\"` (default) uses SVG for light charts and canvas for heavy ones." }, "animate": { "type": "boolean", "description": "Set false to disable animation for this chart. Reduced-motion preferences are always respected." }, "lazy": { "type": "boolean", "description": "Mount the chart only when it scrolls within 200px of the viewport. Default true (from `InsightProvider`)." }, "group": { "type": "string", "description": "Link tooltips with other charts sharing this group id." }, "exportable": { "anyOf": [ { "type": "boolean" }, { "type": "array", "items": { "enum": [ "png", "jpeg", "svg", "pdf", "csv", "json" ] } } ], "description": "Show an export menu: `true` or a list of formats from png, jpeg, svg, pdf, csv, json." }, "table": { "type": "boolean", "description": "Show a collapsible \"View data\" table under the chart." }, "alt": { "type": "string", "description": "Accessible description: the chart type and measures, then the main pattern and the notable values." }, "id": { "type": "string", "description": "Stable id for this chart's selection in the shared store." }, "className": { "type": "string", "description": "Class on the figure element." }, "style": { "type": "object", "description": "Inline style on the figure element." }, "name": { "type": "string", "description": "Destination field: one ribbon per distinct value." }, "value": { "type": "string", "description": "Value field: ribbon thickness. Rows sharing a name are summed; non-positive values are dropped." }, "trunk": { "type": "string", "description": "Label printed in the single block, with the total." }, "direction": { "enum": [ "out", "in" ], "description": "`out`: one block fans out to many labels on the right. `in`: many labels on the left flow into one block.", "$comment": "default: \"out\"" }, "maxItems": { "type": "number", "description": "Ribbons to keep; the rest are summed into the remainder ribbon.", "$comment": "default: 12" }, "otherLabel": { "type": "string", "description": "Name of the remainder ribbon, drawn in the context colour. A row with this name is treated as the remainder.", "$comment": "default: \"Other\"" }, "tagged": { "type": "array", "items": { "type": "string" }, "description": "Destinations marked with a dotted outline around the name." }, "tagLabel": { "type": "string", "description": "What the dotted outline means, printed in the key. Needed for `tagged` to be drawn." }, "share": { "type": "boolean", "description": "Print each ribbon's share of the total. Dropped on narrow screens.", "$comment": "default: true" }, "colorBy": { "enum": [ "series", "none" ], "description": "`series`: one colour per destination; past the size of the theme's palette the extra colours are derived from the theme's own. `none`: every ribbon in the accent. Default: series while the destinations fit the palette (at most 8), none beyond." }, "sort": { "enum": [ "value", "none" ], "description": "Largest first, or the data order.", "$comment": "default: \"value\"" } }, "required": [ "type", "name", "value" ], "additionalProperties": false }, "funnel-chart": { "title": "Funnel chart", "description": "Shows how many remain at each step of a sequence, with conversion and drop-off between steps. Use: A strict sequence where each stage is a subset of the one before: sign-up flows, hiring pipelines, sales stages, applications to admissions. 3 to 7 stages. Avoid: Stages that are not sequential subsets, or categories with no order (use bar-chart); flows that split to several destinations (use sankey-chart); conversion tracked over time (use line-chart).", "type": "object", "properties": { "type": { "const": "funnel-chart" }, "data": { "$ref": "#/definitions/data", "description": "Rows, CSV text, a URL, `{ url, path }`, an async function, or an Arrow-style table. Omit inside ``." }, "transform": { "anyOf": [ { "$ref": "#/definitions/transform" }, { "type": "array", "items": { "$ref": "#/definitions/transform" } } ], "description": "A pipeline of transforms applied before drawing." }, "title": { "type": "string", "description": "The title. One plain statement of what the data shows, with the number and the period (\"Monthly churn fell from 4.2% to 2.1% in 2024\"), or a plain label (\"Monthly churn, 2024\"). One clause, no figures of speech." }, "subtitle": { "type": "string", "description": "Measure, unit, population, period." }, "source": { "type": "string", "description": "Data source, shown as \"Source: ...\"." }, "note": { "type": "string", "description": "Method notes or caveats." }, "height": { "anyOf": [ { "type": "number" }, { "type": "string" } ], "description": "CSS height of the plot. Default 360." }, "aspect": { "type": "number", "description": "Width / height. Overrides `height`." }, "highlight": { "anyOf": [ { "type": "string" }, { "type": "array", "items": { "type": "string" } } ], "description": "The entity (or entities) the title is about. Every other series is drawn in grey." }, "annotations": { "type": "array", "items": { "$ref": "#/definitions/annotation" }, "description": "Reference lines, shaded bands and callouts, in data coordinates." }, "format": { "$ref": "#/definitions/format", "description": "How to print values: `\"compact\"`, `\"percent\"`, `\"currency:USD\"`, `\"{value} kg\"`, Intl options, or a function." }, "legend": { "type": "boolean", "description": "Show the legend. Default: shown when there are two or more series." }, "select": { "anyOf": [ { "type": "boolean" }, { "type": "string" } ], "description": "Make marks clickable to filter. Inside `` the selection filters every other chart. Pass a field name, or `true` to use the chart's category field." }, "option": { "type": "object", "description": "Deep-merged over the generated ECharts option, or a function that receives and returns it. Use it for ECharts settings no prop covers." }, "theme": { "type": "object", "description": "A full theme, `{ light, dark }` partial tokens, or flat tokens applied to both modes. Merged over the surrounding `InsightProvider` theme." }, "mode": { "enum": [ "auto", "system", "light", "dark" ], "description": "`\"auto\"` (default) follows the page, `\"system\"` follows the OS, or force `\"light\"` / `\"dark\"`." }, "renderer": { "enum": [ "auto", "svg", "canvas" ], "description": "`\"auto\"` (default) uses SVG for light charts and canvas for heavy ones." }, "animate": { "type": "boolean", "description": "Set false to disable animation for this chart. Reduced-motion preferences are always respected." }, "lazy": { "type": "boolean", "description": "Mount the chart only when it scrolls within 200px of the viewport. Default true (from `InsightProvider`)." }, "group": { "type": "string", "description": "Link tooltips with other charts sharing this group id." }, "exportable": { "anyOf": [ { "type": "boolean" }, { "type": "array", "items": { "enum": [ "png", "jpeg", "svg", "pdf", "csv", "json" ] } } ], "description": "Show an export menu: `true` or a list of formats from png, jpeg, svg, pdf, csv, json." }, "table": { "type": "boolean", "description": "Show a collapsible \"View data\" table under the chart." }, "alt": { "type": "string", "description": "Accessible description: the chart type and measures, then the main pattern and the notable values." }, "id": { "type": "string", "description": "Stable id for this chart's selection in the shared store." }, "className": { "type": "string", "description": "Class on the figure element." }, "style": { "type": "object", "description": "Inline style on the figure element." }, "stage": { "type": "string", "description": "Stage field. Rows are read in data order; the first row is the top of the funnel." }, "value": { "type": "string", "description": "Count field." }, "dropoff": { "type": "boolean", "description": "State the drop-off between consecutive stages.", "$comment": "default: true" }, "dropoffLabel": { "type": "string", "description": "Word for what is lost between stages.", "$comment": "default: \"dropped off\"" } }, "required": [ "type", "stage", "value" ], "additionalProperties": false }, "glyph-table": { "title": "Glyph table", "description": "A table with one row per entity in which every number is drawn as a small form chosen per column (counted dots, squares or icons, a ring, a sized circle, a bar) with the value printed beside it. Use: Comparing 3 to about 12 entities across 2 to 5 measures with different units, when the table should read as a graphic: profiles of products, cities, teams or species. Pair it with curve-rank by passing both the same `order`. Avoid: Looking up many exact values, sorting, or more than about 12 rows (use data-table); one measure across entities (use bar-chart or pictogram-chart); a trend over time (use line-chart or small-multiples).", "type": "object", "properties": { "type": { "const": "glyph-table" }, "rows": { "type": "array", "items": { "type": "object" }, "description": "One object per entity." }, "name": { "type": "string", "description": "Field holding the entity name. Defaults to the first key of the first row." }, "nameLabel": { "type": "string", "description": "Heading of the name column." }, "columns": { "type": "array", "items": { "type": "object" }, "description": "Glyph columns in order. `dots`, `blocks` and `icons` draw one mark per `unit` (default 1, raised to a round number when the largest value would not fit, and stated in the heading). `ring` fills to `max` (default 100, or 1 for fractions). `circle` is sized by area and `bar` by length against `max` (default: the column's largest value). `text` prints the value alone." }, "order": { "type": "array", "items": { "type": "string" }, "description": "Entity names in display order; also assigns colours. Pass the same list to curve-rank to match its curve colours." }, "highlight": { "anyOf": [ { "type": "string" }, { "type": "array", "items": { "type": "string" } } ], "description": "Entities drawn in colour; every other row turns grey." }, "colorBy": { "enum": [ "series", "none" ], "description": "`series`: one colour per entity; past the size of the theme's palette the extra colours are derived from the theme's own (curve-rank derives the same ones). `none`: every row in the accent. Default: series while the rows fit the palette (at most 8), none beyond." }, "caption": { "type": "string", "description": "The table's title, as a real ``." }, "subtitle": { "type": "string", "description": "Measures, units and period, under the caption." }, "source": { "type": "string", "description": "Shown under the table as \"Source: ...\"." }, "note": { "type": "string", "description": "Method notes or caveats, shown under the table." }, "select": { "type": "boolean", "description": "Let readers click a row (or press Enter on it) to select it; the other rows fade." }, "selected": { "type": "array", "items": { "type": "string" }, "description": "Controlled selection: the entity names currently selected. When given, the table shows exactly this list and a click only calls `onSelect`. Omit it and the table keeps its own selection." }, "className": { "type": "string" }, "style": { "type": "object" }, "theme": { "type": "object", "description": "Theme override: partial tokens, or { light, dark }." }, "mode": { "enum": [ "auto", "system", "light", "dark" ], "description": "Colour mode." } }, "required": [ "type", "rows", "columns" ], "additionalProperties": false }, "headline": { "title": "Headline", "description": "The opening block of a piece or section: kicker, title, one-sentence deck and a byline/date line. Use: At the top of a data story (`page`), at the start of each chapter (`section`), or as the heading of a tile (`card`). Write the title as one plain fact with its number. Write the deck as a second plain sentence. Avoid: Titling a single chart: charts carry their own `title` and `subtitle`. For numbered chapters use `step-marker`.", "type": "object", "properties": { "type": { "const": "headline" }, "title": { "type": "string", "description": "One fact with its number, as a plain sentence. Wraps balanced." }, "kicker": { "type": "string", "description": "Small label above the title: section, series or topic. Sentence case." }, "deck": { "type": "string", "description": "One-sentence standfirst." }, "byline": { "type": "string", "description": "Author line, shown as written, e.g. \"By Ana Ruiz\"." }, "date": { "type": "string", "description": "ISO dates are formatted for the locale and wrapped in `