{ "$schema": "https://json-schema.org/draft/2020-12/schema", "name": "semiotic", "version": "3.8.9", "description": "React data visualization library for charts, networks, and beyond", "tools": [ { "type": "function", "function": { "name": "LineChart", "description": "Line traces with curve interpolation, area fill, and point markers. Use for time series, trends, and continuous data.", "parameters": { "type": "object", "properties": { "mode": { "type": "string", "enum": [ "primary", "context", "sparkline", "mobile" ], "description": "Display mode controlling default size, decoration, margins, labels, and interaction.", "default": "primary" }, "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object", "description": "Object margin. A side value of \"auto\" or null leaves that side available for auto-reservation." }, "className": { "type": "string" }, "title": { "type": "string", "description": "Visible chart title and the chart's accessible name." }, "description": { "type": "string", "description": "Concise accessible description that overrides the chart's generated aria-label." }, "summary": { "type": "string", "description": "Screen-reader-only summary of the chart's key takeaway; include keyboard interaction guidance when relevant." }, "accessibleTable": { "type": "boolean", "description": "Expose the chart data through Semiotic's screen-reader data table.", "default": true }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "legendInteraction": { "type": "string", "enum": [ "highlight", "isolate", "none" ], "description": "Legend interaction mode: highlight on hover, isolate on click, or none.", "default": "none" }, "legendPosition": { "type": "string", "enum": [ "right", "left", "top", "bottom" ], "description": "Position the legend beside or above/below the plot.", "default": "right" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": "string", "x-semiotic-runtime-types": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array", "object" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "object", "string" ], "description": "Tooltip: true/false, \"multi\", { mode: \"multi\", content? }, a custom function, or { fields, title } config. Multi mode shows every series at the hovered x; custom multi content receives allSeries/xValue.", "x-semiotic-runtime-types": [ "boolean", "function", "object", "string" ] }, "annotations": { "type": "array", "description": "Annotation objects to render on the chart. Each must have a `type` field. Position using your data field names (e.g. { type: \"widget\", month: \"Jan\", revenue: 500 }). Supported types: \"widget\" (arbitrary HTML/React content via foreignObject — v3 replacement for htmlAnnotationRules), \"label\" (callout with connector), \"callout\" (circle + label), \"text\" (plain label), \"y-threshold\" (horizontal reference line), \"x-threshold\" (vertical reference line), \"band\" (shaded y-region), \"enclose\" (circle around points), \"rect-enclose\" (rect around points), \"highlight\" (colored dots on filtered points), \"trend\" (regression line), \"envelope\" (upper/lower bounds), \"anomaly-band\" (mean ± stddev), \"forecast\" (extrapolated trend). Widget annotations accept: content (ReactNode), dx, dy, width, height, anchor (\"fixed\"|\"latest\"|\"sticky\"). Threshold annotations accept: value, label, color, strokeWidth, strokeDasharray. Enclose annotations accept: coordinates (array of data objects), label, color, padding.", "items": { "type": "object", "properties": { "type": { "type": "string", "enum": [ "widget", "label", "callout", "text", "bracket", "y-threshold", "x-threshold", "band", "enclose", "rect-enclose", "highlight", "trend", "envelope", "anomaly-band", "forecast" ], "description": "Annotation type" } }, "required": [ "type" ] } }, "autoPlaceAnnotations": { "type": [ "boolean", "object" ], "description": "Opt-in annotation placement pass. Chooses dx/dy for note-like annotations without manual offsets and avoids note/mark/edge overlaps where possible.", "default": false }, "responsiveRules": { "type": "array", "description": "Semantic responsive transforms applied before chart-mode defaults." }, "mobileSemantics": { "type": "object", "description": "Phone/mobile contract consumed by audits, recipes, adapters, and agents." }, "mobileInteraction": { "type": [ "boolean", "object" ], "description": "Touch-first interaction policy for phone-sized chart slots." }, "maxDevicePixelRatio": { "type": "number", "description": "Maximum canvas backing-store DPR. Defaults to 3 on desktop and 2 on coarse-pointer/small-screen devices; canvases repaint when browser zoom or display density changes." }, "axisExtent": { "type": "string", "enum": [ "nice", "exact" ], "description": "Tick endpoint mode. \"nice\" rounds endpoints to readable values; \"exact\" pins the first and last tick to the actual data min and max with equidistant intermediates. Affects XY x/y axes and ordinal value axis only.", "default": "nice" }, "animate": { "type": [ "boolean", "object" ], "description": "Enable mark transitions (boolean or {duration?, easing?, intro?})." }, "loading": { "type": "boolean", "description": "Show loading skeleton / loadingContent." }, "hoverHighlight": { "type": "boolean", "description": "Dim non-hovered series/categories (requires colorBy string field)." }, "chartId": { "type": "string", "description": "Stable id for linked selection / observation / nav sync." }, "emphasis": { "type": "string", "enum": [ "primary", "secondary" ] }, "responsiveWidth": { "type": "boolean" }, "responsiveHeight": { "type": "boolean" }, "color": { "type": "string", "description": "Uniform mark fill (primitive styling)." }, "stroke": { "type": "string" }, "strokeWidth": { "type": "number" }, "opacity": { "type": "number" }, "xLabel": { "type": "string" }, "yLabel": { "type": "string" }, "xScaleType": { "type": "string", "enum": [ "linear", "log", "time" ], "description": "x scale type. \"time\" builds a scaleTime (required for landmark ticks on timestamps)." }, "yScaleType": { "type": "string", "enum": [ "linear", "log", "time" ], "description": "y scale type." }, "data": { "type": "array", "description": "Array of data objects" }, "xAccessor": { "type": "string", "description": "Key or accessor function for x-axis values. Functions can derive a value, e.g. `d => d.timestamp`.", "default": "x", "x-semiotic-runtime-types": [ "string", "function" ] }, "yAccessor": { "type": "string", "description": "Key or accessor function for y-axis values. Functions support dynamic lookups, e.g. `d => d[d.metricLabel]`.", "default": "y", "x-semiotic-runtime-types": [ "string", "function" ] }, "lineBy": { "type": "string", "description": "Key to group data into separate lines", "x-semiotic-runtime-types": [ "string", "function" ] }, "lineDataAccessor": { "type": "string", "description": "Key for the coordinates array within each line object", "default": "coordinates" }, "curve": { "type": "string", "enum": [ "linear", "monotoneX", "monotoneY", "step", "stepAfter", "stepBefore", "basis", "cardinal", "catmullRom" ], "description": "Curve interpolation method", "default": "linear" }, "lineWidth": { "type": "number", "description": "Stroke width of the line", "default": 2 }, "showPoints": { "type": "boolean", "description": "Show data point markers on the line", "default": false }, "pointRadius": { "type": "number", "description": "Radius of point markers when showPoints is true", "default": 3 }, "pointIdAccessor": { "type": "string", "description": "Stable ID for point annotations and push-mode remove()/update().", "x-semiotic-runtime-types": [ "string", "function" ] }, "fillArea": { "type": "boolean", "description": "Fill the area under the line", "default": false }, "areaOpacity": { "type": "number", "description": "Opacity of the filled area (0-1)", "default": 0.3 }, "lineGradient": { "type": "object", "description": "Left-to-right stroke gradient: { stops: [{ offset: 0-1, color?, opacity? }] }." }, "directLabel": { "type": [ "boolean", "object" ], "description": "Place series labels at their start or end points instead of relying only on a legend." }, "gapStrategy": { "type": "string", "enum": [ "break", "interpolate", "zero" ], "description": "How missing y values are rendered: break the line, interpolate across them, or drop to zero.", "default": "break" }, "forecast": { "type": "object", "description": "Forecast overlay config — tagged training/observed/forecast region with optional envelope. See ForecastConfig." }, "anomaly": { "type": "object", "description": "Anomaly overlay config — ±σ band + anomaly dot annotations. See AnomalyConfig." }, "band": { "type": [ "object", "array" ], "description": "Asymmetric min/max envelope drawn under the line. `{ y0Accessor, y1Accessor, style?, perSeries?, interactive? }` or an array of those for percentile fans. Distinct from `forecast`/`anomaly` (computed) — band is pure data passthrough. Hovered datum is enriched with `band: { y0, y1 }` and `bands: [...]`." }, "xExtent": { "type": "array", "description": "Fixed x domain `[min, max]`; either bound may be omitted." }, "yExtent": { "type": "array", "description": "Fixed y domain `[min, max]`; either bound may be omitted." } }, "required": [ "data" ] } } }, { "type": "function", "function": { "name": "AreaChart", "description": "Filled area chart with optional stroke line. Use for showing volume or magnitude over time.", "parameters": { "type": "object", "properties": { "mode": { "type": "string", "enum": [ "primary", "context", "sparkline", "mobile" ], "description": "Display mode controlling default size, decoration, margins, labels, and interaction.", "default": "primary" }, "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object", "description": "Object margin. A side value of \"auto\" or null leaves that side available for auto-reservation." }, "className": { "type": "string" }, "title": { "type": "string", "description": "Visible chart title and the chart's accessible name." }, "description": { "type": "string", "description": "Concise accessible description that overrides the chart's generated aria-label." }, "summary": { "type": "string", "description": "Screen-reader-only summary of the chart's key takeaway; include keyboard interaction guidance when relevant." }, "accessibleTable": { "type": "boolean", "description": "Expose the chart data through Semiotic's screen-reader data table.", "default": true }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "legendInteraction": { "type": "string", "enum": [ "highlight", "isolate", "none" ], "description": "Legend interaction mode: highlight on hover, isolate on click, or none.", "default": "none" }, "legendPosition": { "type": "string", "enum": [ "right", "left", "top", "bottom" ], "description": "Position the legend beside or above/below the plot.", "default": "right" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": "string", "x-semiotic-runtime-types": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array", "object" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "object", "string" ], "description": "Tooltip: true/false, \"multi\", { mode: \"multi\", content? }, a custom function, or { fields, title } config. Multi mode shows every series at the hovered x; custom multi content receives allSeries/xValue.", "x-semiotic-runtime-types": [ "boolean", "function", "object", "string" ] }, "annotations": { "type": "array", "description": "Annotation objects to render on the chart. Each must have a `type` field. Position using your data field names (e.g. { type: \"widget\", month: \"Jan\", revenue: 500 }). Supported types: \"widget\" (arbitrary HTML/React content via foreignObject — v3 replacement for htmlAnnotationRules), \"label\" (callout with connector), \"callout\" (circle + label), \"text\" (plain label), \"y-threshold\" (horizontal reference line), \"x-threshold\" (vertical reference line), \"band\" (shaded y-region), \"enclose\" (circle around points), \"rect-enclose\" (rect around points), \"highlight\" (colored dots on filtered points), \"trend\" (regression line), \"envelope\" (upper/lower bounds), \"anomaly-band\" (mean ± stddev), \"forecast\" (extrapolated trend). Widget annotations accept: content (ReactNode), dx, dy, width, height, anchor (\"fixed\"|\"latest\"|\"sticky\"). Threshold annotations accept: value, label, color, strokeWidth, strokeDasharray. Enclose annotations accept: coordinates (array of data objects), label, color, padding.", "items": { "type": "object", "properties": { "type": { "type": "string", "enum": [ "widget", "label", "callout", "text", "bracket", "y-threshold", "x-threshold", "band", "enclose", "rect-enclose", "highlight", "trend", "envelope", "anomaly-band", "forecast" ], "description": "Annotation type" } }, "required": [ "type" ] } }, "autoPlaceAnnotations": { "type": [ "boolean", "object" ], "description": "Opt-in annotation placement pass. Chooses dx/dy for note-like annotations without manual offsets and avoids note/mark/edge overlaps where possible.", "default": false }, "responsiveRules": { "type": "array", "description": "Semantic responsive transforms applied before chart-mode defaults." }, "mobileSemantics": { "type": "object", "description": "Phone/mobile contract consumed by audits, recipes, adapters, and agents." }, "mobileInteraction": { "type": [ "boolean", "object" ], "description": "Touch-first interaction policy for phone-sized chart slots." }, "maxDevicePixelRatio": { "type": "number", "description": "Maximum canvas backing-store DPR. Defaults to 3 on desktop and 2 on coarse-pointer/small-screen devices; canvases repaint when browser zoom or display density changes." }, "axisExtent": { "type": "string", "enum": [ "nice", "exact" ], "description": "Tick endpoint mode. \"nice\" rounds endpoints to readable values; \"exact\" pins the first and last tick to the actual data min and max with equidistant intermediates. Affects XY x/y axes and ordinal value axis only.", "default": "nice" }, "animate": { "type": [ "boolean", "object" ], "description": "Enable mark transitions (boolean or {duration?, easing?, intro?})." }, "loading": { "type": "boolean", "description": "Show loading skeleton / loadingContent." }, "hoverHighlight": { "type": "boolean", "description": "Dim non-hovered series/categories (requires colorBy string field)." }, "chartId": { "type": "string", "description": "Stable id for linked selection / observation / nav sync." }, "emphasis": { "type": "string", "enum": [ "primary", "secondary" ] }, "responsiveWidth": { "type": "boolean" }, "responsiveHeight": { "type": "boolean" }, "color": { "type": "string", "description": "Uniform mark fill (primitive styling)." }, "stroke": { "type": "string" }, "strokeWidth": { "type": "number" }, "opacity": { "type": "number" }, "xLabel": { "type": "string" }, "yLabel": { "type": "string" }, "xScaleType": { "type": "string", "enum": [ "linear", "log", "time" ], "description": "x scale type. \"time\" builds a scaleTime (required for landmark ticks on timestamps)." }, "yScaleType": { "type": "string", "enum": [ "linear", "log", "time" ], "description": "y scale type." }, "data": { "type": "array", "description": "Array of data objects" }, "xAccessor": { "type": "string", "description": "Key for x-axis values", "default": "x", "x-semiotic-runtime-types": [ "string", "function" ] }, "yAccessor": { "type": "string", "description": "Key for y-axis values", "default": "y", "x-semiotic-runtime-types": [ "string", "function" ] }, "areaBy": { "type": "string", "description": "Key to group data into separate areas", "x-semiotic-runtime-types": [ "string", "function" ] }, "lineDataAccessor": { "type": "string", "description": "Key for the coordinates array within each area object", "default": "coordinates" }, "curve": { "type": "string", "enum": [ "linear", "monotoneX", "monotoneY", "step", "stepAfter", "stepBefore", "basis", "cardinal", "catmullRom" ], "default": "monotoneX" }, "y0Accessor": { "type": "string", "description": "Lower bound accessor for a ribbon/interval area instead of the chart baseline.", "x-semiotic-runtime-types": [ "string", "function" ] }, "gradientFill": { "type": "object", "description": "Line-to-baseline gradient: { stops: [{ offset: 0-1, color?, opacity? }] }. Offset 0 is the line/top and offset 1 is the baseline." }, "semanticGradient": { "type": "object", "description": "Value-anchored gradient: { stops: [{ offset: 0-1, color?, opacity? }] }. Offset 0 is the y-domain minimum and offset 1 is the maximum. Takes precedence over gradientFill." }, "semanticLine": { "type": "boolean", "description": "Mirror semanticGradient on the area's top-edge stroke as solid, hard-edged value bands. Set false to keep the normal stroke or lineGradient.", "default": true }, "lineGradient": { "type": "object", "description": "Left-to-right stroke gradient: { stops: [{ offset: 0-1, color?, opacity? }] }." }, "areaOpacity": { "type": "number", "description": "Area fill opacity (0-1)", "default": 0.7 }, "showLine": { "type": "boolean", "description": "Show stroke line on top of area", "default": true }, "lineWidth": { "type": "number", "default": 2 }, "showPoints": { "type": "boolean", "description": "Show point markers along area lines.", "default": false }, "pointRadius": { "type": "number", "default": 3 }, "pointIdAccessor": { "type": "string", "description": "Stable ID for point annotations and push-mode remove()/update().", "x-semiotic-runtime-types": [ "string", "function" ] }, "forecast": { "type": "object", "description": "Forecast overlay config — tagged training/observed/forecast region with optional envelope. See ForecastConfig." }, "anomaly": { "type": "object", "description": "Anomaly overlay config — ±σ band + anomaly dot annotations. See AnomalyConfig." }, "band": { "type": [ "object", "array" ], "description": "Asymmetric min/max envelope drawn under the area. See LineChart.band — same shape, same enrichment." }, "xExtent": { "type": "array", "description": "Fixed x domain `[min, max]`; either bound may be omitted." }, "yExtent": { "type": "array", "description": "Fixed y domain `[min, max]`; either bound may be omitted." } }, "required": [ "data" ] } } }, { "type": "function", "function": { "name": "StackedAreaChart", "description": "Stacked area chart with optional normalization to 100%. Use for part-to-whole trends over time.", "parameters": { "type": "object", "properties": { "mode": { "type": "string", "enum": [ "primary", "context", "sparkline", "mobile" ], "description": "Display mode controlling default size, decoration, margins, labels, and interaction.", "default": "primary" }, "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object", "description": "Object margin. A side value of \"auto\" or null leaves that side available for auto-reservation." }, "className": { "type": "string" }, "title": { "type": "string", "description": "Visible chart title and the chart's accessible name." }, "description": { "type": "string", "description": "Concise accessible description that overrides the chart's generated aria-label." }, "summary": { "type": "string", "description": "Screen-reader-only summary of the chart's key takeaway; include keyboard interaction guidance when relevant." }, "accessibleTable": { "type": "boolean", "description": "Expose the chart data through Semiotic's screen-reader data table.", "default": true }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "legendInteraction": { "type": "string", "enum": [ "highlight", "isolate", "none" ], "description": "Legend interaction mode: highlight on hover, isolate on click, or none.", "default": "none" }, "legendPosition": { "type": "string", "enum": [ "right", "left", "top", "bottom" ], "description": "Position the legend beside or above/below the plot.", "default": "right" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": "string", "x-semiotic-runtime-types": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array", "object" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "object", "string" ], "description": "Tooltip: true/false, \"multi\", { mode: \"multi\", content? }, a custom function, or { fields, title } config. Multi mode shows every series at the hovered x; custom multi content receives allSeries/xValue.", "x-semiotic-runtime-types": [ "boolean", "function", "object", "string" ] }, "annotations": { "type": "array", "description": "Annotation objects to render on the chart. Each must have a `type` field. Position using your data field names (e.g. { type: \"widget\", month: \"Jan\", revenue: 500 }). Supported types: \"widget\" (arbitrary HTML/React content via foreignObject — v3 replacement for htmlAnnotationRules), \"label\" (callout with connector), \"callout\" (circle + label), \"text\" (plain label), \"y-threshold\" (horizontal reference line), \"x-threshold\" (vertical reference line), \"band\" (shaded y-region), \"enclose\" (circle around points), \"rect-enclose\" (rect around points), \"highlight\" (colored dots on filtered points), \"trend\" (regression line), \"envelope\" (upper/lower bounds), \"anomaly-band\" (mean ± stddev), \"forecast\" (extrapolated trend). Widget annotations accept: content (ReactNode), dx, dy, width, height, anchor (\"fixed\"|\"latest\"|\"sticky\"). Threshold annotations accept: value, label, color, strokeWidth, strokeDasharray. Enclose annotations accept: coordinates (array of data objects), label, color, padding.", "items": { "type": "object", "properties": { "type": { "type": "string", "enum": [ "widget", "label", "callout", "text", "bracket", "y-threshold", "x-threshold", "band", "enclose", "rect-enclose", "highlight", "trend", "envelope", "anomaly-band", "forecast" ], "description": "Annotation type" } }, "required": [ "type" ] } }, "autoPlaceAnnotations": { "type": [ "boolean", "object" ], "description": "Opt-in annotation placement pass. Chooses dx/dy for note-like annotations without manual offsets and avoids note/mark/edge overlaps where possible.", "default": false }, "responsiveRules": { "type": "array", "description": "Semantic responsive transforms applied before chart-mode defaults." }, "mobileSemantics": { "type": "object", "description": "Phone/mobile contract consumed by audits, recipes, adapters, and agents." }, "mobileInteraction": { "type": [ "boolean", "object" ], "description": "Touch-first interaction policy for phone-sized chart slots." }, "maxDevicePixelRatio": { "type": "number", "description": "Maximum canvas backing-store DPR. Defaults to 3 on desktop and 2 on coarse-pointer/small-screen devices; canvases repaint when browser zoom or display density changes." }, "axisExtent": { "type": "string", "enum": [ "nice", "exact" ], "description": "Tick endpoint mode. \"nice\" rounds endpoints to readable values; \"exact\" pins the first and last tick to the actual data min and max with equidistant intermediates. Affects XY x/y axes and ordinal value axis only.", "default": "nice" }, "animate": { "type": [ "boolean", "object" ], "description": "Enable mark transitions (boolean or {duration?, easing?, intro?})." }, "loading": { "type": "boolean", "description": "Show loading skeleton / loadingContent." }, "hoverHighlight": { "type": "boolean", "description": "Dim non-hovered series/categories (requires colorBy string field)." }, "chartId": { "type": "string", "description": "Stable id for linked selection / observation / nav sync." }, "emphasis": { "type": "string", "enum": [ "primary", "secondary" ] }, "responsiveWidth": { "type": "boolean" }, "responsiveHeight": { "type": "boolean" }, "color": { "type": "string", "description": "Uniform mark fill (primitive styling)." }, "stroke": { "type": "string" }, "strokeWidth": { "type": "number" }, "opacity": { "type": "number" }, "xLabel": { "type": "string" }, "yLabel": { "type": "string" }, "xScaleType": { "type": "string", "enum": [ "linear", "log", "time" ], "description": "x scale type. \"time\" builds a scaleTime (required for landmark ticks on timestamps)." }, "yScaleType": { "type": "string", "enum": [ "linear", "log", "time" ], "description": "y scale type." }, "data": { "type": "array", "description": "Array of data objects" }, "xAccessor": { "type": "string", "default": "x", "x-semiotic-runtime-types": [ "string", "function" ] }, "yAccessor": { "type": "string", "default": "y", "x-semiotic-runtime-types": [ "string", "function" ] }, "areaBy": { "type": "string", "description": "Key to group data into stacked areas", "x-semiotic-runtime-types": [ "string", "function" ] }, "lineDataAccessor": { "type": "string", "default": "coordinates" }, "curve": { "type": "string", "enum": [ "linear", "monotoneX", "monotoneY", "step", "stepAfter", "stepBefore", "basis", "cardinal", "catmullRom" ], "default": "monotoneX" }, "areaOpacity": { "type": "number", "default": 0.7 }, "showLine": { "type": "boolean", "default": true }, "lineWidth": { "type": "number", "default": 2 }, "showPoints": { "type": "boolean", "description": "Show point markers along stacked area lines.", "default": false }, "pointRadius": { "type": "number", "default": 3 }, "normalize": { "type": "boolean", "description": "Normalize stacks to 100%", "default": false }, "baseline": { "type": "string", "enum": [ "zero", "wiggle", "silhouette", "diverging" ], "description": "Stack baseline; use wiggle or silhouette for a streamgraph.", "default": "zero" }, "stackOrder": { "type": "string", "enum": [ "key", "input", "insideOut", "asc", "desc" ], "description": "Series ordering within the stack.", "default": "key" }, "pointIdAccessor": { "type": "string", "description": "Stable ID for point annotations and push-mode remove()/update().", "x-semiotic-runtime-types": [ "string", "function" ] }, "xExtent": { "type": "array", "description": "Fixed x domain `[min, max]`; either bound may be omitted." }, "yExtent": { "type": "array", "description": "Fixed y domain `[min, max]`; either bound may be omitted." } }, "required": [ "data", "areaBy" ] } } }, { "type": "function", "function": { "name": "Scatterplot", "description": "Individual data points plotted by x/y position with optional size and color encoding.", "parameters": { "type": "object", "properties": { "mode": { "type": "string", "enum": [ "primary", "context", "sparkline", "mobile" ], "description": "Display mode controlling default size, decoration, margins, labels, and interaction.", "default": "primary" }, "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object", "description": "Object margin. A side value of \"auto\" or null leaves that side available for auto-reservation." }, "className": { "type": "string" }, "title": { "type": "string", "description": "Visible chart title and the chart's accessible name." }, "description": { "type": "string", "description": "Concise accessible description that overrides the chart's generated aria-label." }, "summary": { "type": "string", "description": "Screen-reader-only summary of the chart's key takeaway; include keyboard interaction guidance when relevant." }, "accessibleTable": { "type": "boolean", "description": "Expose the chart data through Semiotic's screen-reader data table.", "default": true }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "legendInteraction": { "type": "string", "enum": [ "highlight", "isolate", "none" ], "description": "Legend interaction mode: highlight on hover, isolate on click, or none.", "default": "none" }, "legendPosition": { "type": "string", "enum": [ "right", "left", "top", "bottom" ], "description": "Position the legend beside or above/below the plot.", "default": "right" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": "string", "x-semiotic-runtime-types": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array", "object" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "object", "string" ], "description": "Tooltip: true/false, \"multi\", { mode: \"multi\", content? }, a custom function, or { fields, title } config. Multi mode shows every series at the hovered x; custom multi content receives allSeries/xValue.", "x-semiotic-runtime-types": [ "boolean", "function", "object", "string" ] }, "annotations": { "type": "array", "description": "Annotation objects to render on the chart. Each must have a `type` field. Position using your data field names (e.g. { type: \"widget\", month: \"Jan\", revenue: 500 }). Supported types: \"widget\" (arbitrary HTML/React content via foreignObject — v3 replacement for htmlAnnotationRules), \"label\" (callout with connector), \"callout\" (circle + label), \"text\" (plain label), \"y-threshold\" (horizontal reference line), \"x-threshold\" (vertical reference line), \"band\" (shaded y-region), \"enclose\" (circle around points), \"rect-enclose\" (rect around points), \"highlight\" (colored dots on filtered points), \"trend\" (regression line), \"envelope\" (upper/lower bounds), \"anomaly-band\" (mean ± stddev), \"forecast\" (extrapolated trend). Widget annotations accept: content (ReactNode), dx, dy, width, height, anchor (\"fixed\"|\"latest\"|\"sticky\"). Threshold annotations accept: value, label, color, strokeWidth, strokeDasharray. Enclose annotations accept: coordinates (array of data objects), label, color, padding.", "items": { "type": "object", "properties": { "type": { "type": "string", "enum": [ "widget", "label", "callout", "text", "bracket", "y-threshold", "x-threshold", "band", "enclose", "rect-enclose", "highlight", "trend", "envelope", "anomaly-band", "forecast" ], "description": "Annotation type" } }, "required": [ "type" ] } }, "autoPlaceAnnotations": { "type": [ "boolean", "object" ], "description": "Opt-in annotation placement pass. Chooses dx/dy for note-like annotations without manual offsets and avoids note/mark/edge overlaps where possible.", "default": false }, "responsiveRules": { "type": "array", "description": "Semantic responsive transforms applied before chart-mode defaults." }, "mobileSemantics": { "type": "object", "description": "Phone/mobile contract consumed by audits, recipes, adapters, and agents." }, "mobileInteraction": { "type": [ "boolean", "object" ], "description": "Touch-first interaction policy for phone-sized chart slots." }, "maxDevicePixelRatio": { "type": "number", "description": "Maximum canvas backing-store DPR. Defaults to 3 on desktop and 2 on coarse-pointer/small-screen devices; canvases repaint when browser zoom or display density changes." }, "axisExtent": { "type": "string", "enum": [ "nice", "exact" ], "description": "Tick endpoint mode. \"nice\" rounds endpoints to readable values; \"exact\" pins the first and last tick to the actual data min and max with equidistant intermediates. Affects XY x/y axes and ordinal value axis only.", "default": "nice" }, "animate": { "type": [ "boolean", "object" ], "description": "Enable mark transitions (boolean or {duration?, easing?, intro?})." }, "loading": { "type": "boolean", "description": "Show loading skeleton / loadingContent." }, "hoverHighlight": { "type": "boolean", "description": "Dim non-hovered series/categories (requires colorBy string field)." }, "chartId": { "type": "string", "description": "Stable id for linked selection / observation / nav sync." }, "emphasis": { "type": "string", "enum": [ "primary", "secondary" ] }, "responsiveWidth": { "type": "boolean" }, "responsiveHeight": { "type": "boolean" }, "color": { "type": "string", "description": "Uniform mark fill (primitive styling)." }, "stroke": { "type": "string" }, "strokeWidth": { "type": "number" }, "opacity": { "type": "number" }, "xLabel": { "type": "string" }, "yLabel": { "type": "string" }, "xScaleType": { "type": "string", "enum": [ "linear", "log", "time" ], "description": "x scale type. \"time\" builds a scaleTime (required for landmark ticks on timestamps)." }, "yScaleType": { "type": "string", "enum": [ "linear", "log", "time" ], "description": "y scale type." }, "data": { "type": "array", "description": "Array of data objects" }, "xAccessor": { "type": "string", "default": "x", "x-semiotic-runtime-types": [ "string", "function" ] }, "yAccessor": { "type": "string", "default": "y", "x-semiotic-runtime-types": [ "string", "function" ] }, "sizeBy": { "type": "string", "description": "Key for variable point sizing", "x-semiotic-runtime-types": [ "string", "function" ] }, "sizeRange": { "type": "array", "description": "Min and max radius for sizeBy scaling", "default": [ 3, 15 ] }, "symbolBy": { "type": "string", "description": "Categorical field → glyph shape; each mark renders as a d3-shape glyph (circle/square/triangle/diamond/star/cross/wye/chevron) instead of a circle.", "x-semiotic-runtime-types": [ "string", "function" ] }, "symbolMap": { "type": "object", "description": "Explicit {category → shape} map for symbolBy; unmapped categories auto-assign." }, "pointRadius": { "type": "number", "description": "Fixed point radius", "default": 5 }, "pointOpacity": { "type": "number", "default": 0.8 }, "pointIdAccessor": { "type": "string", "description": "Stable ID for point annotations and push-mode remove()/update().", "x-semiotic-runtime-types": [ "string", "function" ] }, "xExtent": { "type": "array", "description": "Fixed x domain `[min, max]`; either bound may be omitted." }, "yExtent": { "type": "array", "description": "Fixed y domain `[min, max]`; either bound may be omitted." }, "regression": { "type": [ "boolean", "string", "object" ], "description": "Overlay a regression line. true = linear, 'linear' | 'polynomial' | 'loess' = method, or full RegressionConfig object. Sugar over the trend annotation." }, "forecast": { "type": "object", "description": "Forecast overlay config — tagged future points + optional envelope. See ForecastConfig." }, "anomaly": { "type": "object", "description": "Anomaly overlay config — ±σ band + anomaly dot annotations. See AnomalyConfig." } }, "required": [ "data" ] } } }, { "type": "function", "function": { "name": "QuadrantChart", "description": "Scatterplot divided into four labeled, colored quadrants by center lines. Use for BCG matrices, priority matrices, and any 2x2 strategic framework.", "parameters": { "type": "object", "properties": { "mode": { "type": "string", "enum": [ "primary", "context", "sparkline", "mobile" ], "description": "Display mode controlling default size, decoration, margins, labels, and interaction.", "default": "primary" }, "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object", "description": "Object margin. A side value of \"auto\" or null leaves that side available for auto-reservation." }, "className": { "type": "string" }, "title": { "type": "string", "description": "Visible chart title and the chart's accessible name." }, "description": { "type": "string", "description": "Concise accessible description that overrides the chart's generated aria-label." }, "summary": { "type": "string", "description": "Screen-reader-only summary of the chart's key takeaway; include keyboard interaction guidance when relevant." }, "accessibleTable": { "type": "boolean", "description": "Expose the chart data through Semiotic's screen-reader data table.", "default": true }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "legendInteraction": { "type": "string", "enum": [ "highlight", "isolate", "none" ], "description": "Legend interaction mode: highlight on hover, isolate on click, or none.", "default": "none" }, "legendPosition": { "type": "string", "enum": [ "right", "left", "top", "bottom" ], "description": "Position the legend beside or above/below the plot.", "default": "right" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": "string", "x-semiotic-runtime-types": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array", "object" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "object", "string" ], "description": "Tooltip: true/false, \"multi\", { mode: \"multi\", content? }, a custom function, or { fields, title } config. Multi mode shows every series at the hovered x; custom multi content receives allSeries/xValue.", "x-semiotic-runtime-types": [ "boolean", "function", "object", "string" ] }, "annotations": { "type": "array", "description": "Annotation objects to render on the chart. Each must have a `type` field. Position using your data field names (e.g. { type: \"widget\", month: \"Jan\", revenue: 500 }). Supported types: \"widget\" (arbitrary HTML/React content via foreignObject — v3 replacement for htmlAnnotationRules), \"label\" (callout with connector), \"callout\" (circle + label), \"text\" (plain label), \"y-threshold\" (horizontal reference line), \"x-threshold\" (vertical reference line), \"band\" (shaded y-region), \"enclose\" (circle around points), \"rect-enclose\" (rect around points), \"highlight\" (colored dots on filtered points), \"trend\" (regression line), \"envelope\" (upper/lower bounds), \"anomaly-band\" (mean ± stddev), \"forecast\" (extrapolated trend). Widget annotations accept: content (ReactNode), dx, dy, width, height, anchor (\"fixed\"|\"latest\"|\"sticky\"). Threshold annotations accept: value, label, color, strokeWidth, strokeDasharray. Enclose annotations accept: coordinates (array of data objects), label, color, padding.", "items": { "type": "object", "properties": { "type": { "type": "string", "enum": [ "widget", "label", "callout", "text", "bracket", "y-threshold", "x-threshold", "band", "enclose", "rect-enclose", "highlight", "trend", "envelope", "anomaly-band", "forecast" ], "description": "Annotation type" } }, "required": [ "type" ] } }, "autoPlaceAnnotations": { "type": [ "boolean", "object" ], "description": "Opt-in annotation placement pass. Chooses dx/dy for note-like annotations without manual offsets and avoids note/mark/edge overlaps where possible.", "default": false }, "responsiveRules": { "type": "array", "description": "Semantic responsive transforms applied before chart-mode defaults." }, "mobileSemantics": { "type": "object", "description": "Phone/mobile contract consumed by audits, recipes, adapters, and agents." }, "mobileInteraction": { "type": [ "boolean", "object" ], "description": "Touch-first interaction policy for phone-sized chart slots." }, "maxDevicePixelRatio": { "type": "number", "description": "Maximum canvas backing-store DPR. Defaults to 3 on desktop and 2 on coarse-pointer/small-screen devices; canvases repaint when browser zoom or display density changes." }, "axisExtent": { "type": "string", "enum": [ "nice", "exact" ], "description": "Tick endpoint mode. \"nice\" rounds endpoints to readable values; \"exact\" pins the first and last tick to the actual data min and max with equidistant intermediates. Affects XY x/y axes and ordinal value axis only.", "default": "nice" }, "animate": { "type": [ "boolean", "object" ], "description": "Enable mark transitions (boolean or {duration?, easing?, intro?})." }, "loading": { "type": "boolean", "description": "Show loading skeleton / loadingContent." }, "hoverHighlight": { "type": "boolean", "description": "Dim non-hovered series/categories (requires colorBy string field)." }, "chartId": { "type": "string", "description": "Stable id for linked selection / observation / nav sync." }, "emphasis": { "type": "string", "enum": [ "primary", "secondary" ] }, "responsiveWidth": { "type": "boolean" }, "responsiveHeight": { "type": "boolean" }, "color": { "type": "string", "description": "Uniform mark fill (primitive styling)." }, "stroke": { "type": "string" }, "strokeWidth": { "type": "number" }, "opacity": { "type": "number" }, "xLabel": { "type": "string" }, "yLabel": { "type": "string" }, "xScaleType": { "type": "string", "enum": [ "linear", "log", "time" ], "description": "x scale type. \"time\" builds a scaleTime (required for landmark ticks on timestamps)." }, "yScaleType": { "type": "string", "enum": [ "linear", "log", "time" ], "description": "y scale type." }, "data": { "type": "array", "description": "Array of data objects" }, "xAccessor": { "type": "string", "default": "x", "x-semiotic-runtime-types": [ "string", "function" ] }, "yAccessor": { "type": "string", "default": "y", "x-semiotic-runtime-types": [ "string", "function" ] }, "xCenter": { "type": "number", "description": "X-coordinate of the vertical center line. Defaults to midpoint of x domain." }, "yCenter": { "type": "number", "description": "Y-coordinate of the horizontal center line. Defaults to midpoint of y domain." }, "quadrants": { "type": "object", "description": "Optional configuration overrides for the four quadrants: { topRight, topLeft, bottomRight, bottomLeft }, each with partial { label, color, opacity }. Omitted quadrants and fields use built-in defaults.", "default": { "topLeft": { "label": "Low / High", "color": "#E9C46A", "opacity": 0.08 }, "topRight": { "label": "High / High", "color": "#2A9D8F", "opacity": 0.08 }, "bottomLeft": { "label": "Low / Low", "color": "#E76F51", "opacity": 0.08 }, "bottomRight": { "label": "High / Low", "color": "#86BBD8", "opacity": 0.08 } } }, "showQuadrantLabels": { "type": "boolean", "default": true }, "quadrantLabelSize": { "type": "number", "default": 12 }, "sizeBy": { "type": "string", "description": "Key for variable point sizing", "x-semiotic-runtime-types": [ "string", "function" ] }, "sizeRange": { "type": "array", "default": [ 3, 15 ] }, "pointRadius": { "type": "number", "default": 5 }, "pointOpacity": { "type": "number", "default": 0.8 }, "pointIdAccessor": { "type": "string", "description": "Stable ID for point annotations and push-mode remove()/update().", "x-semiotic-runtime-types": [ "string", "function" ] } }, "required": [] } } }, { "type": "function", "function": { "name": "MultiAxisLineChart", "description": "Dual Y-axis line chart for comparing two series with different scales on the same x axis. Data is unitized (normalized to [0,1]) internally; left axis shows series[0] values and right axis shows series[1] values in original units. Falls back to standard multi-line if not exactly 2 series.", "parameters": { "type": "object", "properties": { "mode": { "type": "string", "enum": [ "primary", "context", "sparkline", "mobile" ], "description": "Display mode controlling default size, decoration, margins, labels, and interaction.", "default": "primary" }, "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object", "description": "Object margin. A side value of \"auto\" or null leaves that side available for auto-reservation." }, "className": { "type": "string" }, "title": { "type": "string", "description": "Visible chart title and the chart's accessible name." }, "description": { "type": "string", "description": "Concise accessible description that overrides the chart's generated aria-label." }, "summary": { "type": "string", "description": "Screen-reader-only summary of the chart's key takeaway; include keyboard interaction guidance when relevant." }, "accessibleTable": { "type": "boolean", "description": "Expose the chart data through Semiotic's screen-reader data table.", "default": true }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "legendInteraction": { "type": "string", "enum": [ "highlight", "isolate", "none" ], "description": "Legend interaction mode: highlight on hover, isolate on click, or none.", "default": "none" }, "legendPosition": { "type": "string", "enum": [ "right", "left", "top", "bottom" ], "description": "Position the legend beside or above/below the plot.", "default": "right" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": "string", "x-semiotic-runtime-types": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array" ] }, "tooltip": { "type": [ "boolean", "object", "string" ], "description": "Tooltip: true/false, \"multi\", { mode: \"multi\", content? }, a custom function, or { fields, title } config. Multi mode shows every series at the hovered x; custom multi content receives allSeries/xValue.", "x-semiotic-runtime-types": [ "boolean", "function", "object", "string" ] }, "annotations": { "type": "array", "description": "Annotation objects to render on the chart. Each must have a `type` field. Position using your data field names (e.g. { type: \"widget\", month: \"Jan\", revenue: 500 }). Supported types: \"widget\" (arbitrary HTML/React content via foreignObject — v3 replacement for htmlAnnotationRules), \"label\" (callout with connector), \"callout\" (circle + label), \"text\" (plain label), \"y-threshold\" (horizontal reference line), \"x-threshold\" (vertical reference line), \"band\" (shaded y-region), \"enclose\" (circle around points), \"rect-enclose\" (rect around points), \"highlight\" (colored dots on filtered points), \"trend\" (regression line), \"envelope\" (upper/lower bounds), \"anomaly-band\" (mean ± stddev), \"forecast\" (extrapolated trend). Widget annotations accept: content (ReactNode), dx, dy, width, height, anchor (\"fixed\"|\"latest\"|\"sticky\"). Threshold annotations accept: value, label, color, strokeWidth, strokeDasharray. Enclose annotations accept: coordinates (array of data objects), label, color, padding.", "items": { "type": "object", "properties": { "type": { "type": "string", "enum": [ "widget", "label", "callout", "text", "bracket", "y-threshold", "x-threshold", "band", "enclose", "rect-enclose", "highlight", "trend", "envelope", "anomaly-band", "forecast" ], "description": "Annotation type" } }, "required": [ "type" ] } }, "autoPlaceAnnotations": { "type": [ "boolean", "object" ], "description": "Opt-in annotation placement pass. Chooses dx/dy for note-like annotations without manual offsets and avoids note/mark/edge overlaps where possible.", "default": false }, "responsiveRules": { "type": "array", "description": "Semantic responsive transforms applied before chart-mode defaults." }, "mobileSemantics": { "type": "object", "description": "Phone/mobile contract consumed by audits, recipes, adapters, and agents." }, "mobileInteraction": { "type": [ "boolean", "object" ], "description": "Touch-first interaction policy for phone-sized chart slots." }, "maxDevicePixelRatio": { "type": "number", "description": "Maximum canvas backing-store DPR. Defaults to 3 on desktop and 2 on coarse-pointer/small-screen devices; canvases repaint when browser zoom or display density changes." }, "axisExtent": { "type": "string", "enum": [ "nice", "exact" ], "description": "Tick endpoint mode. \"nice\" rounds endpoints to readable values; \"exact\" pins the first and last tick to the actual data min and max with equidistant intermediates. Affects XY x/y axes and ordinal value axis only.", "default": "nice" }, "animate": { "type": [ "boolean", "object" ], "description": "Enable mark transitions (boolean or {duration?, easing?, intro?})." }, "loading": { "type": "boolean", "description": "Show loading skeleton / loadingContent." }, "hoverHighlight": { "type": "boolean", "description": "Dim non-hovered series/categories (requires colorBy string field)." }, "chartId": { "type": "string", "description": "Stable id for linked selection / observation / nav sync." }, "emphasis": { "type": "string", "enum": [ "primary", "secondary" ] }, "responsiveWidth": { "type": "boolean" }, "responsiveHeight": { "type": "boolean" }, "color": { "type": "string", "description": "Uniform mark fill (primitive styling)." }, "stroke": { "type": "string" }, "strokeWidth": { "type": "number" }, "opacity": { "type": "number" }, "xLabel": { "type": "string" }, "yLabel": { "type": "string" }, "xScaleType": { "type": "string", "enum": [ "linear", "log", "time" ], "description": "x scale type. \"time\" builds a scaleTime (required for landmark ticks on timestamps)." }, "yScaleType": { "type": "string", "enum": [ "linear", "log", "time" ], "description": "y scale type." }, "data": { "type": "array", "description": "Array of data objects shared by both series" }, "xAccessor": { "type": "string", "description": "Key for x values", "default": "x", "x-semiotic-runtime-types": [ "string", "function" ] }, "series": { "type": "array", "description": "Exactly 2 series configs for dual-axis mode. Each: { yAccessor, label?, color?, format?, extent? }" }, "curve": { "type": "string", "default": "monotoneX" }, "lineWidth": { "type": "number", "default": 2 } }, "required": [ "series" ] } } }, { "type": "function", "function": { "name": "CandlestickChart", "description": "OHLC candlestick bars, or a range chart when open/close are omitted. Honors mode (primary/context/sparkline). Range variant degrades cleanly: endpoint dots + wick, sized against canvas height so sparkline rows don't render marble-sized dots.", "parameters": { "type": "object", "properties": { "mode": { "type": "string", "enum": [ "primary", "context", "sparkline", "mobile" ] }, "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object", "description": "Object margin. A side value of \"auto\" or null leaves that side available for auto-reservation." }, "className": { "type": "string" }, "title": { "type": "string", "description": "Visible chart title and the chart's accessible name." }, "description": { "type": "string", "description": "Concise accessible description that overrides the chart's generated aria-label." }, "summary": { "type": "string", "description": "Screen-reader-only summary of the chart's key takeaway; include keyboard interaction guidance when relevant." }, "accessibleTable": { "type": "boolean", "description": "Expose the chart data through Semiotic's screen-reader data table.", "default": true }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "legendInteraction": { "type": "string", "enum": [ "highlight", "isolate", "none" ], "description": "Legend interaction mode: highlight on hover, isolate on click, or none.", "default": "none" }, "legendPosition": { "type": "string", "enum": [ "right", "left", "top", "bottom" ], "description": "Position the legend beside or above/below the plot.", "default": "right" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": "string", "x-semiotic-runtime-types": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array", "object" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "object", "string" ], "description": "Tooltip: true/false, \"multi\", { mode: \"multi\", content? }, a custom function, or { fields, title } config. Multi mode shows every series at the hovered x; custom multi content receives allSeries/xValue.", "x-semiotic-runtime-types": [ "boolean", "function", "object", "string" ] }, "annotations": { "type": "array", "description": "Annotation objects to render on the chart. Each must have a `type` field. Position using your data field names (e.g. { type: \"widget\", month: \"Jan\", revenue: 500 }). Supported types: \"widget\" (arbitrary HTML/React content via foreignObject — v3 replacement for htmlAnnotationRules), \"label\" (callout with connector), \"callout\" (circle + label), \"text\" (plain label), \"y-threshold\" (horizontal reference line), \"x-threshold\" (vertical reference line), \"band\" (shaded y-region), \"enclose\" (circle around points), \"rect-enclose\" (rect around points), \"highlight\" (colored dots on filtered points), \"trend\" (regression line), \"envelope\" (upper/lower bounds), \"anomaly-band\" (mean ± stddev), \"forecast\" (extrapolated trend). Widget annotations accept: content (ReactNode), dx, dy, width, height, anchor (\"fixed\"|\"latest\"|\"sticky\"). Threshold annotations accept: value, label, color, strokeWidth, strokeDasharray. Enclose annotations accept: coordinates (array of data objects), label, color, padding.", "items": { "type": "object", "properties": { "type": { "type": "string", "enum": [ "widget", "label", "callout", "text", "bracket", "y-threshold", "x-threshold", "band", "enclose", "rect-enclose", "highlight", "trend", "envelope", "anomaly-band", "forecast" ], "description": "Annotation type" } }, "required": [ "type" ] } }, "autoPlaceAnnotations": { "type": [ "boolean", "object" ], "description": "Opt-in annotation placement pass. Chooses dx/dy for note-like annotations without manual offsets and avoids note/mark/edge overlaps where possible.", "default": false }, "responsiveRules": { "type": "array", "description": "Semantic responsive transforms applied before chart-mode defaults." }, "mobileSemantics": { "type": "object", "description": "Phone/mobile contract consumed by audits, recipes, adapters, and agents." }, "mobileInteraction": { "type": [ "boolean", "object" ], "description": "Touch-first interaction policy for phone-sized chart slots." }, "maxDevicePixelRatio": { "type": "number", "description": "Maximum canvas backing-store DPR. Defaults to 3 on desktop and 2 on coarse-pointer/small-screen devices; canvases repaint when browser zoom or display density changes." }, "axisExtent": { "type": "string", "enum": [ "nice", "exact" ], "description": "Tick endpoint mode. \"nice\" rounds endpoints to readable values; \"exact\" pins the first and last tick to the actual data min and max with equidistant intermediates. Affects XY x/y axes and ordinal value axis only.", "default": "nice" }, "animate": { "type": [ "boolean", "object" ], "description": "Enable mark transitions (boolean or {duration?, easing?, intro?})." }, "loading": { "type": "boolean", "description": "Show loading skeleton / loadingContent." }, "hoverHighlight": { "type": "boolean", "description": "Dim non-hovered series/categories (requires colorBy string field)." }, "chartId": { "type": "string", "description": "Stable id for linked selection / observation / nav sync." }, "emphasis": { "type": "string", "enum": [ "primary", "secondary" ] }, "responsiveWidth": { "type": "boolean" }, "responsiveHeight": { "type": "boolean" }, "color": { "type": "string", "description": "Uniform mark fill (primitive styling)." }, "stroke": { "type": "string" }, "strokeWidth": { "type": "number" }, "opacity": { "type": "number" }, "xLabel": { "type": "string" }, "yLabel": { "type": "string" }, "xScaleType": { "type": "string", "enum": [ "linear", "log", "time" ], "description": "x scale type. \"time\" builds a scaleTime (required for landmark ticks on timestamps)." }, "yScaleType": { "type": "string", "enum": [ "linear", "log", "time" ], "description": "y scale type." }, "data": { "type": "array" }, "xAccessor": { "type": "string", "default": "x", "x-semiotic-runtime-types": [ "string", "function" ] }, "highAccessor": { "type": "string", "description": "Required. Upper bound (candlestick high or range top).", "default": "high", "x-semiotic-runtime-types": [ "string", "function" ] }, "lowAccessor": { "type": "string", "description": "Required. Lower bound (candlestick low or range bottom).", "default": "low", "x-semiotic-runtime-types": [ "string", "function" ] }, "openAccessor": { "type": "string", "description": "Optional. Pair with closeAccessor for OHLC; omit both to render a range chart.", "x-semiotic-runtime-types": [ "string", "function" ] }, "closeAccessor": { "type": "string", "description": "Optional. See openAccessor.", "x-semiotic-runtime-types": [ "string", "function" ] }, "candlestickStyle": { "type": "object", "description": "Style overrides." }, "pointIdAccessor": { "type": "string", "description": "Stable ID for point annotations and push-mode remove()/update().", "x-semiotic-runtime-types": [ "string", "function" ] }, "xExtent": { "type": "array", "description": "Fixed x domain `[min, max]`; either bound may be omitted." }, "yExtent": { "type": "array", "description": "Fixed y domain `[min, max]`; either bound may be omitted." } }, "required": [ "highAccessor", "lowAccessor" ] } } }, { "type": "function", "function": { "name": "BubbleChart", "description": "Scatterplot with required size dimension for three-variable comparison. Bubble area encodes a numeric value.", "parameters": { "type": "object", "properties": { "mode": { "type": "string", "enum": [ "primary", "context", "sparkline", "mobile" ], "description": "Display mode controlling default size, decoration, margins, labels, and interaction.", "default": "primary" }, "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object", "description": "Object margin. A side value of \"auto\" or null leaves that side available for auto-reservation." }, "className": { "type": "string" }, "title": { "type": "string", "description": "Visible chart title and the chart's accessible name." }, "description": { "type": "string", "description": "Concise accessible description that overrides the chart's generated aria-label." }, "summary": { "type": "string", "description": "Screen-reader-only summary of the chart's key takeaway; include keyboard interaction guidance when relevant." }, "accessibleTable": { "type": "boolean", "description": "Expose the chart data through Semiotic's screen-reader data table.", "default": true }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "legendInteraction": { "type": "string", "enum": [ "highlight", "isolate", "none" ], "description": "Legend interaction mode: highlight on hover, isolate on click, or none.", "default": "none" }, "legendPosition": { "type": "string", "enum": [ "right", "left", "top", "bottom" ], "description": "Position the legend beside or above/below the plot.", "default": "right" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": "string", "x-semiotic-runtime-types": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array", "object" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "object", "string" ], "description": "Tooltip: true/false, \"multi\", { mode: \"multi\", content? }, a custom function, or { fields, title } config. Multi mode shows every series at the hovered x; custom multi content receives allSeries/xValue.", "x-semiotic-runtime-types": [ "boolean", "function", "object", "string" ] }, "annotations": { "type": "array", "description": "Annotation objects to render on the chart. Each must have a `type` field. Position using your data field names (e.g. { type: \"widget\", month: \"Jan\", revenue: 500 }). Supported types: \"widget\" (arbitrary HTML/React content via foreignObject — v3 replacement for htmlAnnotationRules), \"label\" (callout with connector), \"callout\" (circle + label), \"text\" (plain label), \"y-threshold\" (horizontal reference line), \"x-threshold\" (vertical reference line), \"band\" (shaded y-region), \"enclose\" (circle around points), \"rect-enclose\" (rect around points), \"highlight\" (colored dots on filtered points), \"trend\" (regression line), \"envelope\" (upper/lower bounds), \"anomaly-band\" (mean ± stddev), \"forecast\" (extrapolated trend). Widget annotations accept: content (ReactNode), dx, dy, width, height, anchor (\"fixed\"|\"latest\"|\"sticky\"). Threshold annotations accept: value, label, color, strokeWidth, strokeDasharray. Enclose annotations accept: coordinates (array of data objects), label, color, padding.", "items": { "type": "object", "properties": { "type": { "type": "string", "enum": [ "widget", "label", "callout", "text", "bracket", "y-threshold", "x-threshold", "band", "enclose", "rect-enclose", "highlight", "trend", "envelope", "anomaly-band", "forecast" ], "description": "Annotation type" } }, "required": [ "type" ] } }, "autoPlaceAnnotations": { "type": [ "boolean", "object" ], "description": "Opt-in annotation placement pass. Chooses dx/dy for note-like annotations without manual offsets and avoids note/mark/edge overlaps where possible.", "default": false }, "responsiveRules": { "type": "array", "description": "Semantic responsive transforms applied before chart-mode defaults." }, "mobileSemantics": { "type": "object", "description": "Phone/mobile contract consumed by audits, recipes, adapters, and agents." }, "mobileInteraction": { "type": [ "boolean", "object" ], "description": "Touch-first interaction policy for phone-sized chart slots." }, "maxDevicePixelRatio": { "type": "number", "description": "Maximum canvas backing-store DPR. Defaults to 3 on desktop and 2 on coarse-pointer/small-screen devices; canvases repaint when browser zoom or display density changes." }, "axisExtent": { "type": "string", "enum": [ "nice", "exact" ], "description": "Tick endpoint mode. \"nice\" rounds endpoints to readable values; \"exact\" pins the first and last tick to the actual data min and max with equidistant intermediates. Affects XY x/y axes and ordinal value axis only.", "default": "nice" }, "animate": { "type": [ "boolean", "object" ], "description": "Enable mark transitions (boolean or {duration?, easing?, intro?})." }, "loading": { "type": "boolean", "description": "Show loading skeleton / loadingContent." }, "hoverHighlight": { "type": "boolean", "description": "Dim non-hovered series/categories (requires colorBy string field)." }, "chartId": { "type": "string", "description": "Stable id for linked selection / observation / nav sync." }, "emphasis": { "type": "string", "enum": [ "primary", "secondary" ] }, "responsiveWidth": { "type": "boolean" }, "responsiveHeight": { "type": "boolean" }, "color": { "type": "string", "description": "Uniform mark fill (primitive styling)." }, "stroke": { "type": "string" }, "strokeWidth": { "type": "number" }, "opacity": { "type": "number" }, "xLabel": { "type": "string" }, "yLabel": { "type": "string" }, "xScaleType": { "type": "string", "enum": [ "linear", "log", "time" ], "description": "x scale type. \"time\" builds a scaleTime (required for landmark ticks on timestamps)." }, "yScaleType": { "type": "string", "enum": [ "linear", "log", "time" ], "description": "y scale type." }, "data": { "type": "array", "description": "Array of data objects" }, "sizeBy": { "type": "string", "description": "Key for bubble size (required)", "x-semiotic-runtime-types": [ "string", "function" ] }, "xAccessor": { "type": "string", "default": "x", "x-semiotic-runtime-types": [ "string", "function" ] }, "yAccessor": { "type": "string", "default": "y", "x-semiotic-runtime-types": [ "string", "function" ] }, "sizeRange": { "type": "array", "default": [ 5, 40 ] }, "bubbleOpacity": { "type": "number", "default": 0.6 }, "bubbleStrokeWidth": { "type": "number", "default": 1 }, "bubbleStrokeColor": { "type": "string", "default": "white" }, "pointIdAccessor": { "type": "string", "description": "Stable ID for point annotations and push-mode remove()/update().", "x-semiotic-runtime-types": [ "string", "function" ] }, "xExtent": { "type": "array", "description": "Fixed x domain `[min, max]`; either bound may be omitted." }, "yExtent": { "type": "array", "description": "Fixed y domain `[min, max]`; either bound may be omitted." }, "regression": { "type": [ "boolean", "string", "object" ], "description": "Overlay a regression line on the bubbles. Same shape as Scatterplot's regression prop." } }, "required": [ "data", "sizeBy" ] } } }, { "type": "function", "function": { "name": "Heatmap", "description": "Grid/matrix visualization with color-encoded cell values. Use for correlation matrices, time-frequency analysis.", "parameters": { "type": "object", "properties": { "mode": { "type": "string", "enum": [ "primary", "context", "sparkline", "mobile" ], "description": "Display mode controlling default size, decoration, margins, labels, and interaction.", "default": "primary" }, "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object", "description": "Object margin. A side value of \"auto\" or null leaves that side available for auto-reservation." }, "className": { "type": "string" }, "title": { "type": "string", "description": "Visible chart title and the chart's accessible name." }, "description": { "type": "string", "description": "Concise accessible description that overrides the chart's generated aria-label." }, "summary": { "type": "string", "description": "Screen-reader-only summary of the chart's key takeaway; include keyboard interaction guidance when relevant." }, "accessibleTable": { "type": "boolean", "description": "Expose the chart data through Semiotic's screen-reader data table.", "default": true }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "legendInteraction": { "type": "string", "enum": [ "highlight", "isolate", "none" ], "description": "Legend interaction mode: highlight on hover, isolate on click, or none.", "default": "none" }, "legendPosition": { "type": "string", "enum": [ "right", "left", "top", "bottom" ], "description": "Position of the gradient legend", "default": "right" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": "string", "x-semiotic-runtime-types": [ "string", "function" ] }, "colorScheme": { "type": "string", "enum": [ "blues", "reds", "greens", "viridis", "oranges", "purples", "greys", "plasma", "inferno", "magma", "cividis", "turbo", "custom" ] }, "tooltip": { "type": [ "boolean", "object", "string" ], "description": "Tooltip: true/false, \"multi\", { mode: \"multi\", content? }, a custom function, or { fields, title } config. Multi mode shows every series at the hovered x; custom multi content receives allSeries/xValue.", "x-semiotic-runtime-types": [ "boolean", "function", "object", "string" ] }, "annotations": { "type": "array", "description": "Annotation objects to render on the chart. Each must have a `type` field. Position using your data field names (e.g. { type: \"widget\", month: \"Jan\", revenue: 500 }). Supported types: \"widget\" (arbitrary HTML/React content via foreignObject — v3 replacement for htmlAnnotationRules), \"label\" (callout with connector), \"callout\" (circle + label), \"text\" (plain label), \"y-threshold\" (horizontal reference line), \"x-threshold\" (vertical reference line), \"band\" (shaded y-region), \"enclose\" (circle around points), \"rect-enclose\" (rect around points), \"highlight\" (colored dots on filtered points), \"trend\" (regression line), \"envelope\" (upper/lower bounds), \"anomaly-band\" (mean ± stddev), \"forecast\" (extrapolated trend). Widget annotations accept: content (ReactNode), dx, dy, width, height, anchor (\"fixed\"|\"latest\"|\"sticky\"). Threshold annotations accept: value, label, color, strokeWidth, strokeDasharray. Enclose annotations accept: coordinates (array of data objects), label, color, padding.", "items": { "type": "object", "properties": { "type": { "type": "string", "enum": [ "widget", "label", "callout", "text", "bracket", "y-threshold", "x-threshold", "band", "enclose", "rect-enclose", "highlight", "trend", "envelope", "anomaly-band", "forecast" ], "description": "Annotation type" } }, "required": [ "type" ] } }, "autoPlaceAnnotations": { "type": [ "boolean", "object" ], "description": "Opt-in annotation placement pass. Chooses dx/dy for note-like annotations without manual offsets and avoids note/mark/edge overlaps where possible.", "default": false }, "responsiveRules": { "type": "array", "description": "Semantic responsive transforms applied before chart-mode defaults." }, "mobileSemantics": { "type": "object", "description": "Phone/mobile contract consumed by audits, recipes, adapters, and agents." }, "mobileInteraction": { "type": [ "boolean", "object" ], "description": "Touch-first interaction policy for phone-sized chart slots." }, "maxDevicePixelRatio": { "type": "number", "description": "Maximum canvas backing-store DPR. Defaults to 3 on desktop and 2 on coarse-pointer/small-screen devices; canvases repaint when browser zoom or display density changes." }, "axisExtent": { "type": "string", "enum": [ "nice", "exact" ], "description": "Tick endpoint mode. \"nice\" rounds endpoints to readable values; \"exact\" pins the first and last tick to the actual data min and max with equidistant intermediates. Affects XY x/y axes and ordinal value axis only.", "default": "nice" }, "animate": { "type": [ "boolean", "object" ], "description": "Enable mark transitions (boolean or {duration?, easing?, intro?})." }, "loading": { "type": "boolean", "description": "Show loading skeleton / loadingContent." }, "hoverHighlight": { "type": "boolean", "description": "Dim non-hovered series/categories (requires colorBy string field)." }, "chartId": { "type": "string", "description": "Stable id for linked selection / observation / nav sync." }, "emphasis": { "type": "string", "enum": [ "primary", "secondary" ] }, "responsiveWidth": { "type": "boolean" }, "responsiveHeight": { "type": "boolean" }, "color": { "type": "string", "description": "Uniform mark fill (primitive styling)." }, "stroke": { "type": "string" }, "strokeWidth": { "type": "number" }, "opacity": { "type": "number" }, "xLabel": { "type": "string" }, "yLabel": { "type": "string" }, "xScaleType": { "type": "string", "enum": [ "linear", "log", "time" ], "description": "x scale type. \"time\" builds a scaleTime (required for landmark ticks on timestamps)." }, "yScaleType": { "type": "string", "enum": [ "linear", "log", "time" ], "description": "y scale type." }, "data": { "type": "array", "description": "Array of data objects with x, y, and value" }, "xAccessor": { "type": "string", "default": "x", "x-semiotic-runtime-types": [ "string", "function" ] }, "yAccessor": { "type": "string", "default": "y", "x-semiotic-runtime-types": [ "string", "function" ] }, "valueAccessor": { "type": "string", "description": "Key for the cell value", "default": "value", "x-semiotic-runtime-types": [ "string", "function" ] }, "showValues": { "type": "boolean", "description": "Display numeric values in cells", "default": false }, "cellBorderColor": { "type": "string", "default": "#fff" }, "cellBorderWidth": { "type": "number", "default": 1 }, "pointIdAccessor": { "type": "string", "description": "Stable ID for point annotations and push-mode remove()/update().", "x-semiotic-runtime-types": [ "string", "function" ] }, "xExtent": { "type": "array", "description": "Fixed x domain `[min, max]`; either bound may be omitted." }, "yExtent": { "type": "array", "description": "Fixed y domain `[min, max]`; either bound may be omitted." } }, "required": [ "data" ] } } }, { "type": "function", "function": { "name": "ConnectedScatterplot", "description": "Scatterplot where points are connected in order, showing trajectories through 2D space. Viridis-colored start→end, white halo under lines.", "parameters": { "type": "object", "properties": { "mode": { "type": "string", "enum": [ "primary", "context", "sparkline", "mobile" ], "description": "Display mode controlling default size, decoration, margins, labels, and interaction.", "default": "primary" }, "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object", "description": "Object margin. A side value of \"auto\" or null leaves that side available for auto-reservation." }, "className": { "type": "string" }, "title": { "type": "string", "description": "Visible chart title and the chart's accessible name." }, "description": { "type": "string", "description": "Concise accessible description that overrides the chart's generated aria-label." }, "summary": { "type": "string", "description": "Screen-reader-only summary of the chart's key takeaway; include keyboard interaction guidance when relevant." }, "accessibleTable": { "type": "boolean", "description": "Expose the chart data through Semiotic's screen-reader data table.", "default": true }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "legendInteraction": { "type": "string", "enum": [ "highlight", "isolate", "none" ], "description": "Legend interaction mode: highlight on hover, isolate on click, or none.", "default": "none" }, "legendPosition": { "type": "string", "enum": [ "right", "left", "top", "bottom" ], "description": "Position the legend beside or above/below the plot.", "default": "right" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": "string", "x-semiotic-runtime-types": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array", "object" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "object", "string" ], "description": "Tooltip: true/false, \"multi\", { mode: \"multi\", content? }, a custom function, or { fields, title } config. Multi mode shows every series at the hovered x; custom multi content receives allSeries/xValue.", "x-semiotic-runtime-types": [ "boolean", "function", "object", "string" ] }, "annotations": { "type": "array", "description": "Annotation objects to render on the chart. Each must have a `type` field. Position using your data field names (e.g. { type: \"widget\", month: \"Jan\", revenue: 500 }). Supported types: \"widget\" (arbitrary HTML/React content via foreignObject — v3 replacement for htmlAnnotationRules), \"label\" (callout with connector), \"callout\" (circle + label), \"text\" (plain label), \"y-threshold\" (horizontal reference line), \"x-threshold\" (vertical reference line), \"band\" (shaded y-region), \"enclose\" (circle around points), \"rect-enclose\" (rect around points), \"highlight\" (colored dots on filtered points), \"trend\" (regression line), \"envelope\" (upper/lower bounds), \"anomaly-band\" (mean ± stddev), \"forecast\" (extrapolated trend). Widget annotations accept: content (ReactNode), dx, dy, width, height, anchor (\"fixed\"|\"latest\"|\"sticky\"). Threshold annotations accept: value, label, color, strokeWidth, strokeDasharray. Enclose annotations accept: coordinates (array of data objects), label, color, padding.", "items": { "type": "object", "properties": { "type": { "type": "string", "enum": [ "widget", "label", "callout", "text", "bracket", "y-threshold", "x-threshold", "band", "enclose", "rect-enclose", "highlight", "trend", "envelope", "anomaly-band", "forecast" ], "description": "Annotation type" } }, "required": [ "type" ] } }, "autoPlaceAnnotations": { "type": [ "boolean", "object" ], "description": "Opt-in annotation placement pass. Chooses dx/dy for note-like annotations without manual offsets and avoids note/mark/edge overlaps where possible.", "default": false }, "responsiveRules": { "type": "array", "description": "Semantic responsive transforms applied before chart-mode defaults." }, "mobileSemantics": { "type": "object", "description": "Phone/mobile contract consumed by audits, recipes, adapters, and agents." }, "mobileInteraction": { "type": [ "boolean", "object" ], "description": "Touch-first interaction policy for phone-sized chart slots." }, "maxDevicePixelRatio": { "type": "number", "description": "Maximum canvas backing-store DPR. Defaults to 3 on desktop and 2 on coarse-pointer/small-screen devices; canvases repaint when browser zoom or display density changes." }, "axisExtent": { "type": "string", "enum": [ "nice", "exact" ], "description": "Tick endpoint mode. \"nice\" rounds endpoints to readable values; \"exact\" pins the first and last tick to the actual data min and max with equidistant intermediates. Affects XY x/y axes and ordinal value axis only.", "default": "nice" }, "animate": { "type": [ "boolean", "object" ], "description": "Enable mark transitions (boolean or {duration?, easing?, intro?})." }, "loading": { "type": "boolean", "description": "Show loading skeleton / loadingContent." }, "hoverHighlight": { "type": "boolean", "description": "Dim non-hovered series/categories (requires colorBy string field)." }, "chartId": { "type": "string", "description": "Stable id for linked selection / observation / nav sync." }, "emphasis": { "type": "string", "enum": [ "primary", "secondary" ] }, "responsiveWidth": { "type": "boolean" }, "responsiveHeight": { "type": "boolean" }, "color": { "type": "string", "description": "Uniform mark fill (primitive styling)." }, "stroke": { "type": "string" }, "strokeWidth": { "type": "number" }, "opacity": { "type": "number" }, "xLabel": { "type": "string" }, "yLabel": { "type": "string" }, "xScaleType": { "type": "string", "enum": [ "linear", "log", "time" ], "description": "x scale type. \"time\" builds a scaleTime (required for landmark ticks on timestamps)." }, "yScaleType": { "type": "string", "enum": [ "linear", "log", "time" ], "description": "y scale type." }, "data": { "type": "array", "description": "Array of data objects" }, "xAccessor": { "type": "string", "description": "Key for x-axis values", "default": "x", "x-semiotic-runtime-types": [ "string", "function" ] }, "yAccessor": { "type": "string", "description": "Key for y-axis values", "default": "y", "x-semiotic-runtime-types": [ "string", "function" ] }, "orderAccessor": { "type": "string", "description": "Key for point ordering (number or Date field)", "x-semiotic-runtime-types": [ "string", "function" ] }, "orderLabel": { "type": "string", "description": "Label for the ordering metric in tooltips" }, "pointRadius": { "type": "number", "description": "Point radius", "default": 4 }, "pointIdAccessor": { "type": "string", "description": "Accessor for unique point IDs, used by point-anchored annotations", "x-semiotic-runtime-types": [ "string", "function" ] }, "xExtent": { "type": "array", "description": "Fixed x domain `[min, max]`; either bound may be omitted." }, "yExtent": { "type": "array", "description": "Fixed y domain `[min, max]`; either bound may be omitted." }, "regression": { "type": [ "boolean", "string", "object" ], "description": "Overlay a regression line under the connected path. Same shape as Scatterplot's regression prop." }, "forecast": { "type": "object", "description": "Forecast overlay config — same shape as LineChart's forecast prop." }, "anomaly": { "type": "object", "description": "Anomaly overlay config — ±σ band + anomaly dot annotations." } }, "required": [ "data" ] } } }, { "type": "function", "function": { "name": "BarChart", "description": "Vertical or horizontal bars for categorical comparisons.", "parameters": { "type": "object", "properties": { "mode": { "type": "string", "enum": [ "primary", "context", "sparkline", "mobile" ], "description": "Display mode controlling default size, decoration, margins, labels, and interaction.", "default": "primary" }, "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object", "description": "Object margin. A side value of \"auto\" or null leaves that side available for auto-reservation." }, "className": { "type": "string" }, "title": { "type": "string", "description": "Visible chart title and the chart's accessible name." }, "description": { "type": "string", "description": "Concise accessible description that overrides the chart's generated aria-label." }, "summary": { "type": "string", "description": "Screen-reader-only summary of the chart's key takeaway; include keyboard interaction guidance when relevant." }, "accessibleTable": { "type": "boolean", "description": "Expose the chart data through Semiotic's screen-reader data table.", "default": true }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "legendInteraction": { "type": "string", "enum": [ "highlight", "isolate", "none" ], "description": "Legend interaction mode: highlight on hover, isolate on click, or none.", "default": "none" }, "legendPosition": { "type": "string", "enum": [ "right", "left", "top", "bottom" ], "description": "Position the legend beside or above/below the plot.", "default": "right" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": "string", "x-semiotic-runtime-types": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array", "object" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "object", "string" ], "description": "Tooltip: true/false, \"multi\", { mode: \"multi\", content? }, a custom function, or { fields, title } config. Multi mode shows every series at the hovered x; custom multi content receives allSeries/xValue.", "x-semiotic-runtime-types": [ "boolean", "function", "object", "string" ] }, "annotations": { "type": "array", "description": "Annotation objects to render on the chart. Each must have a `type` field. Position using your data field names (e.g. { type: \"widget\", month: \"Jan\", revenue: 500 }). Supported types: \"widget\" (arbitrary HTML/React content via foreignObject — v3 replacement for htmlAnnotationRules), \"label\" (callout with connector), \"callout\" (circle + label), \"text\" (plain label), \"y-threshold\" (horizontal reference line), \"x-threshold\" (vertical reference line), \"band\" (shaded y-region), \"enclose\" (circle around points), \"rect-enclose\" (rect around points), \"highlight\" (colored dots on filtered points), \"trend\" (regression line), \"envelope\" (upper/lower bounds), \"anomaly-band\" (mean ± stddev), \"forecast\" (extrapolated trend). Widget annotations accept: content (ReactNode), dx, dy, width, height, anchor (\"fixed\"|\"latest\"|\"sticky\"). Threshold annotations accept: value, label, color, strokeWidth, strokeDasharray. Enclose annotations accept: coordinates (array of data objects), label, color, padding.", "items": { "type": "object", "properties": { "type": { "type": "string", "enum": [ "widget", "label", "callout", "text", "bracket", "y-threshold", "x-threshold", "band", "enclose", "rect-enclose", "highlight", "trend", "envelope", "anomaly-band", "forecast" ], "description": "Annotation type" } }, "required": [ "type" ] } }, "autoPlaceAnnotations": { "type": [ "boolean", "object" ], "description": "Opt-in annotation placement pass. Chooses dx/dy for note-like annotations without manual offsets and avoids note/mark/edge overlaps where possible.", "default": false }, "responsiveRules": { "type": "array", "description": "Semantic responsive transforms applied before chart-mode defaults." }, "mobileSemantics": { "type": "object", "description": "Phone/mobile contract consumed by audits, recipes, adapters, and agents." }, "mobileInteraction": { "type": [ "boolean", "object" ], "description": "Touch-first interaction policy for phone-sized chart slots." }, "maxDevicePixelRatio": { "type": "number", "description": "Maximum canvas backing-store DPR. Defaults to 3 on desktop and 2 on coarse-pointer/small-screen devices; canvases repaint when browser zoom or display density changes." }, "axisExtent": { "type": "string", "enum": [ "nice", "exact" ], "description": "Tick endpoint mode. \"nice\" rounds endpoints to readable values; \"exact\" pins the first and last tick to the actual data min and max with equidistant intermediates. Affects XY x/y axes and ordinal value axis only.", "default": "nice" }, "animate": { "type": [ "boolean", "object" ], "description": "Enable mark transitions (boolean or {duration?, easing?, intro?})." }, "loading": { "type": "boolean", "description": "Show loading skeleton / loadingContent." }, "hoverHighlight": { "type": "boolean", "description": "Dim non-hovered series/categories (requires colorBy string field)." }, "chartId": { "type": "string", "description": "Stable id for linked selection / observation / nav sync." }, "emphasis": { "type": "string", "enum": [ "primary", "secondary" ] }, "responsiveWidth": { "type": "boolean" }, "responsiveHeight": { "type": "boolean" }, "color": { "type": "string", "description": "Uniform mark fill (primitive styling)." }, "stroke": { "type": "string" }, "strokeWidth": { "type": "number" }, "opacity": { "type": "number" }, "categoryLabel": { "type": "string" }, "valueLabel": { "type": "string" }, "showCategoryTicks": { "type": "boolean", "description": "Show category labels on the ordinal axis." }, "data": { "type": "array", "description": "Array of data objects" }, "categoryAccessor": { "type": "string", "description": "Key for category labels", "default": "category", "x-semiotic-runtime-types": [ "string", "function" ] }, "valueAccessor": { "type": "string", "description": "Key for bar values", "default": "value", "x-semiotic-runtime-types": [ "string", "function" ] }, "orientation": { "type": "string", "enum": [ "vertical", "horizontal" ], "default": "vertical" }, "sort": { "type": [ "boolean", "string" ], "description": "Sort bars: false, true, 'asc', 'desc', or comparator function", "default": false, "x-semiotic-runtime-types": [ "boolean", "string", "function" ] }, "barPadding": { "type": "number", "default": 40 }, "gradientFill": { "type": "object", "description": "Tip-to-base gradient: { stops: [{ offset: 0-1, color?, opacity? }] }." }, "regression": { "type": [ "boolean", "string", "object" ], "description": "Overlay a regression line through the bar tops. Accepts true (linear), a method ('linear' | 'polynomial' | 'loess'), or a full RegressionConfig. Pixels resolve through the band scale." } }, "required": [ "data" ] } } }, { "type": "function", "function": { "name": "StackedBarChart", "description": "Stacked bars for part-to-whole comparisons across categories. Requires stackBy to define the stacking dimension.", "parameters": { "type": "object", "properties": { "mode": { "type": "string", "enum": [ "primary", "context", "sparkline", "mobile" ], "description": "Display mode controlling default size, decoration, margins, labels, and interaction.", "default": "primary" }, "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object", "description": "Object margin. A side value of \"auto\" or null leaves that side available for auto-reservation." }, "className": { "type": "string" }, "title": { "type": "string", "description": "Visible chart title and the chart's accessible name." }, "description": { "type": "string", "description": "Concise accessible description that overrides the chart's generated aria-label." }, "summary": { "type": "string", "description": "Screen-reader-only summary of the chart's key takeaway; include keyboard interaction guidance when relevant." }, "accessibleTable": { "type": "boolean", "description": "Expose the chart data through Semiotic's screen-reader data table.", "default": true }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean", "default": true }, "legendInteraction": { "type": "string", "enum": [ "highlight", "isolate", "none" ], "description": "Legend interaction mode: highlight on hover, isolate on click, or none.", "default": "none" }, "legendPosition": { "type": "string", "enum": [ "right", "left", "top", "bottom" ], "description": "Position the legend beside or above/below the plot.", "default": "right" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": "string", "x-semiotic-runtime-types": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array", "object" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "object", "string" ], "description": "Tooltip: true/false, \"multi\", { mode: \"multi\", content? }, a custom function, or { fields, title } config. Multi mode shows every series at the hovered x; custom multi content receives allSeries/xValue.", "x-semiotic-runtime-types": [ "boolean", "function", "object", "string" ] }, "annotations": { "type": "array", "description": "Annotation objects to render on the chart. Each must have a `type` field. Position using your data field names (e.g. { type: \"widget\", month: \"Jan\", revenue: 500 }). Supported types: \"widget\" (arbitrary HTML/React content via foreignObject — v3 replacement for htmlAnnotationRules), \"label\" (callout with connector), \"callout\" (circle + label), \"text\" (plain label), \"y-threshold\" (horizontal reference line), \"x-threshold\" (vertical reference line), \"band\" (shaded y-region), \"enclose\" (circle around points), \"rect-enclose\" (rect around points), \"highlight\" (colored dots on filtered points), \"trend\" (regression line), \"envelope\" (upper/lower bounds), \"anomaly-band\" (mean ± stddev), \"forecast\" (extrapolated trend). Widget annotations accept: content (ReactNode), dx, dy, width, height, anchor (\"fixed\"|\"latest\"|\"sticky\"). Threshold annotations accept: value, label, color, strokeWidth, strokeDasharray. Enclose annotations accept: coordinates (array of data objects), label, color, padding.", "items": { "type": "object", "properties": { "type": { "type": "string", "enum": [ "widget", "label", "callout", "text", "bracket", "y-threshold", "x-threshold", "band", "enclose", "rect-enclose", "highlight", "trend", "envelope", "anomaly-band", "forecast" ], "description": "Annotation type" } }, "required": [ "type" ] } }, "autoPlaceAnnotations": { "type": [ "boolean", "object" ], "description": "Opt-in annotation placement pass. Chooses dx/dy for note-like annotations without manual offsets and avoids note/mark/edge overlaps where possible.", "default": false }, "responsiveRules": { "type": "array", "description": "Semantic responsive transforms applied before chart-mode defaults." }, "mobileSemantics": { "type": "object", "description": "Phone/mobile contract consumed by audits, recipes, adapters, and agents." }, "mobileInteraction": { "type": [ "boolean", "object" ], "description": "Touch-first interaction policy for phone-sized chart slots." }, "maxDevicePixelRatio": { "type": "number", "description": "Maximum canvas backing-store DPR. Defaults to 3 on desktop and 2 on coarse-pointer/small-screen devices; canvases repaint when browser zoom or display density changes." }, "axisExtent": { "type": "string", "enum": [ "nice", "exact" ], "description": "Tick endpoint mode. \"nice\" rounds endpoints to readable values; \"exact\" pins the first and last tick to the actual data min and max with equidistant intermediates. Affects XY x/y axes and ordinal value axis only.", "default": "nice" }, "animate": { "type": [ "boolean", "object" ], "description": "Enable mark transitions (boolean or {duration?, easing?, intro?})." }, "loading": { "type": "boolean", "description": "Show loading skeleton / loadingContent." }, "hoverHighlight": { "type": "boolean", "description": "Dim non-hovered series/categories (requires colorBy string field)." }, "chartId": { "type": "string", "description": "Stable id for linked selection / observation / nav sync." }, "emphasis": { "type": "string", "enum": [ "primary", "secondary" ] }, "responsiveWidth": { "type": "boolean" }, "responsiveHeight": { "type": "boolean" }, "color": { "type": "string", "description": "Uniform mark fill (primitive styling)." }, "stroke": { "type": "string" }, "strokeWidth": { "type": "number" }, "opacity": { "type": "number" }, "categoryLabel": { "type": "string" }, "valueLabel": { "type": "string" }, "showCategoryTicks": { "type": "boolean", "description": "Show category labels on the ordinal axis." }, "data": { "type": "array", "description": "Array of data objects" }, "stackBy": { "type": "string", "description": "Key to define the stacking dimension (required)", "x-semiotic-runtime-types": [ "string", "function" ] }, "categoryAccessor": { "type": "string", "default": "category", "x-semiotic-runtime-types": [ "string", "function" ] }, "valueAccessor": { "type": "string", "default": "value", "x-semiotic-runtime-types": [ "string", "function" ] }, "orientation": { "type": "string", "enum": [ "vertical", "horizontal" ], "default": "vertical" }, "normalize": { "type": "boolean", "description": "Normalize stacks to 100%", "default": false }, "barPadding": { "type": "number", "default": 40 }, "gradientFill": { "type": "object", "description": "Tip-to-base gradient: { stops: [{ offset: 0-1, color?, opacity? }] }." } }, "required": [ "data", "stackBy" ] } } }, { "type": "function", "function": { "name": "LikertChart", "description": "Visualize Likert scale survey responses. Horizontal (default): diverging bar chart centered at 0% — negative levels extend left, positive right, neutral (if odd count) split 50/50 across centerline. Vertical: stacked 100% bar chart. Supports raw integer scores (1-based, aggregated automatically) or pre-aggregated (question, level, count) data. The levels array defines polarity: first half = negative, second half = positive, center = neutral (if odd). Works with any scale size (3-point to 7-point+). Supports push API for streaming — accumulates raw data and re-aggregates on each push.", "parameters": { "type": "object", "properties": { "mode": { "type": "string", "enum": [ "primary", "context", "sparkline", "mobile" ], "description": "Display mode controlling default size, decoration, margins, labels, and interaction.", "default": "primary" }, "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object", "description": "Object margin. A side value of \"auto\" or null leaves that side available for auto-reservation." }, "className": { "type": "string" }, "title": { "type": "string", "description": "Visible chart title and the chart's accessible name." }, "description": { "type": "string", "description": "Concise accessible description that overrides the chart's generated aria-label." }, "summary": { "type": "string", "description": "Screen-reader-only summary of the chart's key takeaway; include keyboard interaction guidance when relevant." }, "accessibleTable": { "type": "boolean", "description": "Expose the chart data through Semiotic's screen-reader data table.", "default": true }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "legendInteraction": { "type": "string", "enum": [ "highlight", "isolate", "none" ], "description": "Legend interaction mode: highlight on hover, isolate on click, or none.", "default": "none" }, "legendPosition": { "type": "string", "enum": [ "right", "left", "top", "bottom" ], "description": "Position the legend beside or above/below the plot.", "default": "right" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": "string", "x-semiotic-runtime-types": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array", "object" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "object", "string" ], "description": "Tooltip: true/false, \"multi\", { mode: \"multi\", content? }, a custom function, or { fields, title } config. Multi mode shows every series at the hovered x; custom multi content receives allSeries/xValue.", "x-semiotic-runtime-types": [ "boolean", "function", "object", "string" ] }, "annotations": { "type": "array", "description": "Annotation objects to render on the chart. Each must have a `type` field. Position using your data field names (e.g. { type: \"widget\", month: \"Jan\", revenue: 500 }). Supported types: \"widget\" (arbitrary HTML/React content via foreignObject — v3 replacement for htmlAnnotationRules), \"label\" (callout with connector), \"callout\" (circle + label), \"text\" (plain label), \"y-threshold\" (horizontal reference line), \"x-threshold\" (vertical reference line), \"band\" (shaded y-region), \"enclose\" (circle around points), \"rect-enclose\" (rect around points), \"highlight\" (colored dots on filtered points), \"trend\" (regression line), \"envelope\" (upper/lower bounds), \"anomaly-band\" (mean ± stddev), \"forecast\" (extrapolated trend). Widget annotations accept: content (ReactNode), dx, dy, width, height, anchor (\"fixed\"|\"latest\"|\"sticky\"). Threshold annotations accept: value, label, color, strokeWidth, strokeDasharray. Enclose annotations accept: coordinates (array of data objects), label, color, padding.", "items": { "type": "object", "properties": { "type": { "type": "string", "enum": [ "widget", "label", "callout", "text", "bracket", "y-threshold", "x-threshold", "band", "enclose", "rect-enclose", "highlight", "trend", "envelope", "anomaly-band", "forecast" ], "description": "Annotation type" } }, "required": [ "type" ] } }, "autoPlaceAnnotations": { "type": [ "boolean", "object" ], "description": "Opt-in annotation placement pass. Chooses dx/dy for note-like annotations without manual offsets and avoids note/mark/edge overlaps where possible.", "default": false }, "responsiveRules": { "type": "array", "description": "Semantic responsive transforms applied before chart-mode defaults." }, "mobileSemantics": { "type": "object", "description": "Phone/mobile contract consumed by audits, recipes, adapters, and agents." }, "mobileInteraction": { "type": [ "boolean", "object" ], "description": "Touch-first interaction policy for phone-sized chart slots." }, "maxDevicePixelRatio": { "type": "number", "description": "Maximum canvas backing-store DPR. Defaults to 3 on desktop and 2 on coarse-pointer/small-screen devices; canvases repaint when browser zoom or display density changes." }, "axisExtent": { "type": "string", "enum": [ "nice", "exact" ], "description": "Tick endpoint mode. \"nice\" rounds endpoints to readable values; \"exact\" pins the first and last tick to the actual data min and max with equidistant intermediates. Affects XY x/y axes and ordinal value axis only.", "default": "nice" }, "animate": { "type": [ "boolean", "object" ], "description": "Enable mark transitions (boolean or {duration?, easing?, intro?})." }, "loading": { "type": "boolean", "description": "Show loading skeleton / loadingContent." }, "hoverHighlight": { "type": "boolean", "description": "Dim non-hovered series/categories (requires colorBy string field)." }, "chartId": { "type": "string", "description": "Stable id for linked selection / observation / nav sync." }, "emphasis": { "type": "string", "enum": [ "primary", "secondary" ] }, "responsiveWidth": { "type": "boolean" }, "responsiveHeight": { "type": "boolean" }, "color": { "type": "string", "description": "Uniform mark fill (primitive styling)." }, "stroke": { "type": "string" }, "strokeWidth": { "type": "number" }, "opacity": { "type": "number" }, "categoryLabel": { "type": "string" }, "valueLabel": { "type": "string" }, "showCategoryTicks": { "type": "boolean", "description": "Show category labels on the ordinal axis." }, "data": { "type": "array", "description": "Array of raw response or pre-aggregated data objects" }, "levels": { "type": "array", "description": "Ordered response labels, most negative to most positive. Defaults to a 5-point Very Low to Very High scale. Odd count = center is neutral.", "default": [ "Very Low", "Low", "Neutral", "High", "Very High" ] }, "categoryAccessor": { "type": "string", "description": "Question/item field (ordinal axis)", "default": "question", "x-semiotic-runtime-types": [ "string", "function" ] }, "valueAccessor": { "type": "string", "description": "Integer score field for raw response mode (1-based: score 1 → levels[0])", "default": "score", "x-semiotic-runtime-types": [ "string", "function" ] }, "levelAccessor": { "type": "string", "description": "Level name field for pre-aggregated mode. Each value must match an entry in levels.", "x-semiotic-runtime-types": [ "string", "function" ] }, "countAccessor": { "type": "string", "description": "Count/frequency field for pre-aggregated mode", "default": "count", "x-semiotic-runtime-types": [ "string", "function" ] }, "orientation": { "type": "string", "enum": [ "vertical", "horizontal" ], "default": "horizontal" }, "barPadding": { "type": "number", "default": 20 } }, "required": [] } } }, { "type": "function", "function": { "name": "GroupedBarChart", "description": "Side-by-side bars for comparing sub-categories within categories. Requires groupBy to define grouping.", "parameters": { "type": "object", "properties": { "mode": { "type": "string", "enum": [ "primary", "context", "sparkline", "mobile" ], "description": "Display mode controlling default size, decoration, margins, labels, and interaction.", "default": "primary" }, "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object", "description": "Object margin. A side value of \"auto\" or null leaves that side available for auto-reservation." }, "className": { "type": "string" }, "title": { "type": "string", "description": "Visible chart title and the chart's accessible name." }, "description": { "type": "string", "description": "Concise accessible description that overrides the chart's generated aria-label." }, "summary": { "type": "string", "description": "Screen-reader-only summary of the chart's key takeaway; include keyboard interaction guidance when relevant." }, "accessibleTable": { "type": "boolean", "description": "Expose the chart data through Semiotic's screen-reader data table.", "default": true }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean", "default": true }, "legendInteraction": { "type": "string", "enum": [ "highlight", "isolate", "none" ], "description": "Legend interaction mode: highlight on hover, isolate on click, or none.", "default": "none" }, "legendPosition": { "type": "string", "enum": [ "right", "left", "top", "bottom" ], "description": "Position the legend beside or above/below the plot.", "default": "right" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": "string", "x-semiotic-runtime-types": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array", "object" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "object", "string" ], "description": "Tooltip: true/false, \"multi\", { mode: \"multi\", content? }, a custom function, or { fields, title } config. Multi mode shows every series at the hovered x; custom multi content receives allSeries/xValue.", "x-semiotic-runtime-types": [ "boolean", "function", "object", "string" ] }, "annotations": { "type": "array", "description": "Annotation objects to render on the chart. Each must have a `type` field. Position using your data field names (e.g. { type: \"widget\", month: \"Jan\", revenue: 500 }). Supported types: \"widget\" (arbitrary HTML/React content via foreignObject — v3 replacement for htmlAnnotationRules), \"label\" (callout with connector), \"callout\" (circle + label), \"text\" (plain label), \"y-threshold\" (horizontal reference line), \"x-threshold\" (vertical reference line), \"band\" (shaded y-region), \"enclose\" (circle around points), \"rect-enclose\" (rect around points), \"highlight\" (colored dots on filtered points), \"trend\" (regression line), \"envelope\" (upper/lower bounds), \"anomaly-band\" (mean ± stddev), \"forecast\" (extrapolated trend). Widget annotations accept: content (ReactNode), dx, dy, width, height, anchor (\"fixed\"|\"latest\"|\"sticky\"). Threshold annotations accept: value, label, color, strokeWidth, strokeDasharray. Enclose annotations accept: coordinates (array of data objects), label, color, padding.", "items": { "type": "object", "properties": { "type": { "type": "string", "enum": [ "widget", "label", "callout", "text", "bracket", "y-threshold", "x-threshold", "band", "enclose", "rect-enclose", "highlight", "trend", "envelope", "anomaly-band", "forecast" ], "description": "Annotation type" } }, "required": [ "type" ] } }, "autoPlaceAnnotations": { "type": [ "boolean", "object" ], "description": "Opt-in annotation placement pass. Chooses dx/dy for note-like annotations without manual offsets and avoids note/mark/edge overlaps where possible.", "default": false }, "responsiveRules": { "type": "array", "description": "Semantic responsive transforms applied before chart-mode defaults." }, "mobileSemantics": { "type": "object", "description": "Phone/mobile contract consumed by audits, recipes, adapters, and agents." }, "mobileInteraction": { "type": [ "boolean", "object" ], "description": "Touch-first interaction policy for phone-sized chart slots." }, "maxDevicePixelRatio": { "type": "number", "description": "Maximum canvas backing-store DPR. Defaults to 3 on desktop and 2 on coarse-pointer/small-screen devices; canvases repaint when browser zoom or display density changes." }, "axisExtent": { "type": "string", "enum": [ "nice", "exact" ], "description": "Tick endpoint mode. \"nice\" rounds endpoints to readable values; \"exact\" pins the first and last tick to the actual data min and max with equidistant intermediates. Affects XY x/y axes and ordinal value axis only.", "default": "nice" }, "animate": { "type": [ "boolean", "object" ], "description": "Enable mark transitions (boolean or {duration?, easing?, intro?})." }, "loading": { "type": "boolean", "description": "Show loading skeleton / loadingContent." }, "hoverHighlight": { "type": "boolean", "description": "Dim non-hovered series/categories (requires colorBy string field)." }, "chartId": { "type": "string", "description": "Stable id for linked selection / observation / nav sync." }, "emphasis": { "type": "string", "enum": [ "primary", "secondary" ] }, "responsiveWidth": { "type": "boolean" }, "responsiveHeight": { "type": "boolean" }, "color": { "type": "string", "description": "Uniform mark fill (primitive styling)." }, "stroke": { "type": "string" }, "strokeWidth": { "type": "number" }, "opacity": { "type": "number" }, "categoryLabel": { "type": "string" }, "valueLabel": { "type": "string" }, "showCategoryTicks": { "type": "boolean", "description": "Show category labels on the ordinal axis." }, "data": { "type": "array", "description": "Array of data objects" }, "groupBy": { "type": "string", "description": "Key to define the grouping dimension (required)", "x-semiotic-runtime-types": [ "string", "function" ] }, "categoryAccessor": { "type": "string", "default": "category", "x-semiotic-runtime-types": [ "string", "function" ] }, "valueAccessor": { "type": "string", "default": "value", "x-semiotic-runtime-types": [ "string", "function" ] }, "orientation": { "type": "string", "enum": [ "vertical", "horizontal" ], "default": "vertical" }, "barPadding": { "type": "number", "default": 60 }, "gradientFill": { "type": "object", "description": "Tip-to-base gradient: { stops: [{ offset: 0-1, color?, opacity? }] }." } }, "required": [ "data", "groupBy" ] } } }, { "type": "function", "function": { "name": "SwarmPlot", "description": "Beeswarm/jittered dot plot showing individual data points within categories. Good for distributions.", "parameters": { "type": "object", "properties": { "mode": { "type": "string", "enum": [ "primary", "context", "sparkline", "mobile" ], "description": "Display mode controlling default size, decoration, margins, labels, and interaction.", "default": "primary" }, "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object", "description": "Object margin. A side value of \"auto\" or null leaves that side available for auto-reservation." }, "className": { "type": "string" }, "title": { "type": "string", "description": "Visible chart title and the chart's accessible name." }, "description": { "type": "string", "description": "Concise accessible description that overrides the chart's generated aria-label." }, "summary": { "type": "string", "description": "Screen-reader-only summary of the chart's key takeaway; include keyboard interaction guidance when relevant." }, "accessibleTable": { "type": "boolean", "description": "Expose the chart data through Semiotic's screen-reader data table.", "default": true }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "legendInteraction": { "type": "string", "enum": [ "highlight", "isolate", "none" ], "description": "Legend interaction mode: highlight on hover, isolate on click, or none.", "default": "none" }, "legendPosition": { "type": "string", "enum": [ "right", "left", "top", "bottom" ], "description": "Position the legend beside or above/below the plot.", "default": "right" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": "string", "x-semiotic-runtime-types": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array", "object" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "object", "string" ], "description": "Tooltip: true/false, \"multi\", { mode: \"multi\", content? }, a custom function, or { fields, title } config. Multi mode shows every series at the hovered x; custom multi content receives allSeries/xValue.", "x-semiotic-runtime-types": [ "boolean", "function", "object", "string" ] }, "annotations": { "type": "array", "description": "Annotation objects to render on the chart. Each must have a `type` field. Position using your data field names (e.g. { type: \"widget\", month: \"Jan\", revenue: 500 }). Supported types: \"widget\" (arbitrary HTML/React content via foreignObject — v3 replacement for htmlAnnotationRules), \"label\" (callout with connector), \"callout\" (circle + label), \"text\" (plain label), \"y-threshold\" (horizontal reference line), \"x-threshold\" (vertical reference line), \"band\" (shaded y-region), \"enclose\" (circle around points), \"rect-enclose\" (rect around points), \"highlight\" (colored dots on filtered points), \"trend\" (regression line), \"envelope\" (upper/lower bounds), \"anomaly-band\" (mean ± stddev), \"forecast\" (extrapolated trend). Widget annotations accept: content (ReactNode), dx, dy, width, height, anchor (\"fixed\"|\"latest\"|\"sticky\"). Threshold annotations accept: value, label, color, strokeWidth, strokeDasharray. Enclose annotations accept: coordinates (array of data objects), label, color, padding.", "items": { "type": "object", "properties": { "type": { "type": "string", "enum": [ "widget", "label", "callout", "text", "bracket", "y-threshold", "x-threshold", "band", "enclose", "rect-enclose", "highlight", "trend", "envelope", "anomaly-band", "forecast" ], "description": "Annotation type" } }, "required": [ "type" ] } }, "autoPlaceAnnotations": { "type": [ "boolean", "object" ], "description": "Opt-in annotation placement pass. Chooses dx/dy for note-like annotations without manual offsets and avoids note/mark/edge overlaps where possible.", "default": false }, "responsiveRules": { "type": "array", "description": "Semantic responsive transforms applied before chart-mode defaults." }, "mobileSemantics": { "type": "object", "description": "Phone/mobile contract consumed by audits, recipes, adapters, and agents." }, "mobileInteraction": { "type": [ "boolean", "object" ], "description": "Touch-first interaction policy for phone-sized chart slots." }, "maxDevicePixelRatio": { "type": "number", "description": "Maximum canvas backing-store DPR. Defaults to 3 on desktop and 2 on coarse-pointer/small-screen devices; canvases repaint when browser zoom or display density changes." }, "axisExtent": { "type": "string", "enum": [ "nice", "exact" ], "description": "Tick endpoint mode. \"nice\" rounds endpoints to readable values; \"exact\" pins the first and last tick to the actual data min and max with equidistant intermediates. Affects XY x/y axes and ordinal value axis only.", "default": "nice" }, "animate": { "type": [ "boolean", "object" ], "description": "Enable mark transitions (boolean or {duration?, easing?, intro?})." }, "loading": { "type": "boolean", "description": "Show loading skeleton / loadingContent." }, "hoverHighlight": { "type": "boolean", "description": "Dim non-hovered series/categories (requires colorBy string field)." }, "chartId": { "type": "string", "description": "Stable id for linked selection / observation / nav sync." }, "emphasis": { "type": "string", "enum": [ "primary", "secondary" ] }, "responsiveWidth": { "type": "boolean" }, "responsiveHeight": { "type": "boolean" }, "color": { "type": "string", "description": "Uniform mark fill (primitive styling)." }, "stroke": { "type": "string" }, "strokeWidth": { "type": "number" }, "opacity": { "type": "number" }, "categoryLabel": { "type": "string" }, "valueLabel": { "type": "string" }, "showCategoryTicks": { "type": "boolean", "description": "Show category labels on the ordinal axis." }, "data": { "type": "array", "description": "Array of data objects" }, "categoryAccessor": { "type": "string", "default": "category", "x-semiotic-runtime-types": [ "string", "function" ] }, "valueAccessor": { "type": "string", "default": "value", "x-semiotic-runtime-types": [ "string", "function" ] }, "orientation": { "type": "string", "enum": [ "vertical", "horizontal" ], "default": "vertical" }, "sizeBy": { "type": "string", "description": "Key for variable point sizing", "x-semiotic-runtime-types": [ "string", "function" ] }, "sizeRange": { "type": "array", "default": [ 3, 8 ] }, "symbolBy": { "type": "string", "description": "Categorical field → glyph shape; each point renders as a d3-shape glyph instead of a circle.", "x-semiotic-runtime-types": [ "string", "function" ] }, "symbolMap": { "type": "object", "description": "Explicit {category → shape} map for symbolBy; unmapped categories auto-assign." }, "pointRadius": { "type": "number", "default": 4 }, "pointOpacity": { "type": "number", "default": 0.7 }, "categoryPadding": { "type": "number", "default": 20 } }, "required": [ "data" ] } } }, { "type": "function", "function": { "name": "BoxPlot", "description": "Box-and-whisker plots showing statistical distribution (median, quartiles, outliers) per category.", "parameters": { "type": "object", "properties": { "mode": { "type": "string", "enum": [ "primary", "context", "sparkline", "mobile" ], "description": "Display mode controlling default size, decoration, margins, labels, and interaction.", "default": "primary" }, "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object", "description": "Object margin. A side value of \"auto\" or null leaves that side available for auto-reservation." }, "className": { "type": "string" }, "title": { "type": "string", "description": "Visible chart title and the chart's accessible name." }, "description": { "type": "string", "description": "Concise accessible description that overrides the chart's generated aria-label." }, "summary": { "type": "string", "description": "Screen-reader-only summary of the chart's key takeaway; include keyboard interaction guidance when relevant." }, "accessibleTable": { "type": "boolean", "description": "Expose the chart data through Semiotic's screen-reader data table.", "default": true }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "legendInteraction": { "type": "string", "enum": [ "highlight", "isolate", "none" ], "description": "Legend interaction mode: highlight on hover, isolate on click, or none.", "default": "none" }, "legendPosition": { "type": "string", "enum": [ "right", "left", "top", "bottom" ], "description": "Position the legend beside or above/below the plot.", "default": "right" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": "string", "x-semiotic-runtime-types": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array", "object" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "object", "string" ], "description": "Tooltip: true/false, \"multi\", { mode: \"multi\", content? }, a custom function, or { fields, title } config. Multi mode shows every series at the hovered x; custom multi content receives allSeries/xValue.", "x-semiotic-runtime-types": [ "boolean", "function", "object", "string" ] }, "annotations": { "type": "array", "description": "Annotation objects to render on the chart. Each must have a `type` field. Position using your data field names (e.g. { type: \"widget\", month: \"Jan\", revenue: 500 }). Supported types: \"widget\" (arbitrary HTML/React content via foreignObject — v3 replacement for htmlAnnotationRules), \"label\" (callout with connector), \"callout\" (circle + label), \"text\" (plain label), \"y-threshold\" (horizontal reference line), \"x-threshold\" (vertical reference line), \"band\" (shaded y-region), \"enclose\" (circle around points), \"rect-enclose\" (rect around points), \"highlight\" (colored dots on filtered points), \"trend\" (regression line), \"envelope\" (upper/lower bounds), \"anomaly-band\" (mean ± stddev), \"forecast\" (extrapolated trend). Widget annotations accept: content (ReactNode), dx, dy, width, height, anchor (\"fixed\"|\"latest\"|\"sticky\"). Threshold annotations accept: value, label, color, strokeWidth, strokeDasharray. Enclose annotations accept: coordinates (array of data objects), label, color, padding.", "items": { "type": "object", "properties": { "type": { "type": "string", "enum": [ "widget", "label", "callout", "text", "bracket", "y-threshold", "x-threshold", "band", "enclose", "rect-enclose", "highlight", "trend", "envelope", "anomaly-band", "forecast" ], "description": "Annotation type" } }, "required": [ "type" ] } }, "autoPlaceAnnotations": { "type": [ "boolean", "object" ], "description": "Opt-in annotation placement pass. Chooses dx/dy for note-like annotations without manual offsets and avoids note/mark/edge overlaps where possible.", "default": false }, "responsiveRules": { "type": "array", "description": "Semantic responsive transforms applied before chart-mode defaults." }, "mobileSemantics": { "type": "object", "description": "Phone/mobile contract consumed by audits, recipes, adapters, and agents." }, "mobileInteraction": { "type": [ "boolean", "object" ], "description": "Touch-first interaction policy for phone-sized chart slots." }, "maxDevicePixelRatio": { "type": "number", "description": "Maximum canvas backing-store DPR. Defaults to 3 on desktop and 2 on coarse-pointer/small-screen devices; canvases repaint when browser zoom or display density changes." }, "axisExtent": { "type": "string", "enum": [ "nice", "exact" ], "description": "Tick endpoint mode. \"nice\" rounds endpoints to readable values; \"exact\" pins the first and last tick to the actual data min and max with equidistant intermediates. Affects XY x/y axes and ordinal value axis only.", "default": "nice" }, "animate": { "type": [ "boolean", "object" ], "description": "Enable mark transitions (boolean or {duration?, easing?, intro?})." }, "loading": { "type": "boolean", "description": "Show loading skeleton / loadingContent." }, "hoverHighlight": { "type": "boolean", "description": "Dim non-hovered series/categories (requires colorBy string field)." }, "chartId": { "type": "string", "description": "Stable id for linked selection / observation / nav sync." }, "emphasis": { "type": "string", "enum": [ "primary", "secondary" ] }, "responsiveWidth": { "type": "boolean" }, "responsiveHeight": { "type": "boolean" }, "color": { "type": "string", "description": "Uniform mark fill (primitive styling)." }, "stroke": { "type": "string" }, "strokeWidth": { "type": "number" }, "opacity": { "type": "number" }, "categoryLabel": { "type": "string" }, "valueLabel": { "type": "string" }, "showCategoryTicks": { "type": "boolean", "description": "Show category labels on the ordinal axis." }, "data": { "type": "array", "description": "Array of data objects" }, "categoryAccessor": { "type": "string", "default": "category", "x-semiotic-runtime-types": [ "string", "function" ] }, "valueAccessor": { "type": "string", "default": "value", "x-semiotic-runtime-types": [ "string", "function" ] }, "orientation": { "type": "string", "enum": [ "vertical", "horizontal" ], "default": "vertical" }, "showOutliers": { "type": "boolean", "description": "Show outlier points", "default": true }, "outlierRadius": { "type": "number", "default": 3 }, "categoryPadding": { "type": "number", "default": 20 } }, "required": [ "data" ] } } }, { "type": "function", "function": { "name": "Histogram", "description": "Binned frequency distribution chart. Shows how data values are distributed across bins within categories.", "parameters": { "type": "object", "properties": { "mode": { "type": "string", "enum": [ "primary", "context", "sparkline", "mobile" ], "description": "Display mode controlling default size, decoration, margins, labels, and interaction.", "default": "primary" }, "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object", "description": "Object margin. A side value of \"auto\" or null leaves that side available for auto-reservation." }, "className": { "type": "string" }, "title": { "type": "string", "description": "Visible chart title and the chart's accessible name." }, "description": { "type": "string", "description": "Concise accessible description that overrides the chart's generated aria-label." }, "summary": { "type": "string", "description": "Screen-reader-only summary of the chart's key takeaway; include keyboard interaction guidance when relevant." }, "accessibleTable": { "type": "boolean", "description": "Expose the chart data through Semiotic's screen-reader data table.", "default": true }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "legendInteraction": { "type": "string", "enum": [ "highlight", "isolate", "none" ], "description": "Legend interaction mode: highlight on hover, isolate on click, or none.", "default": "none" }, "legendPosition": { "type": "string", "enum": [ "right", "left", "top", "bottom" ], "description": "Position the legend beside or above/below the plot.", "default": "right" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": "string", "x-semiotic-runtime-types": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array", "object" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "object", "string" ], "description": "Tooltip: true/false, \"multi\", { mode: \"multi\", content? }, a custom function, or { fields, title } config. Multi mode shows every series at the hovered x; custom multi content receives allSeries/xValue.", "x-semiotic-runtime-types": [ "boolean", "function", "object", "string" ] }, "annotations": { "type": "array", "description": "Annotation objects to render on the chart. Each must have a `type` field. Position using your data field names (e.g. { type: \"widget\", month: \"Jan\", revenue: 500 }). Supported types: \"widget\" (arbitrary HTML/React content via foreignObject — v3 replacement for htmlAnnotationRules), \"label\" (callout with connector), \"callout\" (circle + label), \"text\" (plain label), \"y-threshold\" (horizontal reference line), \"x-threshold\" (vertical reference line), \"band\" (shaded y-region), \"enclose\" (circle around points), \"rect-enclose\" (rect around points), \"highlight\" (colored dots on filtered points), \"trend\" (regression line), \"envelope\" (upper/lower bounds), \"anomaly-band\" (mean ± stddev), \"forecast\" (extrapolated trend). Widget annotations accept: content (ReactNode), dx, dy, width, height, anchor (\"fixed\"|\"latest\"|\"sticky\"). Threshold annotations accept: value, label, color, strokeWidth, strokeDasharray. Enclose annotations accept: coordinates (array of data objects), label, color, padding.", "items": { "type": "object", "properties": { "type": { "type": "string", "enum": [ "widget", "label", "callout", "text", "bracket", "y-threshold", "x-threshold", "band", "enclose", "rect-enclose", "highlight", "trend", "envelope", "anomaly-band", "forecast" ], "description": "Annotation type" } }, "required": [ "type" ] } }, "autoPlaceAnnotations": { "type": [ "boolean", "object" ], "description": "Opt-in annotation placement pass. Chooses dx/dy for note-like annotations without manual offsets and avoids note/mark/edge overlaps where possible.", "default": false }, "responsiveRules": { "type": "array", "description": "Semantic responsive transforms applied before chart-mode defaults." }, "mobileSemantics": { "type": "object", "description": "Phone/mobile contract consumed by audits, recipes, adapters, and agents." }, "mobileInteraction": { "type": [ "boolean", "object" ], "description": "Touch-first interaction policy for phone-sized chart slots." }, "maxDevicePixelRatio": { "type": "number", "description": "Maximum canvas backing-store DPR. Defaults to 3 on desktop and 2 on coarse-pointer/small-screen devices; canvases repaint when browser zoom or display density changes." }, "axisExtent": { "type": "string", "enum": [ "nice", "exact" ], "description": "Tick endpoint mode. \"nice\" rounds endpoints to readable values; \"exact\" pins the first and last tick to the actual data min and max with equidistant intermediates. Affects XY x/y axes and ordinal value axis only.", "default": "nice" }, "animate": { "type": [ "boolean", "object" ], "description": "Enable mark transitions (boolean or {duration?, easing?, intro?})." }, "loading": { "type": "boolean", "description": "Show loading skeleton / loadingContent." }, "hoverHighlight": { "type": "boolean", "description": "Dim non-hovered series/categories (requires colorBy string field)." }, "chartId": { "type": "string", "description": "Stable id for linked selection / observation / nav sync." }, "emphasis": { "type": "string", "enum": [ "primary", "secondary" ] }, "responsiveWidth": { "type": "boolean" }, "responsiveHeight": { "type": "boolean" }, "color": { "type": "string", "description": "Uniform mark fill (primitive styling)." }, "stroke": { "type": "string" }, "strokeWidth": { "type": "number" }, "opacity": { "type": "number" }, "categoryLabel": { "type": "string" }, "valueLabel": { "type": "string" }, "showCategoryTicks": { "type": "boolean", "description": "Show category labels on the ordinal axis." }, "data": { "type": "array", "description": "Array of data objects" }, "categoryAccessor": { "type": "string", "default": "category", "x-semiotic-runtime-types": [ "string", "function" ] }, "valueAccessor": { "type": "string", "default": "value", "x-semiotic-runtime-types": [ "string", "function" ] }, "bins": { "type": "number", "description": "Number of bins for the histogram", "default": 25 }, "relative": { "type": "boolean", "description": "Normalize counts per category to show relative frequency", "default": false }, "categoryPadding": { "type": "number", "default": 20 } }, "required": [ "data" ] } } }, { "type": "function", "function": { "name": "ViolinPlot", "description": "Violin plots showing the full distribution shape (kernel density) per category. Combines density estimation with optional IQR lines.", "parameters": { "type": "object", "properties": { "mode": { "type": "string", "enum": [ "primary", "context", "sparkline", "mobile" ], "description": "Display mode controlling default size, decoration, margins, labels, and interaction.", "default": "primary" }, "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object", "description": "Object margin. A side value of \"auto\" or null leaves that side available for auto-reservation." }, "className": { "type": "string" }, "title": { "type": "string", "description": "Visible chart title and the chart's accessible name." }, "description": { "type": "string", "description": "Concise accessible description that overrides the chart's generated aria-label." }, "summary": { "type": "string", "description": "Screen-reader-only summary of the chart's key takeaway; include keyboard interaction guidance when relevant." }, "accessibleTable": { "type": "boolean", "description": "Expose the chart data through Semiotic's screen-reader data table.", "default": true }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "legendInteraction": { "type": "string", "enum": [ "highlight", "isolate", "none" ], "description": "Legend interaction mode: highlight on hover, isolate on click, or none.", "default": "none" }, "legendPosition": { "type": "string", "enum": [ "right", "left", "top", "bottom" ], "description": "Position the legend beside or above/below the plot.", "default": "right" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": "string", "x-semiotic-runtime-types": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array", "object" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "object", "string" ], "description": "Tooltip: true/false, \"multi\", { mode: \"multi\", content? }, a custom function, or { fields, title } config. Multi mode shows every series at the hovered x; custom multi content receives allSeries/xValue.", "x-semiotic-runtime-types": [ "boolean", "function", "object", "string" ] }, "annotations": { "type": "array", "description": "Annotation objects to render on the chart. Each must have a `type` field. Position using your data field names (e.g. { type: \"widget\", month: \"Jan\", revenue: 500 }). Supported types: \"widget\" (arbitrary HTML/React content via foreignObject — v3 replacement for htmlAnnotationRules), \"label\" (callout with connector), \"callout\" (circle + label), \"text\" (plain label), \"y-threshold\" (horizontal reference line), \"x-threshold\" (vertical reference line), \"band\" (shaded y-region), \"enclose\" (circle around points), \"rect-enclose\" (rect around points), \"highlight\" (colored dots on filtered points), \"trend\" (regression line), \"envelope\" (upper/lower bounds), \"anomaly-band\" (mean ± stddev), \"forecast\" (extrapolated trend). Widget annotations accept: content (ReactNode), dx, dy, width, height, anchor (\"fixed\"|\"latest\"|\"sticky\"). Threshold annotations accept: value, label, color, strokeWidth, strokeDasharray. Enclose annotations accept: coordinates (array of data objects), label, color, padding.", "items": { "type": "object", "properties": { "type": { "type": "string", "enum": [ "widget", "label", "callout", "text", "bracket", "y-threshold", "x-threshold", "band", "enclose", "rect-enclose", "highlight", "trend", "envelope", "anomaly-band", "forecast" ], "description": "Annotation type" } }, "required": [ "type" ] } }, "autoPlaceAnnotations": { "type": [ "boolean", "object" ], "description": "Opt-in annotation placement pass. Chooses dx/dy for note-like annotations without manual offsets and avoids note/mark/edge overlaps where possible.", "default": false }, "responsiveRules": { "type": "array", "description": "Semantic responsive transforms applied before chart-mode defaults." }, "mobileSemantics": { "type": "object", "description": "Phone/mobile contract consumed by audits, recipes, adapters, and agents." }, "mobileInteraction": { "type": [ "boolean", "object" ], "description": "Touch-first interaction policy for phone-sized chart slots." }, "maxDevicePixelRatio": { "type": "number", "description": "Maximum canvas backing-store DPR. Defaults to 3 on desktop and 2 on coarse-pointer/small-screen devices; canvases repaint when browser zoom or display density changes." }, "axisExtent": { "type": "string", "enum": [ "nice", "exact" ], "description": "Tick endpoint mode. \"nice\" rounds endpoints to readable values; \"exact\" pins the first and last tick to the actual data min and max with equidistant intermediates. Affects XY x/y axes and ordinal value axis only.", "default": "nice" }, "animate": { "type": [ "boolean", "object" ], "description": "Enable mark transitions (boolean or {duration?, easing?, intro?})." }, "loading": { "type": "boolean", "description": "Show loading skeleton / loadingContent." }, "hoverHighlight": { "type": "boolean", "description": "Dim non-hovered series/categories (requires colorBy string field)." }, "chartId": { "type": "string", "description": "Stable id for linked selection / observation / nav sync." }, "emphasis": { "type": "string", "enum": [ "primary", "secondary" ] }, "responsiveWidth": { "type": "boolean" }, "responsiveHeight": { "type": "boolean" }, "color": { "type": "string", "description": "Uniform mark fill (primitive styling)." }, "stroke": { "type": "string" }, "strokeWidth": { "type": "number" }, "opacity": { "type": "number" }, "categoryLabel": { "type": "string" }, "valueLabel": { "type": "string" }, "showCategoryTicks": { "type": "boolean", "description": "Show category labels on the ordinal axis." }, "data": { "type": "array", "description": "Array of data objects" }, "categoryAccessor": { "type": "string", "default": "category", "x-semiotic-runtime-types": [ "string", "function" ] }, "valueAccessor": { "type": "string", "default": "value", "x-semiotic-runtime-types": [ "string", "function" ] }, "orientation": { "type": "string", "enum": [ "vertical", "horizontal" ], "default": "vertical" }, "bins": { "type": "number", "description": "Number of bins for density estimation", "default": 25 }, "curve": { "type": "string", "description": "Interpolation curve for the violin shape", "default": "catmullRom" }, "showIQR": { "type": "boolean", "description": "Show interquartile range lines", "default": true }, "categoryPadding": { "type": "number", "default": 20 } }, "required": [ "data" ] } } }, { "type": "function", "function": { "name": "RidgelinePlot", "description": "Overlapping density distributions for comparing distributions across categories. Each category gets a density curve that can overlap with adjacent rows.", "parameters": { "type": "object", "properties": { "mode": { "type": "string", "enum": [ "primary", "context", "sparkline", "mobile" ], "description": "Display mode controlling default size, decoration, margins, labels, and interaction.", "default": "primary" }, "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object", "description": "Object margin. A side value of \"auto\" or null leaves that side available for auto-reservation." }, "className": { "type": "string" }, "title": { "type": "string", "description": "Visible chart title and the chart's accessible name." }, "description": { "type": "string", "description": "Concise accessible description that overrides the chart's generated aria-label." }, "summary": { "type": "string", "description": "Screen-reader-only summary of the chart's key takeaway; include keyboard interaction guidance when relevant." }, "accessibleTable": { "type": "boolean", "description": "Expose the chart data through Semiotic's screen-reader data table.", "default": true }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "legendInteraction": { "type": "string", "enum": [ "highlight", "isolate", "none" ], "description": "Legend interaction mode: highlight on hover, isolate on click, or none.", "default": "none" }, "legendPosition": { "type": "string", "enum": [ "right", "left", "top", "bottom" ], "description": "Position the legend beside or above/below the plot.", "default": "right" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": "string", "x-semiotic-runtime-types": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array", "object" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "object", "string" ], "description": "Tooltip: true/false, \"multi\", { mode: \"multi\", content? }, a custom function, or { fields, title } config. Multi mode shows every series at the hovered x; custom multi content receives allSeries/xValue.", "x-semiotic-runtime-types": [ "boolean", "function", "object", "string" ] }, "annotations": { "type": "array", "description": "Annotation objects to render on the chart. Each must have a `type` field. Position using your data field names (e.g. { type: \"widget\", month: \"Jan\", revenue: 500 }). Supported types: \"widget\" (arbitrary HTML/React content via foreignObject — v3 replacement for htmlAnnotationRules), \"label\" (callout with connector), \"callout\" (circle + label), \"text\" (plain label), \"y-threshold\" (horizontal reference line), \"x-threshold\" (vertical reference line), \"band\" (shaded y-region), \"enclose\" (circle around points), \"rect-enclose\" (rect around points), \"highlight\" (colored dots on filtered points), \"trend\" (regression line), \"envelope\" (upper/lower bounds), \"anomaly-band\" (mean ± stddev), \"forecast\" (extrapolated trend). Widget annotations accept: content (ReactNode), dx, dy, width, height, anchor (\"fixed\"|\"latest\"|\"sticky\"). Threshold annotations accept: value, label, color, strokeWidth, strokeDasharray. Enclose annotations accept: coordinates (array of data objects), label, color, padding.", "items": { "type": "object", "properties": { "type": { "type": "string", "enum": [ "widget", "label", "callout", "text", "bracket", "y-threshold", "x-threshold", "band", "enclose", "rect-enclose", "highlight", "trend", "envelope", "anomaly-band", "forecast" ], "description": "Annotation type" } }, "required": [ "type" ] } }, "autoPlaceAnnotations": { "type": [ "boolean", "object" ], "description": "Opt-in annotation placement pass. Chooses dx/dy for note-like annotations without manual offsets and avoids note/mark/edge overlaps where possible.", "default": false }, "responsiveRules": { "type": "array", "description": "Semantic responsive transforms applied before chart-mode defaults." }, "mobileSemantics": { "type": "object", "description": "Phone/mobile contract consumed by audits, recipes, adapters, and agents." }, "mobileInteraction": { "type": [ "boolean", "object" ], "description": "Touch-first interaction policy for phone-sized chart slots." }, "maxDevicePixelRatio": { "type": "number", "description": "Maximum canvas backing-store DPR. Defaults to 3 on desktop and 2 on coarse-pointer/small-screen devices; canvases repaint when browser zoom or display density changes." }, "axisExtent": { "type": "string", "enum": [ "nice", "exact" ], "description": "Tick endpoint mode. \"nice\" rounds endpoints to readable values; \"exact\" pins the first and last tick to the actual data min and max with equidistant intermediates. Affects XY x/y axes and ordinal value axis only.", "default": "nice" }, "animate": { "type": [ "boolean", "object" ], "description": "Enable mark transitions (boolean or {duration?, easing?, intro?})." }, "loading": { "type": "boolean", "description": "Show loading skeleton / loadingContent." }, "hoverHighlight": { "type": "boolean", "description": "Dim non-hovered series/categories (requires colorBy string field)." }, "chartId": { "type": "string", "description": "Stable id for linked selection / observation / nav sync." }, "emphasis": { "type": "string", "enum": [ "primary", "secondary" ] }, "responsiveWidth": { "type": "boolean" }, "responsiveHeight": { "type": "boolean" }, "color": { "type": "string", "description": "Uniform mark fill (primitive styling)." }, "stroke": { "type": "string" }, "strokeWidth": { "type": "number" }, "opacity": { "type": "number" }, "categoryLabel": { "type": "string" }, "valueLabel": { "type": "string" }, "showCategoryTicks": { "type": "boolean", "description": "Show category labels on the ordinal axis." }, "data": { "type": "array", "description": "Array of data objects" }, "categoryAccessor": { "type": "string", "description": "Key for category grouping", "x-semiotic-runtime-types": [ "string", "function" ] }, "valueAccessor": { "type": "string", "description": "Key for numeric values to build distributions from", "x-semiotic-runtime-types": [ "string", "function" ] }, "bins": { "type": "number", "description": "Number of bins for density estimation" }, "amplitude": { "type": "number", "description": "Unitless multiplier of row height (>1 creates overlap)", "default": 1.5 } }, "required": [ "data" ] } } }, { "type": "function", "function": { "name": "DotPlot", "description": "Cleveland-style dot plot for comparing values across categories. Sorted by default.", "parameters": { "type": "object", "properties": { "mode": { "type": "string", "enum": [ "primary", "context", "sparkline", "mobile" ], "description": "Display mode controlling default size, decoration, margins, labels, and interaction.", "default": "primary" }, "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object", "description": "Object margin. A side value of \"auto\" or null leaves that side available for auto-reservation." }, "className": { "type": "string" }, "title": { "type": "string", "description": "Visible chart title and the chart's accessible name." }, "description": { "type": "string", "description": "Concise accessible description that overrides the chart's generated aria-label." }, "summary": { "type": "string", "description": "Screen-reader-only summary of the chart's key takeaway; include keyboard interaction guidance when relevant." }, "accessibleTable": { "type": "boolean", "description": "Expose the chart data through Semiotic's screen-reader data table.", "default": true }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "legendInteraction": { "type": "string", "enum": [ "highlight", "isolate", "none" ], "description": "Legend interaction mode: highlight on hover, isolate on click, or none.", "default": "none" }, "legendPosition": { "type": "string", "enum": [ "right", "left", "top", "bottom" ], "description": "Position the legend beside or above/below the plot.", "default": "right" }, "showGrid": { "type": "boolean", "default": true }, "colorBy": { "type": "string", "x-semiotic-runtime-types": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array", "object" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "object", "string" ], "description": "Tooltip: true/false, \"multi\", { mode: \"multi\", content? }, a custom function, or { fields, title } config. Multi mode shows every series at the hovered x; custom multi content receives allSeries/xValue.", "x-semiotic-runtime-types": [ "boolean", "function", "object", "string" ] }, "annotations": { "type": "array", "description": "Annotation objects to render on the chart. Each must have a `type` field. Position using your data field names (e.g. { type: \"widget\", month: \"Jan\", revenue: 500 }). Supported types: \"widget\" (arbitrary HTML/React content via foreignObject — v3 replacement for htmlAnnotationRules), \"label\" (callout with connector), \"callout\" (circle + label), \"text\" (plain label), \"y-threshold\" (horizontal reference line), \"x-threshold\" (vertical reference line), \"band\" (shaded y-region), \"enclose\" (circle around points), \"rect-enclose\" (rect around points), \"highlight\" (colored dots on filtered points), \"trend\" (regression line), \"envelope\" (upper/lower bounds), \"anomaly-band\" (mean ± stddev), \"forecast\" (extrapolated trend). Widget annotations accept: content (ReactNode), dx, dy, width, height, anchor (\"fixed\"|\"latest\"|\"sticky\"). Threshold annotations accept: value, label, color, strokeWidth, strokeDasharray. Enclose annotations accept: coordinates (array of data objects), label, color, padding.", "items": { "type": "object", "properties": { "type": { "type": "string", "enum": [ "widget", "label", "callout", "text", "bracket", "y-threshold", "x-threshold", "band", "enclose", "rect-enclose", "highlight", "trend", "envelope", "anomaly-band", "forecast" ], "description": "Annotation type" } }, "required": [ "type" ] } }, "autoPlaceAnnotations": { "type": [ "boolean", "object" ], "description": "Opt-in annotation placement pass. Chooses dx/dy for note-like annotations without manual offsets and avoids note/mark/edge overlaps where possible.", "default": false }, "responsiveRules": { "type": "array", "description": "Semantic responsive transforms applied before chart-mode defaults." }, "mobileSemantics": { "type": "object", "description": "Phone/mobile contract consumed by audits, recipes, adapters, and agents." }, "mobileInteraction": { "type": [ "boolean", "object" ], "description": "Touch-first interaction policy for phone-sized chart slots." }, "maxDevicePixelRatio": { "type": "number", "description": "Maximum canvas backing-store DPR. Defaults to 3 on desktop and 2 on coarse-pointer/small-screen devices; canvases repaint when browser zoom or display density changes." }, "axisExtent": { "type": "string", "enum": [ "nice", "exact" ], "description": "Tick endpoint mode. \"nice\" rounds endpoints to readable values; \"exact\" pins the first and last tick to the actual data min and max with equidistant intermediates. Affects XY x/y axes and ordinal value axis only.", "default": "nice" }, "animate": { "type": [ "boolean", "object" ], "description": "Enable mark transitions (boolean or {duration?, easing?, intro?})." }, "loading": { "type": "boolean", "description": "Show loading skeleton / loadingContent." }, "hoverHighlight": { "type": "boolean", "description": "Dim non-hovered series/categories (requires colorBy string field)." }, "chartId": { "type": "string", "description": "Stable id for linked selection / observation / nav sync." }, "emphasis": { "type": "string", "enum": [ "primary", "secondary" ] }, "responsiveWidth": { "type": "boolean" }, "responsiveHeight": { "type": "boolean" }, "color": { "type": "string", "description": "Uniform mark fill (primitive styling)." }, "stroke": { "type": "string" }, "strokeWidth": { "type": "number" }, "opacity": { "type": "number" }, "categoryLabel": { "type": "string" }, "valueLabel": { "type": "string" }, "showCategoryTicks": { "type": "boolean", "description": "Show category labels on the ordinal axis." }, "data": { "type": "array", "description": "Array of data objects" }, "categoryAccessor": { "type": "string", "default": "category", "x-semiotic-runtime-types": [ "string", "function" ] }, "valueAccessor": { "type": "string", "default": "value", "x-semiotic-runtime-types": [ "string", "function" ] }, "orientation": { "type": "string", "enum": [ "vertical", "horizontal" ], "default": "horizontal" }, "sort": { "type": [ "boolean", "string" ], "description": "Sort dots: true, false, 'asc', 'desc'", "default": true, "x-semiotic-runtime-types": [ "boolean", "string", "function" ] }, "dotRadius": { "type": "number", "default": 5 }, "categoryPadding": { "type": "number", "default": 10 }, "regression": { "type": [ "boolean", "string", "object" ], "description": "Overlay a regression line through the dots. Same shape as Scatterplot's regression prop." } }, "required": [ "data" ] } } }, { "type": "function", "function": { "name": "PieChart", "description": "Proportional slices in a circle for part-to-whole relationships.", "parameters": { "type": "object", "properties": { "mode": { "type": "string", "enum": [ "primary", "context", "sparkline", "mobile" ], "description": "Display mode controlling default size, decoration, margins, labels, and interaction.", "default": "primary" }, "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object", "description": "Object margin. A side value of \"auto\" or null leaves that side available for auto-reservation." }, "className": { "type": "string" }, "title": { "type": "string", "description": "Visible chart title and the chart's accessible name." }, "description": { "type": "string", "description": "Concise accessible description that overrides the chart's generated aria-label." }, "summary": { "type": "string", "description": "Screen-reader-only summary of the chart's key takeaway; include keyboard interaction guidance when relevant." }, "accessibleTable": { "type": "boolean", "description": "Expose the chart data through Semiotic's screen-reader data table.", "default": true }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "legendInteraction": { "type": "string", "enum": [ "highlight", "isolate", "none" ], "description": "Legend interaction mode: highlight on hover, isolate on click, or none.", "default": "none" }, "legendPosition": { "type": "string", "enum": [ "right", "left", "top", "bottom" ], "description": "Position the legend beside or above/below the plot.", "default": "right" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": "string", "x-semiotic-runtime-types": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array", "object" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "object", "string" ], "description": "Tooltip: true/false, \"multi\", { mode: \"multi\", content? }, a custom function, or { fields, title } config. Multi mode shows every series at the hovered x; custom multi content receives allSeries/xValue.", "x-semiotic-runtime-types": [ "boolean", "function", "object", "string" ] }, "annotations": { "type": "array", "description": "Annotation objects to render on the chart. Each must have a `type` field. Position using your data field names (e.g. { type: \"widget\", month: \"Jan\", revenue: 500 }). Supported types: \"widget\" (arbitrary HTML/React content via foreignObject — v3 replacement for htmlAnnotationRules), \"label\" (callout with connector), \"callout\" (circle + label), \"text\" (plain label), \"y-threshold\" (horizontal reference line), \"x-threshold\" (vertical reference line), \"band\" (shaded y-region), \"enclose\" (circle around points), \"rect-enclose\" (rect around points), \"highlight\" (colored dots on filtered points), \"trend\" (regression line), \"envelope\" (upper/lower bounds), \"anomaly-band\" (mean ± stddev), \"forecast\" (extrapolated trend). Widget annotations accept: content (ReactNode), dx, dy, width, height, anchor (\"fixed\"|\"latest\"|\"sticky\"). Threshold annotations accept: value, label, color, strokeWidth, strokeDasharray. Enclose annotations accept: coordinates (array of data objects), label, color, padding.", "items": { "type": "object", "properties": { "type": { "type": "string", "enum": [ "widget", "label", "callout", "text", "bracket", "y-threshold", "x-threshold", "band", "enclose", "rect-enclose", "highlight", "trend", "envelope", "anomaly-band", "forecast" ], "description": "Annotation type" } }, "required": [ "type" ] } }, "autoPlaceAnnotations": { "type": [ "boolean", "object" ], "description": "Opt-in annotation placement pass. Chooses dx/dy for note-like annotations without manual offsets and avoids note/mark/edge overlaps where possible.", "default": false }, "responsiveRules": { "type": "array", "description": "Semantic responsive transforms applied before chart-mode defaults." }, "mobileSemantics": { "type": "object", "description": "Phone/mobile contract consumed by audits, recipes, adapters, and agents." }, "mobileInteraction": { "type": [ "boolean", "object" ], "description": "Touch-first interaction policy for phone-sized chart slots." }, "maxDevicePixelRatio": { "type": "number", "description": "Maximum canvas backing-store DPR. Defaults to 3 on desktop and 2 on coarse-pointer/small-screen devices; canvases repaint when browser zoom or display density changes." }, "axisExtent": { "type": "string", "enum": [ "nice", "exact" ], "description": "Tick endpoint mode. \"nice\" rounds endpoints to readable values; \"exact\" pins the first and last tick to the actual data min and max with equidistant intermediates. Affects XY x/y axes and ordinal value axis only.", "default": "nice" }, "animate": { "type": [ "boolean", "object" ], "description": "Enable mark transitions (boolean or {duration?, easing?, intro?})." }, "loading": { "type": "boolean", "description": "Show loading skeleton / loadingContent." }, "hoverHighlight": { "type": "boolean", "description": "Dim non-hovered series/categories (requires colorBy string field)." }, "chartId": { "type": "string", "description": "Stable id for linked selection / observation / nav sync." }, "emphasis": { "type": "string", "enum": [ "primary", "secondary" ] }, "responsiveWidth": { "type": "boolean" }, "responsiveHeight": { "type": "boolean" }, "color": { "type": "string", "description": "Uniform mark fill (primitive styling)." }, "stroke": { "type": "string" }, "strokeWidth": { "type": "number" }, "opacity": { "type": "number" }, "data": { "type": "array", "description": "Array of data objects" }, "categoryAccessor": { "type": "string", "default": "category", "x-semiotic-runtime-types": [ "string", "function" ] }, "valueAccessor": { "type": "string", "default": "value", "x-semiotic-runtime-types": [ "string", "function" ] }, "startAngle": { "type": "number", "description": "Starting angle in radians", "default": 0 } }, "required": [ "data" ] } } }, { "type": "function", "function": { "name": "DonutChart", "description": "Pie chart with a hole in the center. Supports center content like summary statistics.", "parameters": { "type": "object", "properties": { "mode": { "type": "string", "enum": [ "primary", "context", "sparkline", "mobile" ], "description": "Display mode controlling default size, decoration, margins, labels, and interaction.", "default": "primary" }, "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object", "description": "Object margin. A side value of \"auto\" or null leaves that side available for auto-reservation." }, "className": { "type": "string" }, "title": { "type": "string", "description": "Visible chart title and the chart's accessible name." }, "description": { "type": "string", "description": "Concise accessible description that overrides the chart's generated aria-label." }, "summary": { "type": "string", "description": "Screen-reader-only summary of the chart's key takeaway; include keyboard interaction guidance when relevant." }, "accessibleTable": { "type": "boolean", "description": "Expose the chart data through Semiotic's screen-reader data table.", "default": true }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "legendInteraction": { "type": "string", "enum": [ "highlight", "isolate", "none" ], "description": "Legend interaction mode: highlight on hover, isolate on click, or none.", "default": "none" }, "legendPosition": { "type": "string", "enum": [ "right", "left", "top", "bottom" ], "description": "Position the legend beside or above/below the plot.", "default": "right" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": "string", "x-semiotic-runtime-types": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array", "object" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "object", "string" ], "description": "Tooltip: true/false, \"multi\", { mode: \"multi\", content? }, a custom function, or { fields, title } config. Multi mode shows every series at the hovered x; custom multi content receives allSeries/xValue.", "x-semiotic-runtime-types": [ "boolean", "function", "object", "string" ] }, "annotations": { "type": "array", "description": "Annotation objects to render on the chart. Each must have a `type` field. Position using your data field names (e.g. { type: \"widget\", month: \"Jan\", revenue: 500 }). Supported types: \"widget\" (arbitrary HTML/React content via foreignObject — v3 replacement for htmlAnnotationRules), \"label\" (callout with connector), \"callout\" (circle + label), \"text\" (plain label), \"y-threshold\" (horizontal reference line), \"x-threshold\" (vertical reference line), \"band\" (shaded y-region), \"enclose\" (circle around points), \"rect-enclose\" (rect around points), \"highlight\" (colored dots on filtered points), \"trend\" (regression line), \"envelope\" (upper/lower bounds), \"anomaly-band\" (mean ± stddev), \"forecast\" (extrapolated trend). Widget annotations accept: content (ReactNode), dx, dy, width, height, anchor (\"fixed\"|\"latest\"|\"sticky\"). Threshold annotations accept: value, label, color, strokeWidth, strokeDasharray. Enclose annotations accept: coordinates (array of data objects), label, color, padding.", "items": { "type": "object", "properties": { "type": { "type": "string", "enum": [ "widget", "label", "callout", "text", "bracket", "y-threshold", "x-threshold", "band", "enclose", "rect-enclose", "highlight", "trend", "envelope", "anomaly-band", "forecast" ], "description": "Annotation type" } }, "required": [ "type" ] } }, "autoPlaceAnnotations": { "type": [ "boolean", "object" ], "description": "Opt-in annotation placement pass. Chooses dx/dy for note-like annotations without manual offsets and avoids note/mark/edge overlaps where possible.", "default": false }, "responsiveRules": { "type": "array", "description": "Semantic responsive transforms applied before chart-mode defaults." }, "mobileSemantics": { "type": "object", "description": "Phone/mobile contract consumed by audits, recipes, adapters, and agents." }, "mobileInteraction": { "type": [ "boolean", "object" ], "description": "Touch-first interaction policy for phone-sized chart slots." }, "maxDevicePixelRatio": { "type": "number", "description": "Maximum canvas backing-store DPR. Defaults to 3 on desktop and 2 on coarse-pointer/small-screen devices; canvases repaint when browser zoom or display density changes." }, "axisExtent": { "type": "string", "enum": [ "nice", "exact" ], "description": "Tick endpoint mode. \"nice\" rounds endpoints to readable values; \"exact\" pins the first and last tick to the actual data min and max with equidistant intermediates. Affects XY x/y axes and ordinal value axis only.", "default": "nice" }, "animate": { "type": [ "boolean", "object" ], "description": "Enable mark transitions (boolean or {duration?, easing?, intro?})." }, "loading": { "type": "boolean", "description": "Show loading skeleton / loadingContent." }, "hoverHighlight": { "type": "boolean", "description": "Dim non-hovered series/categories (requires colorBy string field)." }, "chartId": { "type": "string", "description": "Stable id for linked selection / observation / nav sync." }, "emphasis": { "type": "string", "enum": [ "primary", "secondary" ] }, "responsiveWidth": { "type": "boolean" }, "responsiveHeight": { "type": "boolean" }, "color": { "type": "string", "description": "Uniform mark fill (primitive styling)." }, "stroke": { "type": "string" }, "strokeWidth": { "type": "number" }, "opacity": { "type": "number" }, "data": { "type": "array", "description": "Array of data objects" }, "categoryAccessor": { "type": "string", "default": "category", "x-semiotic-runtime-types": [ "string", "function" ] }, "valueAccessor": { "type": "string", "default": "value", "x-semiotic-runtime-types": [ "string", "function" ] }, "innerRadius": { "type": "number", "description": "Inner radius of the donut hole in pixels", "default": 60 }, "centerContent": { "type": [ "object", "string", "number" ], "description": "React node to render in the center of the donut (accepts string key or JSX)" }, "startAngle": { "type": "number", "default": 0 } }, "required": [ "data" ] } } }, { "type": "function", "function": { "name": "GaugeChart", "description": "Single-value gauge with threshold zones, needle indicator, and configurable sweep angle. Built on StreamOrdinalFrame radial projection.", "parameters": { "type": "object", "properties": { "mode": { "type": "string", "enum": [ "primary", "context", "sparkline", "mobile" ], "description": "Display mode controlling default size, decoration, margins, labels, and interaction.", "default": "primary" }, "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object", "description": "Object margin. A side value of \"auto\" or null leaves that side available for auto-reservation." }, "className": { "type": "string" }, "title": { "type": "string", "description": "Visible chart title and the chart's accessible name." }, "description": { "type": "string", "description": "Concise accessible description that overrides the chart's generated aria-label." }, "summary": { "type": "string", "description": "Screen-reader-only summary of the chart's key takeaway; include keyboard interaction guidance when relevant." }, "accessibleTable": { "type": "boolean", "description": "Expose the chart data through Semiotic's screen-reader data table.", "default": true }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "legendInteraction": { "type": "string", "enum": [ "highlight", "isolate", "none" ], "description": "Legend interaction mode: highlight on hover, isolate on click, or none.", "default": "none" }, "legendPosition": { "type": "string", "enum": [ "right", "left", "top", "bottom" ], "description": "Position the legend beside or above/below the plot.", "default": "right" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": "string", "x-semiotic-runtime-types": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array", "object" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "object", "string" ], "description": "Tooltip: true/false, \"multi\", { mode: \"multi\", content? }, a custom function, or { fields, title } config. Multi mode shows every series at the hovered x; custom multi content receives allSeries/xValue.", "x-semiotic-runtime-types": [ "boolean", "function", "object", "string" ] }, "annotations": { "type": "array", "description": "Annotation objects to render on the chart. Each must have a `type` field. Position using your data field names (e.g. { type: \"widget\", month: \"Jan\", revenue: 500 }). Supported types: \"widget\" (arbitrary HTML/React content via foreignObject — v3 replacement for htmlAnnotationRules), \"label\" (callout with connector), \"callout\" (circle + label), \"text\" (plain label), \"y-threshold\" (horizontal reference line), \"x-threshold\" (vertical reference line), \"band\" (shaded y-region), \"enclose\" (circle around points), \"rect-enclose\" (rect around points), \"highlight\" (colored dots on filtered points), \"trend\" (regression line), \"envelope\" (upper/lower bounds), \"anomaly-band\" (mean ± stddev), \"forecast\" (extrapolated trend). Widget annotations accept: content (ReactNode), dx, dy, width, height, anchor (\"fixed\"|\"latest\"|\"sticky\"). Threshold annotations accept: value, label, color, strokeWidth, strokeDasharray. Enclose annotations accept: coordinates (array of data objects), label, color, padding.", "items": { "type": "object", "properties": { "type": { "type": "string", "enum": [ "widget", "label", "callout", "text", "bracket", "y-threshold", "x-threshold", "band", "enclose", "rect-enclose", "highlight", "trend", "envelope", "anomaly-band", "forecast" ], "description": "Annotation type" } }, "required": [ "type" ] } }, "autoPlaceAnnotations": { "type": [ "boolean", "object" ], "description": "Opt-in annotation placement pass. Chooses dx/dy for note-like annotations without manual offsets and avoids note/mark/edge overlaps where possible.", "default": false }, "responsiveRules": { "type": "array", "description": "Semantic responsive transforms applied before chart-mode defaults." }, "mobileSemantics": { "type": "object", "description": "Phone/mobile contract consumed by audits, recipes, adapters, and agents." }, "mobileInteraction": { "type": [ "boolean", "object" ], "description": "Touch-first interaction policy for phone-sized chart slots." }, "maxDevicePixelRatio": { "type": "number", "description": "Maximum canvas backing-store DPR. Defaults to 3 on desktop and 2 on coarse-pointer/small-screen devices; canvases repaint when browser zoom or display density changes." }, "axisExtent": { "type": "string", "enum": [ "nice", "exact" ], "description": "Tick endpoint mode. \"nice\" rounds endpoints to readable values; \"exact\" pins the first and last tick to the actual data min and max with equidistant intermediates. Affects XY x/y axes and ordinal value axis only.", "default": "nice" }, "animate": { "type": [ "boolean", "object" ], "description": "Enable mark transitions (boolean or {duration?, easing?, intro?})." }, "loading": { "type": "boolean", "description": "Show loading skeleton / loadingContent." }, "hoverHighlight": { "type": "boolean", "description": "Dim non-hovered series/categories (requires colorBy string field)." }, "chartId": { "type": "string", "description": "Stable id for linked selection / observation / nav sync." }, "emphasis": { "type": "string", "enum": [ "primary", "secondary" ] }, "responsiveWidth": { "type": "boolean" }, "responsiveHeight": { "type": "boolean" }, "color": { "type": "string", "description": "Fallback fill color used when no thresholds are defined" }, "stroke": { "type": "string" }, "strokeWidth": { "type": "number" }, "opacity": { "type": "number" }, "value": { "type": "number", "description": "Current gauge value" }, "min": { "type": "number", "default": 0 }, "max": { "type": "number", "default": 100 }, "thresholds": { "type": "array", "description": "Array of { value, color, label? } defining threshold zones. This is GaugeChart's wire format; BigNumber instead uses { at, level, color?, label? }. Last value should equal max.", "minItems": 1, "items": { "type": "object", "additionalProperties": false, "required": [ "value", "color" ], "properties": { "value": { "type": "number" }, "color": { "type": "string" }, "label": { "type": "string" } } } }, "gradientFill": { "type": "object", "description": "Sweep gradient: { stops: [{ offset: 0-1, color?, opacity? }] }. Offset 0 is the sweep start and offset 1 is the sweep end." }, "arcWidth": { "type": "number", "description": "Arc thickness as fraction of radius (0-1)", "default": 0.3 }, "cornerRadius": { "type": "number", "description": "Pixel radius for rounded segment ends. Same semantics as DonutChart's cornerRadius. Omit for sharp corners." }, "sweep": { "type": "number", "description": "Arc sweep angle in degrees (gap centered at bottom)", "default": 240 }, "fillZones": { "type": "boolean", "description": "When true, the arc fills up to the current value; when false, the full arc is shown.", "default": true }, "showNeedle": { "type": "boolean", "default": true }, "needleColor": { "type": "string" }, "showScaleLabels": { "type": "boolean", "default": true } }, "required": [ "value" ] } } }, { "type": "function", "function": { "name": "ForceDirectedGraph", "description": "Physics-based node-link diagram. Use for relationships, social networks, knowledge graphs.", "parameters": { "type": "object", "properties": { "mode": { "type": "string", "enum": [ "primary", "context", "sparkline", "mobile" ], "description": "Display mode controlling default size, decoration, margins, labels, and interaction.", "default": "primary" }, "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object", "description": "Object margin. A side value of \"auto\" or null leaves that side available for auto-reservation." }, "className": { "type": "string" }, "title": { "type": "string", "description": "Visible chart title and the chart's accessible name." }, "description": { "type": "string", "description": "Concise accessible description that overrides the chart's generated aria-label." }, "summary": { "type": "string", "description": "Screen-reader-only summary of the chart's key takeaway; include keyboard interaction guidance when relevant." }, "accessibleTable": { "type": "boolean", "description": "Expose the chart data through Semiotic's screen-reader data table.", "default": true }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "legendInteraction": { "type": "string", "enum": [ "highlight", "isolate", "none" ], "description": "Legend interaction mode: highlight on hover, isolate on click, or none.", "default": "none" }, "legendPosition": { "type": "string", "enum": [ "right", "left", "top", "bottom" ], "description": "Position the legend beside or above/below the plot.", "default": "right" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": "string", "x-semiotic-runtime-types": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array", "object" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "object", "string" ], "description": "Tooltip: true/false, \"multi\", { mode: \"multi\", content? }, a custom function, or { fields, title } config. Multi mode shows every series at the hovered x; custom multi content receives allSeries/xValue.", "x-semiotic-runtime-types": [ "boolean", "function", "object", "string" ] }, "annotations": { "type": "array", "description": "Annotation objects to render on the chart. Each must have a `type` field. Position using your data field names (e.g. { type: \"widget\", month: \"Jan\", revenue: 500 }). Supported types: \"widget\" (arbitrary HTML/React content via foreignObject — v3 replacement for htmlAnnotationRules), \"label\" (callout with connector), \"callout\" (circle + label), \"text\" (plain label), \"y-threshold\" (horizontal reference line), \"x-threshold\" (vertical reference line), \"band\" (shaded y-region), \"enclose\" (circle around points), \"rect-enclose\" (rect around points), \"highlight\" (colored dots on filtered points), \"trend\" (regression line), \"envelope\" (upper/lower bounds), \"anomaly-band\" (mean ± stddev), \"forecast\" (extrapolated trend). Widget annotations accept: content (ReactNode), dx, dy, width, height, anchor (\"fixed\"|\"latest\"|\"sticky\"). Threshold annotations accept: value, label, color, strokeWidth, strokeDasharray. Enclose annotations accept: coordinates (array of data objects), label, color, padding.", "items": { "type": "object", "properties": { "type": { "type": "string", "enum": [ "widget", "label", "callout", "text", "bracket", "y-threshold", "x-threshold", "band", "enclose", "rect-enclose", "highlight", "trend", "envelope", "anomaly-band", "forecast" ], "description": "Annotation type" } }, "required": [ "type" ] } }, "autoPlaceAnnotations": { "type": [ "boolean", "object" ], "description": "Opt-in annotation placement pass. Chooses dx/dy for note-like annotations without manual offsets and avoids note/mark/edge overlaps where possible.", "default": false }, "responsiveRules": { "type": "array", "description": "Semantic responsive transforms applied before chart-mode defaults." }, "mobileSemantics": { "type": "object", "description": "Phone/mobile contract consumed by audits, recipes, adapters, and agents." }, "mobileInteraction": { "type": [ "boolean", "object" ], "description": "Touch-first interaction policy for phone-sized chart slots." }, "maxDevicePixelRatio": { "type": "number", "description": "Maximum canvas backing-store DPR. Defaults to 3 on desktop and 2 on coarse-pointer/small-screen devices; canvases repaint when browser zoom or display density changes." }, "axisExtent": { "type": "string", "enum": [ "nice", "exact" ], "description": "Tick endpoint mode. \"nice\" rounds endpoints to readable values; \"exact\" pins the first and last tick to the actual data min and max with equidistant intermediates. Affects XY x/y axes and ordinal value axis only.", "default": "nice" }, "animate": { "type": [ "boolean", "object" ], "description": "Enable mark transitions (boolean or {duration?, easing?, intro?})." }, "loading": { "type": "boolean", "description": "Show loading skeleton / loadingContent." }, "hoverHighlight": { "type": "boolean", "description": "Dim non-hovered series/categories (requires colorBy string field)." }, "chartId": { "type": "string", "description": "Stable id for linked selection / observation / nav sync." }, "emphasis": { "type": "string", "enum": [ "primary", "secondary" ] }, "responsiveWidth": { "type": "boolean" }, "responsiveHeight": { "type": "boolean" }, "color": { "type": "string", "description": "Uniform mark fill (primitive styling)." }, "stroke": { "type": "string" }, "strokeWidth": { "type": "number" }, "opacity": { "type": "number" }, "nodes": { "type": "array", "description": "Array of node objects" }, "edges": { "type": "array", "description": "Array of edge objects with source and target" }, "nodeIdAccessor": { "type": "string", "description": "Key for node unique identifier", "default": "id", "x-semiotic-runtime-types": [ "string", "function" ] }, "sourceAccessor": { "type": "string", "description": "Key for edge source node ID", "default": "source", "x-semiotic-runtime-types": [ "string", "function" ] }, "targetAccessor": { "type": "string", "description": "Key for edge target node ID", "default": "target", "x-semiotic-runtime-types": [ "string", "function" ] }, "nodeLabel": { "type": "string", "description": "Key or accessor for node labels", "x-semiotic-runtime-types": [ "string", "function" ] }, "nodeSize": { "type": [ "number", "string" ], "description": "Fixed node radius or key for variable sizing", "default": 8, "x-semiotic-runtime-types": [ "number", "string", "function" ] }, "nodeSizeRange": { "type": "array", "default": [ 5, 20 ] }, "edgeWidth": { "type": [ "number", "string" ], "description": "Fixed edge width or key for variable width", "default": 1, "x-semiotic-runtime-types": [ "number", "string", "function" ] }, "edgeColor": { "type": "string", "default": "#999" }, "edgeOpacity": { "type": "number", "default": 0.6 }, "nodeStroke": { "type": "string", "description": "Node-only outline color; overrides the generic stroke for nodes." }, "nodeStrokeWidth": { "type": "number", "description": "Node-only outline width; overrides generic strokeWidth for nodes." }, "iterations": { "type": "number", "description": "Force simulation iterations", "default": 300 }, "forceStrength": { "type": "number", "default": 0.1 }, "layoutExecution": { "type": "string", "enum": [ "auto", "worker", "sync" ], "description": "Force layout execution: auto, worker, or sync", "default": "auto" }, "showLabels": { "type": "boolean", "default": false } }, "required": [ "nodes", "edges" ] } } }, { "type": "function", "function": { "name": "SankeyDiagram", "description": "Flow diagram showing weighted connections between nodes. Use for flows, budgets, process mapping.", "parameters": { "type": "object", "properties": { "mode": { "type": "string", "enum": [ "primary", "context", "sparkline", "mobile" ], "description": "Display mode controlling default size, decoration, margins, labels, and interaction.", "default": "primary" }, "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object", "description": "Object margin. A side value of \"auto\" or null leaves that side available for auto-reservation." }, "className": { "type": "string" }, "title": { "type": "string", "description": "Visible chart title and the chart's accessible name." }, "description": { "type": "string", "description": "Concise accessible description that overrides the chart's generated aria-label." }, "summary": { "type": "string", "description": "Screen-reader-only summary of the chart's key takeaway; include keyboard interaction guidance when relevant." }, "accessibleTable": { "type": "boolean", "description": "Expose the chart data through Semiotic's screen-reader data table.", "default": true }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "legendInteraction": { "type": "string", "enum": [ "highlight", "isolate", "none" ], "description": "Legend interaction mode: highlight on hover, isolate on click, or none.", "default": "none" }, "legendPosition": { "type": "string", "enum": [ "right", "left", "top", "bottom" ], "description": "Position the legend beside or above/below the plot.", "default": "right" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": "string", "x-semiotic-runtime-types": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array", "object" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "object", "string" ], "description": "Tooltip: true/false, \"multi\", { mode: \"multi\", content? }, a custom function, or { fields, title } config. Multi mode shows every series at the hovered x; custom multi content receives allSeries/xValue.", "x-semiotic-runtime-types": [ "boolean", "function", "object", "string" ] }, "annotations": { "type": "array", "description": "Annotation objects to render on the chart. Each must have a `type` field. Position using your data field names (e.g. { type: \"widget\", month: \"Jan\", revenue: 500 }). Supported types: \"widget\" (arbitrary HTML/React content via foreignObject — v3 replacement for htmlAnnotationRules), \"label\" (callout with connector), \"callout\" (circle + label), \"text\" (plain label), \"y-threshold\" (horizontal reference line), \"x-threshold\" (vertical reference line), \"band\" (shaded y-region), \"enclose\" (circle around points), \"rect-enclose\" (rect around points), \"highlight\" (colored dots on filtered points), \"trend\" (regression line), \"envelope\" (upper/lower bounds), \"anomaly-band\" (mean ± stddev), \"forecast\" (extrapolated trend). Widget annotations accept: content (ReactNode), dx, dy, width, height, anchor (\"fixed\"|\"latest\"|\"sticky\"). Threshold annotations accept: value, label, color, strokeWidth, strokeDasharray. Enclose annotations accept: coordinates (array of data objects), label, color, padding.", "items": { "type": "object", "properties": { "type": { "type": "string", "enum": [ "widget", "label", "callout", "text", "bracket", "y-threshold", "x-threshold", "band", "enclose", "rect-enclose", "highlight", "trend", "envelope", "anomaly-band", "forecast" ], "description": "Annotation type" } }, "required": [ "type" ] } }, "autoPlaceAnnotations": { "type": [ "boolean", "object" ], "description": "Opt-in annotation placement pass. Chooses dx/dy for note-like annotations without manual offsets and avoids note/mark/edge overlaps where possible.", "default": false }, "responsiveRules": { "type": "array", "description": "Semantic responsive transforms applied before chart-mode defaults." }, "mobileSemantics": { "type": "object", "description": "Phone/mobile contract consumed by audits, recipes, adapters, and agents." }, "mobileInteraction": { "type": [ "boolean", "object" ], "description": "Touch-first interaction policy for phone-sized chart slots." }, "maxDevicePixelRatio": { "type": "number", "description": "Maximum canvas backing-store DPR. Defaults to 3 on desktop and 2 on coarse-pointer/small-screen devices; canvases repaint when browser zoom or display density changes." }, "axisExtent": { "type": "string", "enum": [ "nice", "exact" ], "description": "Tick endpoint mode. \"nice\" rounds endpoints to readable values; \"exact\" pins the first and last tick to the actual data min and max with equidistant intermediates. Affects XY x/y axes and ordinal value axis only.", "default": "nice" }, "animate": { "type": [ "boolean", "object" ], "description": "Enable mark transitions (boolean or {duration?, easing?, intro?})." }, "loading": { "type": "boolean", "description": "Show loading skeleton / loadingContent." }, "hoverHighlight": { "type": "boolean", "description": "Dim non-hovered series/categories (requires colorBy string field)." }, "chartId": { "type": "string", "description": "Stable id for linked selection / observation / nav sync." }, "emphasis": { "type": "string", "enum": [ "primary", "secondary" ] }, "responsiveWidth": { "type": "boolean" }, "responsiveHeight": { "type": "boolean" }, "color": { "type": "string", "description": "Uniform mark fill (primitive styling)." }, "stroke": { "type": "string" }, "strokeWidth": { "type": "number" }, "opacity": { "type": "number" }, "edges": { "type": "array", "description": "Array of edge objects with source, target, and value" }, "nodes": { "type": "array", "description": "Optional array of node objects (auto-derived from edges if omitted)" }, "sourceAccessor": { "type": "string", "default": "source", "x-semiotic-runtime-types": [ "string", "function" ] }, "targetAccessor": { "type": "string", "default": "target", "x-semiotic-runtime-types": [ "string", "function" ] }, "valueAccessor": { "type": "string", "description": "Key for edge flow value", "default": "value", "x-semiotic-runtime-types": [ "string", "function" ] }, "nodeIdAccessor": { "type": "string", "default": "id", "x-semiotic-runtime-types": [ "string", "function" ] }, "edgeColorBy": { "type": "string", "enum": [ "source", "target", "gradient" ], "description": "How to color edges", "default": "source", "x-semiotic-runtime-types": [ "string", "function" ] }, "orientation": { "type": "string", "enum": [ "vertical", "horizontal" ], "default": "horizontal" }, "nodeAlign": { "type": "string", "enum": [ "justify", "left", "right", "center" ], "default": "justify" }, "nodePaddingRatio": { "type": "number", "default": 0.05 }, "nodeWidth": { "type": "number", "default": 15 }, "nodeLabel": { "type": "string", "description": "Key for node labels", "x-semiotic-runtime-types": [ "string", "function" ] }, "showLabels": { "type": "boolean", "default": true }, "edgeOpacity": { "type": "number", "default": 0.5 } }, "required": [ "edges" ] } } }, { "type": "function", "function": { "name": "ChordDiagram", "description": "Circular diagram showing inter-relationships and flow volumes between groups.", "parameters": { "type": "object", "properties": { "mode": { "type": "string", "enum": [ "primary", "context", "sparkline", "mobile" ], "description": "Display mode controlling default size, decoration, margins, labels, and interaction.", "default": "primary" }, "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object", "description": "Object margin. A side value of \"auto\" or null leaves that side available for auto-reservation." }, "className": { "type": "string" }, "title": { "type": "string", "description": "Visible chart title and the chart's accessible name." }, "description": { "type": "string", "description": "Concise accessible description that overrides the chart's generated aria-label." }, "summary": { "type": "string", "description": "Screen-reader-only summary of the chart's key takeaway; include keyboard interaction guidance when relevant." }, "accessibleTable": { "type": "boolean", "description": "Expose the chart data through Semiotic's screen-reader data table.", "default": true }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "legendInteraction": { "type": "string", "enum": [ "highlight", "isolate", "none" ], "description": "Legend interaction mode: highlight on hover, isolate on click, or none.", "default": "none" }, "legendPosition": { "type": "string", "enum": [ "right", "left", "top", "bottom" ], "description": "Position the legend beside or above/below the plot.", "default": "right" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": "string", "x-semiotic-runtime-types": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array", "object" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "object", "string" ], "description": "Tooltip: true/false, \"multi\", { mode: \"multi\", content? }, a custom function, or { fields, title } config. Multi mode shows every series at the hovered x; custom multi content receives allSeries/xValue.", "x-semiotic-runtime-types": [ "boolean", "function", "object", "string" ] }, "annotations": { "type": "array", "description": "Annotation objects to render on the chart. Each must have a `type` field. Position using your data field names (e.g. { type: \"widget\", month: \"Jan\", revenue: 500 }). Supported types: \"widget\" (arbitrary HTML/React content via foreignObject — v3 replacement for htmlAnnotationRules), \"label\" (callout with connector), \"callout\" (circle + label), \"text\" (plain label), \"y-threshold\" (horizontal reference line), \"x-threshold\" (vertical reference line), \"band\" (shaded y-region), \"enclose\" (circle around points), \"rect-enclose\" (rect around points), \"highlight\" (colored dots on filtered points), \"trend\" (regression line), \"envelope\" (upper/lower bounds), \"anomaly-band\" (mean ± stddev), \"forecast\" (extrapolated trend). Widget annotations accept: content (ReactNode), dx, dy, width, height, anchor (\"fixed\"|\"latest\"|\"sticky\"). Threshold annotations accept: value, label, color, strokeWidth, strokeDasharray. Enclose annotations accept: coordinates (array of data objects), label, color, padding.", "items": { "type": "object", "properties": { "type": { "type": "string", "enum": [ "widget", "label", "callout", "text", "bracket", "y-threshold", "x-threshold", "band", "enclose", "rect-enclose", "highlight", "trend", "envelope", "anomaly-band", "forecast" ], "description": "Annotation type" } }, "required": [ "type" ] } }, "autoPlaceAnnotations": { "type": [ "boolean", "object" ], "description": "Opt-in annotation placement pass. Chooses dx/dy for note-like annotations without manual offsets and avoids note/mark/edge overlaps where possible.", "default": false }, "responsiveRules": { "type": "array", "description": "Semantic responsive transforms applied before chart-mode defaults." }, "mobileSemantics": { "type": "object", "description": "Phone/mobile contract consumed by audits, recipes, adapters, and agents." }, "mobileInteraction": { "type": [ "boolean", "object" ], "description": "Touch-first interaction policy for phone-sized chart slots." }, "maxDevicePixelRatio": { "type": "number", "description": "Maximum canvas backing-store DPR. Defaults to 3 on desktop and 2 on coarse-pointer/small-screen devices; canvases repaint when browser zoom or display density changes." }, "axisExtent": { "type": "string", "enum": [ "nice", "exact" ], "description": "Tick endpoint mode. \"nice\" rounds endpoints to readable values; \"exact\" pins the first and last tick to the actual data min and max with equidistant intermediates. Affects XY x/y axes and ordinal value axis only.", "default": "nice" }, "animate": { "type": [ "boolean", "object" ], "description": "Enable mark transitions (boolean or {duration?, easing?, intro?})." }, "loading": { "type": "boolean", "description": "Show loading skeleton / loadingContent." }, "hoverHighlight": { "type": "boolean", "description": "Dim non-hovered series/categories (requires colorBy string field)." }, "chartId": { "type": "string", "description": "Stable id for linked selection / observation / nav sync." }, "emphasis": { "type": "string", "enum": [ "primary", "secondary" ] }, "responsiveWidth": { "type": "boolean" }, "responsiveHeight": { "type": "boolean" }, "color": { "type": "string", "description": "Uniform mark fill (primitive styling)." }, "stroke": { "type": "string" }, "strokeWidth": { "type": "number" }, "opacity": { "type": "number" }, "edges": { "type": "array", "description": "Array of edge objects with source, target, and value" }, "nodes": { "type": "array", "description": "Optional array of node objects" }, "sourceAccessor": { "type": "string", "default": "source", "x-semiotic-runtime-types": [ "string", "function" ] }, "targetAccessor": { "type": "string", "default": "target", "x-semiotic-runtime-types": [ "string", "function" ] }, "valueAccessor": { "type": "string", "default": "value", "x-semiotic-runtime-types": [ "string", "function" ] }, "nodeIdAccessor": { "type": "string", "default": "id", "x-semiotic-runtime-types": [ "string", "function" ] }, "edgeColorBy": { "type": "string", "enum": [ "source", "target" ], "default": "source", "x-semiotic-runtime-types": [ "string", "function" ] }, "padAngle": { "type": "number", "default": 0.01 }, "groupWidth": { "type": "number", "default": 20 }, "nodeLabel": { "type": "string", "x-semiotic-runtime-types": [ "string", "function" ] }, "showLabels": { "type": "boolean", "default": true }, "edgeOpacity": { "type": "number", "default": 0.5 } }, "required": [ "edges" ] } } }, { "type": "function", "function": { "name": "TreeDiagram", "description": "Hierarchical tree layout. Supports tree, cluster, partition, and radial orientations. Data is a single root node with children.", "parameters": { "type": "object", "properties": { "mode": { "type": "string", "enum": [ "primary", "context", "sparkline", "mobile" ], "description": "Display mode controlling default size, decoration, margins, labels, and interaction.", "default": "primary" }, "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object", "description": "Object margin. A side value of \"auto\" or null leaves that side available for auto-reservation." }, "className": { "type": "string" }, "title": { "type": "string", "description": "Visible chart title and the chart's accessible name." }, "description": { "type": "string", "description": "Concise accessible description that overrides the chart's generated aria-label." }, "summary": { "type": "string", "description": "Screen-reader-only summary of the chart's key takeaway; include keyboard interaction guidance when relevant." }, "accessibleTable": { "type": "boolean", "description": "Expose the chart data through Semiotic's screen-reader data table.", "default": true }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "legendInteraction": { "type": "string", "enum": [ "highlight", "isolate", "none" ], "description": "Legend interaction mode: highlight on hover, isolate on click, or none.", "default": "none" }, "legendPosition": { "type": "string", "enum": [ "right", "left", "top", "bottom" ], "description": "Position the legend beside or above/below the plot.", "default": "right" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": "string", "x-semiotic-runtime-types": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array", "object" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "object", "string" ], "description": "Tooltip: true/false, \"multi\", { mode: \"multi\", content? }, a custom function, or { fields, title } config. Multi mode shows every series at the hovered x; custom multi content receives allSeries/xValue.", "x-semiotic-runtime-types": [ "boolean", "function", "object", "string" ] }, "annotations": { "type": "array", "description": "Annotation objects to render on the chart. Each must have a `type` field. Position using your data field names (e.g. { type: \"widget\", month: \"Jan\", revenue: 500 }). Supported types: \"widget\" (arbitrary HTML/React content via foreignObject — v3 replacement for htmlAnnotationRules), \"label\" (callout with connector), \"callout\" (circle + label), \"text\" (plain label), \"y-threshold\" (horizontal reference line), \"x-threshold\" (vertical reference line), \"band\" (shaded y-region), \"enclose\" (circle around points), \"rect-enclose\" (rect around points), \"highlight\" (colored dots on filtered points), \"trend\" (regression line), \"envelope\" (upper/lower bounds), \"anomaly-band\" (mean ± stddev), \"forecast\" (extrapolated trend). Widget annotations accept: content (ReactNode), dx, dy, width, height, anchor (\"fixed\"|\"latest\"|\"sticky\"). Threshold annotations accept: value, label, color, strokeWidth, strokeDasharray. Enclose annotations accept: coordinates (array of data objects), label, color, padding.", "items": { "type": "object", "properties": { "type": { "type": "string", "enum": [ "widget", "label", "callout", "text", "bracket", "y-threshold", "x-threshold", "band", "enclose", "rect-enclose", "highlight", "trend", "envelope", "anomaly-band", "forecast" ], "description": "Annotation type" } }, "required": [ "type" ] } }, "autoPlaceAnnotations": { "type": [ "boolean", "object" ], "description": "Opt-in annotation placement pass. Chooses dx/dy for note-like annotations without manual offsets and avoids note/mark/edge overlaps where possible.", "default": false }, "responsiveRules": { "type": "array", "description": "Semantic responsive transforms applied before chart-mode defaults." }, "mobileSemantics": { "type": "object", "description": "Phone/mobile contract consumed by audits, recipes, adapters, and agents." }, "mobileInteraction": { "type": [ "boolean", "object" ], "description": "Touch-first interaction policy for phone-sized chart slots." }, "maxDevicePixelRatio": { "type": "number", "description": "Maximum canvas backing-store DPR. Defaults to 3 on desktop and 2 on coarse-pointer/small-screen devices; canvases repaint when browser zoom or display density changes." }, "axisExtent": { "type": "string", "enum": [ "nice", "exact" ], "description": "Tick endpoint mode. \"nice\" rounds endpoints to readable values; \"exact\" pins the first and last tick to the actual data min and max with equidistant intermediates. Affects XY x/y axes and ordinal value axis only.", "default": "nice" }, "animate": { "type": [ "boolean", "object" ], "description": "Enable mark transitions (boolean or {duration?, easing?, intro?})." }, "loading": { "type": "boolean", "description": "Show loading skeleton / loadingContent." }, "hoverHighlight": { "type": "boolean", "description": "Dim non-hovered series/categories (requires colorBy string field)." }, "chartId": { "type": "string", "description": "Stable id for linked selection / observation / nav sync." }, "emphasis": { "type": "string", "enum": [ "primary", "secondary" ] }, "responsiveWidth": { "type": "boolean" }, "responsiveHeight": { "type": "boolean" }, "color": { "type": "string", "description": "Uniform mark fill (primitive styling)." }, "stroke": { "type": "string" }, "strokeWidth": { "type": "number" }, "opacity": { "type": "number" }, "data": { "type": "object", "description": "Root node object with nested children" }, "layout": { "type": "string", "enum": [ "tree", "cluster", "partition", "treemap", "circlepack" ], "default": "tree" }, "orientation": { "type": "string", "enum": [ "vertical", "horizontal", "radial" ], "default": "vertical" }, "childrenAccessor": { "type": "string", "description": "Key for the children array in each node", "default": "children", "x-semiotic-runtime-types": [ "string", "function" ] }, "valueAccessor": { "type": "string", "default": "value", "x-semiotic-runtime-types": [ "string", "function" ] }, "nodeIdAccessor": { "type": "string", "default": "name", "x-semiotic-runtime-types": [ "string", "function" ] }, "colorByDepth": { "type": "boolean", "description": "Color nodes by their depth in the hierarchy", "default": false }, "edgeStyle": { "type": "string", "enum": [ "line", "curve" ], "default": "curve" }, "nodeLabel": { "type": "string", "x-semiotic-runtime-types": [ "string", "function" ] }, "showLabels": { "type": "boolean", "default": true }, "nodeSize": { "type": "number", "default": 5 } }, "required": [ "data" ] } } }, { "type": "function", "function": { "name": "Treemap", "description": "Space-filling rectangular hierarchy visualization. Data is a single root node with nested children.", "parameters": { "type": "object", "properties": { "mode": { "type": "string", "enum": [ "primary", "context", "sparkline", "mobile" ], "description": "Display mode controlling default size, decoration, margins, labels, and interaction.", "default": "primary" }, "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object", "description": "Object margin. A side value of \"auto\" or null leaves that side available for auto-reservation." }, "className": { "type": "string" }, "title": { "type": "string", "description": "Visible chart title and the chart's accessible name." }, "description": { "type": "string", "description": "Concise accessible description that overrides the chart's generated aria-label." }, "summary": { "type": "string", "description": "Screen-reader-only summary of the chart's key takeaway; include keyboard interaction guidance when relevant." }, "accessibleTable": { "type": "boolean", "description": "Expose the chart data through Semiotic's screen-reader data table.", "default": true }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "legendInteraction": { "type": "string", "enum": [ "highlight", "isolate", "none" ], "description": "Legend interaction mode: highlight on hover, isolate on click, or none.", "default": "none" }, "legendPosition": { "type": "string", "enum": [ "right", "left", "top", "bottom" ], "description": "Position the legend beside or above/below the plot.", "default": "right" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": "string", "x-semiotic-runtime-types": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array", "object" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "object", "string" ], "description": "Tooltip: true/false, \"multi\", { mode: \"multi\", content? }, a custom function, or { fields, title } config. Multi mode shows every series at the hovered x; custom multi content receives allSeries/xValue.", "x-semiotic-runtime-types": [ "boolean", "function", "object", "string" ] }, "annotations": { "type": "array", "description": "Annotation objects to render on the chart. Each must have a `type` field. Position using your data field names (e.g. { type: \"widget\", month: \"Jan\", revenue: 500 }). Supported types: \"widget\" (arbitrary HTML/React content via foreignObject — v3 replacement for htmlAnnotationRules), \"label\" (callout with connector), \"callout\" (circle + label), \"text\" (plain label), \"y-threshold\" (horizontal reference line), \"x-threshold\" (vertical reference line), \"band\" (shaded y-region), \"enclose\" (circle around points), \"rect-enclose\" (rect around points), \"highlight\" (colored dots on filtered points), \"trend\" (regression line), \"envelope\" (upper/lower bounds), \"anomaly-band\" (mean ± stddev), \"forecast\" (extrapolated trend). Widget annotations accept: content (ReactNode), dx, dy, width, height, anchor (\"fixed\"|\"latest\"|\"sticky\"). Threshold annotations accept: value, label, color, strokeWidth, strokeDasharray. Enclose annotations accept: coordinates (array of data objects), label, color, padding.", "items": { "type": "object", "properties": { "type": { "type": "string", "enum": [ "widget", "label", "callout", "text", "bracket", "y-threshold", "x-threshold", "band", "enclose", "rect-enclose", "highlight", "trend", "envelope", "anomaly-band", "forecast" ], "description": "Annotation type" } }, "required": [ "type" ] } }, "autoPlaceAnnotations": { "type": [ "boolean", "object" ], "description": "Opt-in annotation placement pass. Chooses dx/dy for note-like annotations without manual offsets and avoids note/mark/edge overlaps where possible.", "default": false }, "responsiveRules": { "type": "array", "description": "Semantic responsive transforms applied before chart-mode defaults." }, "mobileSemantics": { "type": "object", "description": "Phone/mobile contract consumed by audits, recipes, adapters, and agents." }, "mobileInteraction": { "type": [ "boolean", "object" ], "description": "Touch-first interaction policy for phone-sized chart slots." }, "maxDevicePixelRatio": { "type": "number", "description": "Maximum canvas backing-store DPR. Defaults to 3 on desktop and 2 on coarse-pointer/small-screen devices; canvases repaint when browser zoom or display density changes." }, "axisExtent": { "type": "string", "enum": [ "nice", "exact" ], "description": "Tick endpoint mode. \"nice\" rounds endpoints to readable values; \"exact\" pins the first and last tick to the actual data min and max with equidistant intermediates. Affects XY x/y axes and ordinal value axis only.", "default": "nice" }, "animate": { "type": [ "boolean", "object" ], "description": "Enable mark transitions (boolean or {duration?, easing?, intro?})." }, "loading": { "type": "boolean", "description": "Show loading skeleton / loadingContent." }, "hoverHighlight": { "type": "boolean", "description": "Dim non-hovered series/categories (requires colorBy string field)." }, "chartId": { "type": "string", "description": "Stable id for linked selection / observation / nav sync." }, "emphasis": { "type": "string", "enum": [ "primary", "secondary" ] }, "responsiveWidth": { "type": "boolean" }, "responsiveHeight": { "type": "boolean" }, "color": { "type": "string", "description": "Uniform mark fill (primitive styling)." }, "stroke": { "type": "string" }, "strokeWidth": { "type": "number" }, "opacity": { "type": "number" }, "data": { "type": "object", "description": "Root node object with nested children" }, "childrenAccessor": { "type": "string", "default": "children", "x-semiotic-runtime-types": [ "string", "function" ] }, "valueAccessor": { "type": "string", "default": "value", "x-semiotic-runtime-types": [ "string", "function" ] }, "nodeIdAccessor": { "type": "string", "default": "name", "x-semiotic-runtime-types": [ "string", "function" ] }, "colorByDepth": { "type": "boolean", "default": false }, "showLabels": { "type": "boolean", "default": true }, "nodeLabel": { "type": "string", "x-semiotic-runtime-types": [ "string", "function" ] } }, "required": [ "data" ] } } }, { "type": "function", "function": { "name": "CirclePack", "description": "Nested circles representing hierarchical data. Data is a single root node with nested children.", "parameters": { "type": "object", "properties": { "mode": { "type": "string", "enum": [ "primary", "context", "sparkline", "mobile" ], "description": "Display mode controlling default size, decoration, margins, labels, and interaction.", "default": "primary" }, "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object", "description": "Object margin. A side value of \"auto\" or null leaves that side available for auto-reservation." }, "className": { "type": "string" }, "title": { "type": "string", "description": "Visible chart title and the chart's accessible name." }, "description": { "type": "string", "description": "Concise accessible description that overrides the chart's generated aria-label." }, "summary": { "type": "string", "description": "Screen-reader-only summary of the chart's key takeaway; include keyboard interaction guidance when relevant." }, "accessibleTable": { "type": "boolean", "description": "Expose the chart data through Semiotic's screen-reader data table.", "default": true }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "legendInteraction": { "type": "string", "enum": [ "highlight", "isolate", "none" ], "description": "Legend interaction mode: highlight on hover, isolate on click, or none.", "default": "none" }, "legendPosition": { "type": "string", "enum": [ "right", "left", "top", "bottom" ], "description": "Position the legend beside or above/below the plot.", "default": "right" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": "string", "x-semiotic-runtime-types": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array", "object" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "object", "string" ], "description": "Tooltip: true/false, \"multi\", { mode: \"multi\", content? }, a custom function, or { fields, title } config. Multi mode shows every series at the hovered x; custom multi content receives allSeries/xValue.", "x-semiotic-runtime-types": [ "boolean", "function", "object", "string" ] }, "annotations": { "type": "array", "description": "Annotation objects to render on the chart. Each must have a `type` field. Position using your data field names (e.g. { type: \"widget\", month: \"Jan\", revenue: 500 }). Supported types: \"widget\" (arbitrary HTML/React content via foreignObject — v3 replacement for htmlAnnotationRules), \"label\" (callout with connector), \"callout\" (circle + label), \"text\" (plain label), \"y-threshold\" (horizontal reference line), \"x-threshold\" (vertical reference line), \"band\" (shaded y-region), \"enclose\" (circle around points), \"rect-enclose\" (rect around points), \"highlight\" (colored dots on filtered points), \"trend\" (regression line), \"envelope\" (upper/lower bounds), \"anomaly-band\" (mean ± stddev), \"forecast\" (extrapolated trend). Widget annotations accept: content (ReactNode), dx, dy, width, height, anchor (\"fixed\"|\"latest\"|\"sticky\"). Threshold annotations accept: value, label, color, strokeWidth, strokeDasharray. Enclose annotations accept: coordinates (array of data objects), label, color, padding.", "items": { "type": "object", "properties": { "type": { "type": "string", "enum": [ "widget", "label", "callout", "text", "bracket", "y-threshold", "x-threshold", "band", "enclose", "rect-enclose", "highlight", "trend", "envelope", "anomaly-band", "forecast" ], "description": "Annotation type" } }, "required": [ "type" ] } }, "autoPlaceAnnotations": { "type": [ "boolean", "object" ], "description": "Opt-in annotation placement pass. Chooses dx/dy for note-like annotations without manual offsets and avoids note/mark/edge overlaps where possible.", "default": false }, "responsiveRules": { "type": "array", "description": "Semantic responsive transforms applied before chart-mode defaults." }, "mobileSemantics": { "type": "object", "description": "Phone/mobile contract consumed by audits, recipes, adapters, and agents." }, "mobileInteraction": { "type": [ "boolean", "object" ], "description": "Touch-first interaction policy for phone-sized chart slots." }, "maxDevicePixelRatio": { "type": "number", "description": "Maximum canvas backing-store DPR. Defaults to 3 on desktop and 2 on coarse-pointer/small-screen devices; canvases repaint when browser zoom or display density changes." }, "axisExtent": { "type": "string", "enum": [ "nice", "exact" ], "description": "Tick endpoint mode. \"nice\" rounds endpoints to readable values; \"exact\" pins the first and last tick to the actual data min and max with equidistant intermediates. Affects XY x/y axes and ordinal value axis only.", "default": "nice" }, "animate": { "type": [ "boolean", "object" ], "description": "Enable mark transitions (boolean or {duration?, easing?, intro?})." }, "loading": { "type": "boolean", "description": "Show loading skeleton / loadingContent." }, "hoverHighlight": { "type": "boolean", "description": "Dim non-hovered series/categories (requires colorBy string field)." }, "chartId": { "type": "string", "description": "Stable id for linked selection / observation / nav sync." }, "emphasis": { "type": "string", "enum": [ "primary", "secondary" ] }, "responsiveWidth": { "type": "boolean" }, "responsiveHeight": { "type": "boolean" }, "color": { "type": "string", "description": "Uniform mark fill (primitive styling)." }, "stroke": { "type": "string" }, "strokeWidth": { "type": "number" }, "opacity": { "type": "number" }, "data": { "type": "object", "description": "Root node object with nested children" }, "childrenAccessor": { "type": "string", "default": "children", "x-semiotic-runtime-types": [ "string", "function" ] }, "valueAccessor": { "type": "string", "default": "value", "x-semiotic-runtime-types": [ "string", "function" ] }, "nodeIdAccessor": { "type": "string", "default": "name", "x-semiotic-runtime-types": [ "string", "function" ] }, "colorByDepth": { "type": "boolean", "default": false }, "showLabels": { "type": "boolean", "default": true }, "nodeLabel": { "type": "string", "x-semiotic-runtime-types": [ "string", "function" ] }, "circleOpacity": { "type": "number", "default": 0.7 } }, "required": [ "data" ] } } }, { "type": "function", "function": { "name": "OrbitDiagram", "description": "Animated orbital diagram showing hierarchical data as nodes orbiting a center. Supports flat, solar, atomic, and custom ring arrangements.", "parameters": { "type": "object", "properties": { "mode": { "type": "string", "enum": [ "primary", "context", "sparkline", "mobile" ], "description": "Display mode controlling default size, decoration, margins, labels, and interaction.", "default": "primary" }, "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object", "description": "Object margin. A side value of \"auto\" or null leaves that side available for auto-reservation." }, "className": { "type": "string" }, "title": { "type": "string", "description": "Visible chart title and the chart's accessible name." }, "description": { "type": "string", "description": "Concise accessible description that overrides the chart's generated aria-label." }, "summary": { "type": "string", "description": "Screen-reader-only summary of the chart's key takeaway; include keyboard interaction guidance when relevant." }, "accessibleTable": { "type": "boolean", "description": "Expose the chart data through Semiotic's screen-reader data table.", "default": true }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "legendInteraction": { "type": "string", "enum": [ "highlight", "isolate", "none" ], "description": "Legend interaction mode: highlight on hover, isolate on click, or none.", "default": "none" }, "legendPosition": { "type": "string", "enum": [ "right", "left", "top", "bottom" ], "description": "Position the legend beside or above/below the plot.", "default": "right" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": "string", "x-semiotic-runtime-types": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array", "object" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "object", "string" ], "description": "Tooltip: true/false, \"multi\", { mode: \"multi\", content? }, a custom function, or { fields, title } config. Multi mode shows every series at the hovered x; custom multi content receives allSeries/xValue.", "x-semiotic-runtime-types": [ "boolean", "function", "object", "string" ] }, "annotations": { "type": "array", "description": "Annotation objects to render on the chart. Each must have a `type` field. Position using your data field names (e.g. { type: \"widget\", month: \"Jan\", revenue: 500 }). Supported types: \"widget\" (arbitrary HTML/React content via foreignObject — v3 replacement for htmlAnnotationRules), \"label\" (callout with connector), \"callout\" (circle + label), \"text\" (plain label), \"y-threshold\" (horizontal reference line), \"x-threshold\" (vertical reference line), \"band\" (shaded y-region), \"enclose\" (circle around points), \"rect-enclose\" (rect around points), \"highlight\" (colored dots on filtered points), \"trend\" (regression line), \"envelope\" (upper/lower bounds), \"anomaly-band\" (mean ± stddev), \"forecast\" (extrapolated trend). Widget annotations accept: content (ReactNode), dx, dy, width, height, anchor (\"fixed\"|\"latest\"|\"sticky\"). Threshold annotations accept: value, label, color, strokeWidth, strokeDasharray. Enclose annotations accept: coordinates (array of data objects), label, color, padding.", "items": { "type": "object", "properties": { "type": { "type": "string", "enum": [ "widget", "label", "callout", "text", "bracket", "y-threshold", "x-threshold", "band", "enclose", "rect-enclose", "highlight", "trend", "envelope", "anomaly-band", "forecast" ], "description": "Annotation type" } }, "required": [ "type" ] } }, "autoPlaceAnnotations": { "type": [ "boolean", "object" ], "description": "Opt-in annotation placement pass. Chooses dx/dy for note-like annotations without manual offsets and avoids note/mark/edge overlaps where possible.", "default": false }, "responsiveRules": { "type": "array", "description": "Semantic responsive transforms applied before chart-mode defaults." }, "mobileSemantics": { "type": "object", "description": "Phone/mobile contract consumed by audits, recipes, adapters, and agents." }, "mobileInteraction": { "type": [ "boolean", "object" ], "description": "Touch-first interaction policy for phone-sized chart slots." }, "maxDevicePixelRatio": { "type": "number", "description": "Maximum canvas backing-store DPR. Defaults to 3 on desktop and 2 on coarse-pointer/small-screen devices; canvases repaint when browser zoom or display density changes." }, "axisExtent": { "type": "string", "enum": [ "nice", "exact" ], "description": "Tick endpoint mode. \"nice\" rounds endpoints to readable values; \"exact\" pins the first and last tick to the actual data min and max with equidistant intermediates. Affects XY x/y axes and ordinal value axis only.", "default": "nice" }, "animate": { "type": [ "boolean", "object" ], "description": "Enable mark transitions (boolean or {duration?, easing?, intro?})." }, "loading": { "type": "boolean", "description": "Show loading skeleton / loadingContent." }, "hoverHighlight": { "type": "boolean", "description": "Dim non-hovered series/categories (requires colorBy string field)." }, "chartId": { "type": "string", "description": "Stable id for linked selection / observation / nav sync." }, "emphasis": { "type": "string", "enum": [ "primary", "secondary" ] }, "responsiveWidth": { "type": "boolean" }, "responsiveHeight": { "type": "boolean" }, "color": { "type": "string", "description": "Uniform mark fill (primitive styling)." }, "stroke": { "type": "string" }, "strokeWidth": { "type": "number" }, "opacity": { "type": "number" }, "data": { "type": "object", "description": "Hierarchical root object with children: { name: 'root', children: [...] }" }, "childrenAccessor": { "type": "string", "description": "Key to access children from each datum", "default": "children", "x-semiotic-runtime-types": [ "string", "function" ] }, "nodeIdAccessor": { "type": "string", "description": "Key to identify each node", "default": "name", "x-semiotic-runtime-types": [ "string", "function" ] }, "colorByDepth": { "type": "boolean", "description": "Color by hierarchy depth", "default": false }, "orbitMode": { "type": [ "string", "array" ], "description": "Ring arrangement: 'flat', 'solar', 'atomic', or number[]", "default": "flat" }, "orbitSize": { "type": "number", "description": "Ring size divisor per depth", "default": 2.95, "x-semiotic-runtime-types": [ "number", "function" ] }, "speed": { "type": "number", "description": "Orbit speed in degrees per frame", "default": 0.25 }, "eccentricity": { "type": "number", "description": "Vertical squash for elliptical orbits (1 = circle)", "default": 1, "x-semiotic-runtime-types": [ "number", "function" ] }, "showRings": { "type": "boolean", "description": "Show orbital ring paths", "default": true }, "nodeRadius": { "type": "number", "description": "Node radius", "default": 6, "x-semiotic-runtime-types": [ "number", "function" ] }, "showLabels": { "type": "boolean", "description": "Show node labels", "default": false }, "animated": { "type": "boolean", "description": "Enable animation", "default": true } }, "required": [ "data" ] } } }, { "type": "function", "function": { "name": "RealtimeLineChart", "description": "Streaming line chart rendered on canvas. Uses ref-based push API for high-frequency data.", "parameters": { "type": "object", "properties": { "size": { "type": "array", "description": "[width, height] in pixels" }, "width": { "type": "number", "description": "Alias for size[0]" }, "height": { "type": "number", "description": "Alias for size[1]" }, "maxDevicePixelRatio": { "type": "number", "description": "Maximum canvas backing-store DPR; canvases repaint when browser zoom or display density changes." }, "margin": { "type": "object" }, "className": { "type": "string" }, "timeAccessor": { "type": "string", "description": "Key for time/x values", "x-semiotic-runtime-types": [ "string", "function" ] }, "valueAccessor": { "type": "string", "description": "Key for y values", "x-semiotic-runtime-types": [ "string", "function" ] }, "windowSize": { "type": "number", "description": "Number of data points visible" }, "windowMode": { "type": "string", "enum": [ "sliding", "stepping" ] }, "arrowOfTime": { "type": "string", "enum": [ "left", "right" ] }, "timeExtent": { "type": "array" }, "valueExtent": { "type": "array" }, "extentPadding": { "type": "number" }, "showAxes": { "type": "boolean" }, "background": { "type": "string" }, "enableHover": { "type": [ "boolean", "object" ] }, "tooltip": { "type": "object", "description": "Tooltip content function or config", "x-semiotic-runtime-types": [ "function", "object" ] }, "annotations": { "type": "array", "description": "Annotation objects to render on the chart. Each must have a `type` field. Position using your data field names (e.g. { type: \"widget\", month: \"Jan\", revenue: 500 }). Supported types: \"widget\" (arbitrary HTML/React content via foreignObject — v3 replacement for htmlAnnotationRules), \"label\" (callout with connector), \"callout\" (circle + label), \"text\" (plain label), \"y-threshold\" (horizontal reference line), \"x-threshold\" (vertical reference line), \"band\" (shaded y-region), \"enclose\" (circle around points), \"rect-enclose\" (rect around points), \"highlight\" (colored dots on filtered points), \"trend\" (regression line), \"envelope\" (upper/lower bounds), \"anomaly-band\" (mean ± stddev), \"forecast\" (extrapolated trend). Widget annotations accept: content (ReactNode), dx, dy, width, height, anchor (\"fixed\"|\"latest\"|\"sticky\"). Threshold annotations accept: value, label, color, strokeWidth, strokeDasharray. Enclose annotations accept: coordinates (array of data objects), label, color, padding.", "items": { "type": "object", "properties": { "type": { "type": "string", "enum": [ "widget", "label", "callout", "text", "bracket", "y-threshold", "x-threshold", "band", "enclose", "rect-enclose", "highlight", "trend", "envelope", "anomaly-band", "forecast" ], "description": "Annotation type" } }, "required": [ "type" ] } }, "autoPlaceAnnotations": { "type": [ "boolean", "object" ], "description": "Opt-in annotation placement pass for note-like annotations without manual offsets." }, "responsiveRules": { "type": "array", "description": "Semantic responsive transforms applied before chart-mode defaults." }, "mobileSemantics": { "type": "object", "description": "Phone/mobile contract consumed by audits, recipes, adapters, and agents." }, "mobileInteraction": { "type": [ "boolean", "object" ], "description": "Touch-first interaction policy for phone-sized chart slots." }, "decay": { "type": "object", "description": "Decay config: { type, halfLife, minOpacity }" }, "pulse": { "type": "object", "description": "Pulse config: { duration, color, glowRadius }" }, "staleness": { "type": "object", "description": "Staleness config: { threshold, dimOpacity, showBadge }" }, "stroke": { "type": "string" }, "strokeWidth": { "type": "number" }, "strokeDasharray": { "type": "string" }, "transition": { "type": "object", "description": "Transition config: { duration, easing }" } }, "required": [] } } }, { "type": "function", "function": { "name": "RealtimeHistogram", "description": "Streaming bar chart with binned aggregation. Uses ref-based push API.", "parameters": { "type": "object", "properties": { "size": { "type": "array", "description": "[width, height] in pixels" }, "width": { "type": "number", "description": "Alias for size[0]" }, "height": { "type": "number", "description": "Alias for size[1]" }, "maxDevicePixelRatio": { "type": "number", "description": "Maximum canvas backing-store DPR; canvases repaint when browser zoom or display density changes." }, "margin": { "type": "object" }, "className": { "type": "string" }, "timeAccessor": { "type": "string", "description": "Key for time/x values", "x-semiotic-runtime-types": [ "string", "function" ] }, "valueAccessor": { "type": "string", "description": "Key for y values", "x-semiotic-runtime-types": [ "string", "function" ] }, "windowSize": { "type": "number", "description": "Number of data points visible" }, "windowMode": { "type": "string", "enum": [ "sliding", "stepping" ] }, "arrowOfTime": { "type": "string", "enum": [ "left", "right" ] }, "timeExtent": { "type": "array" }, "valueExtent": { "type": "array" }, "extentPadding": { "type": "number" }, "showAxes": { "type": "boolean" }, "background": { "type": "string" }, "enableHover": { "type": [ "boolean", "object" ] }, "tooltip": { "type": "object", "description": "Tooltip content function or config", "x-semiotic-runtime-types": [ "function", "object" ] }, "annotations": { "type": "array", "description": "Annotation objects to render on the chart. Each must have a `type` field. Position using your data field names (e.g. { type: \"widget\", month: \"Jan\", revenue: 500 }). Supported types: \"widget\" (arbitrary HTML/React content via foreignObject — v3 replacement for htmlAnnotationRules), \"label\" (callout with connector), \"callout\" (circle + label), \"text\" (plain label), \"y-threshold\" (horizontal reference line), \"x-threshold\" (vertical reference line), \"band\" (shaded y-region), \"enclose\" (circle around points), \"rect-enclose\" (rect around points), \"highlight\" (colored dots on filtered points), \"trend\" (regression line), \"envelope\" (upper/lower bounds), \"anomaly-band\" (mean ± stddev), \"forecast\" (extrapolated trend). Widget annotations accept: content (ReactNode), dx, dy, width, height, anchor (\"fixed\"|\"latest\"|\"sticky\"). Threshold annotations accept: value, label, color, strokeWidth, strokeDasharray. Enclose annotations accept: coordinates (array of data objects), label, color, padding.", "items": { "type": "object", "properties": { "type": { "type": "string", "enum": [ "widget", "label", "callout", "text", "bracket", "y-threshold", "x-threshold", "band", "enclose", "rect-enclose", "highlight", "trend", "envelope", "anomaly-band", "forecast" ], "description": "Annotation type" } }, "required": [ "type" ] } }, "autoPlaceAnnotations": { "type": [ "boolean", "object" ], "description": "Opt-in annotation placement pass for note-like annotations without manual offsets." }, "responsiveRules": { "type": "array", "description": "Semantic responsive transforms applied before chart-mode defaults." }, "mobileSemantics": { "type": "object", "description": "Phone/mobile contract consumed by audits, recipes, adapters, and agents." }, "mobileInteraction": { "type": [ "boolean", "object" ], "description": "Touch-first interaction policy for phone-sized chart slots." }, "decay": { "type": "object", "description": "Decay config: { type, halfLife, minOpacity }" }, "pulse": { "type": "object", "description": "Pulse config: { duration, color, glowRadius }" }, "staleness": { "type": "object", "description": "Staleness config: { threshold, dimOpacity, showBadge }" }, "binSize": { "type": "number", "description": "Time bin size in milliseconds (required)" }, "direction": { "type": "string", "enum": [ "up", "down" ], "description": "Bar growth direction. Use \"down\" for mirrored histograms; explicit valueExtent is reversed.", "default": "up" }, "categoryAccessor": { "type": "string", "description": "Key for category grouping", "x-semiotic-runtime-types": [ "string", "function" ] }, "colors": { "type": "object", "description": "Map of category to color string" }, "fill": { "type": "string" }, "stroke": { "type": "string" }, "strokeWidth": { "type": "number" }, "gap": { "type": "number" }, "brush": { "type": [ "boolean", "string", "object" ], "description": "Enable brush selection. true defaults to { dimension: \"x\", snap: \"bin\" }. String: \"x\". Object: { dimension, snap: \"continuous\"|\"bin\", snapDuring }." }, "onBrush": { "description": "Callback when brush extent changes: (extent | null) => void", "x-semiotic-runtime-types": [ "function" ] }, "linkedBrush": { "type": [ "string", "object" ], "description": "Cross-chart brush coordination via LinkedCharts. String: selection name. Object: { name, xField, yField }." }, "transition": { "type": "object", "description": "Transition config: { duration, easing }" } }, "required": [ "binSize" ] } } }, { "type": "function", "function": { "name": "RealtimeSwarmChart", "description": "Streaming swarm/scatter chart showing individual data points over time.", "parameters": { "type": "object", "properties": { "size": { "type": "array", "description": "[width, height] in pixels" }, "width": { "type": "number", "description": "Alias for size[0]" }, "height": { "type": "number", "description": "Alias for size[1]" }, "maxDevicePixelRatio": { "type": "number", "description": "Maximum canvas backing-store DPR; canvases repaint when browser zoom or display density changes." }, "margin": { "type": "object" }, "className": { "type": "string" }, "timeAccessor": { "type": "string", "description": "Key for time/x values", "x-semiotic-runtime-types": [ "string", "function" ] }, "valueAccessor": { "type": "string", "description": "Key for y values", "x-semiotic-runtime-types": [ "string", "function" ] }, "windowSize": { "type": "number", "description": "Number of data points visible" }, "windowMode": { "type": "string", "enum": [ "sliding", "stepping" ] }, "arrowOfTime": { "type": "string", "enum": [ "left", "right" ] }, "timeExtent": { "type": "array" }, "valueExtent": { "type": "array" }, "extentPadding": { "type": "number" }, "showAxes": { "type": "boolean" }, "background": { "type": "string" }, "enableHover": { "type": [ "boolean", "object" ] }, "tooltip": { "type": "object", "description": "Tooltip content function or config", "x-semiotic-runtime-types": [ "function", "object" ] }, "annotations": { "type": "array", "description": "Annotation objects to render on the chart. Each must have a `type` field. Position using your data field names (e.g. { type: \"widget\", month: \"Jan\", revenue: 500 }). Supported types: \"widget\" (arbitrary HTML/React content via foreignObject — v3 replacement for htmlAnnotationRules), \"label\" (callout with connector), \"callout\" (circle + label), \"text\" (plain label), \"y-threshold\" (horizontal reference line), \"x-threshold\" (vertical reference line), \"band\" (shaded y-region), \"enclose\" (circle around points), \"rect-enclose\" (rect around points), \"highlight\" (colored dots on filtered points), \"trend\" (regression line), \"envelope\" (upper/lower bounds), \"anomaly-band\" (mean ± stddev), \"forecast\" (extrapolated trend). Widget annotations accept: content (ReactNode), dx, dy, width, height, anchor (\"fixed\"|\"latest\"|\"sticky\"). Threshold annotations accept: value, label, color, strokeWidth, strokeDasharray. Enclose annotations accept: coordinates (array of data objects), label, color, padding.", "items": { "type": "object", "properties": { "type": { "type": "string", "enum": [ "widget", "label", "callout", "text", "bracket", "y-threshold", "x-threshold", "band", "enclose", "rect-enclose", "highlight", "trend", "envelope", "anomaly-band", "forecast" ], "description": "Annotation type" } }, "required": [ "type" ] } }, "autoPlaceAnnotations": { "type": [ "boolean", "object" ], "description": "Opt-in annotation placement pass for note-like annotations without manual offsets." }, "responsiveRules": { "type": "array", "description": "Semantic responsive transforms applied before chart-mode defaults." }, "mobileSemantics": { "type": "object", "description": "Phone/mobile contract consumed by audits, recipes, adapters, and agents." }, "mobileInteraction": { "type": [ "boolean", "object" ], "description": "Touch-first interaction policy for phone-sized chart slots." }, "decay": { "type": "object", "description": "Decay config: { type, halfLife, minOpacity }" }, "pulse": { "type": "object", "description": "Pulse config: { duration, color, glowRadius }" }, "staleness": { "type": "object", "description": "Staleness config: { threshold, dimOpacity, showBadge }" }, "categoryAccessor": { "type": "string", "x-semiotic-runtime-types": [ "string", "function" ] }, "colors": { "type": "object" }, "radius": { "type": "number" }, "fill": { "type": "string" }, "opacity": { "type": "number" }, "stroke": { "type": "string" }, "strokeWidth": { "type": "number" }, "yScaleType": { "type": "string", "enum": [ "linear", "log", "symlog" ], "description": "Value-axis scale. symlog preserves zero and negative values while compressing large magnitudes." }, "transition": { "type": "object", "description": "Transition config: { duration, easing }" } }, "required": [] } } }, { "type": "function", "function": { "name": "RealtimeWaterfallChart", "description": "Streaming waterfall chart with positive/negative bars and connectors.", "parameters": { "type": "object", "properties": { "size": { "type": "array", "description": "[width, height] in pixels" }, "width": { "type": "number", "description": "Alias for size[0]" }, "height": { "type": "number", "description": "Alias for size[1]" }, "maxDevicePixelRatio": { "type": "number", "description": "Maximum canvas backing-store DPR; canvases repaint when browser zoom or display density changes." }, "margin": { "type": "object" }, "className": { "type": "string" }, "timeAccessor": { "type": "string", "description": "Key for time/x values", "x-semiotic-runtime-types": [ "string", "function" ] }, "valueAccessor": { "type": "string", "description": "Key for y values", "x-semiotic-runtime-types": [ "string", "function" ] }, "windowSize": { "type": "number", "description": "Number of data points visible" }, "windowMode": { "type": "string", "enum": [ "sliding", "stepping" ] }, "arrowOfTime": { "type": "string", "enum": [ "left", "right" ] }, "timeExtent": { "type": "array" }, "valueExtent": { "type": "array" }, "extentPadding": { "type": "number" }, "showAxes": { "type": "boolean" }, "background": { "type": "string" }, "enableHover": { "type": [ "boolean", "object" ] }, "tooltip": { "type": "object", "description": "Tooltip content function or config", "x-semiotic-runtime-types": [ "function", "object" ] }, "annotations": { "type": "array", "description": "Annotation objects to render on the chart. Each must have a `type` field. Position using your data field names (e.g. { type: \"widget\", month: \"Jan\", revenue: 500 }). Supported types: \"widget\" (arbitrary HTML/React content via foreignObject — v3 replacement for htmlAnnotationRules), \"label\" (callout with connector), \"callout\" (circle + label), \"text\" (plain label), \"y-threshold\" (horizontal reference line), \"x-threshold\" (vertical reference line), \"band\" (shaded y-region), \"enclose\" (circle around points), \"rect-enclose\" (rect around points), \"highlight\" (colored dots on filtered points), \"trend\" (regression line), \"envelope\" (upper/lower bounds), \"anomaly-band\" (mean ± stddev), \"forecast\" (extrapolated trend). Widget annotations accept: content (ReactNode), dx, dy, width, height, anchor (\"fixed\"|\"latest\"|\"sticky\"). Threshold annotations accept: value, label, color, strokeWidth, strokeDasharray. Enclose annotations accept: coordinates (array of data objects), label, color, padding.", "items": { "type": "object", "properties": { "type": { "type": "string", "enum": [ "widget", "label", "callout", "text", "bracket", "y-threshold", "x-threshold", "band", "enclose", "rect-enclose", "highlight", "trend", "envelope", "anomaly-band", "forecast" ], "description": "Annotation type" } }, "required": [ "type" ] } }, "autoPlaceAnnotations": { "type": [ "boolean", "object" ], "description": "Opt-in annotation placement pass for note-like annotations without manual offsets." }, "responsiveRules": { "type": "array", "description": "Semantic responsive transforms applied before chart-mode defaults." }, "mobileSemantics": { "type": "object", "description": "Phone/mobile contract consumed by audits, recipes, adapters, and agents." }, "mobileInteraction": { "type": [ "boolean", "object" ], "description": "Touch-first interaction policy for phone-sized chart slots." }, "decay": { "type": "object", "description": "Decay config: { type, halfLife, minOpacity }" }, "pulse": { "type": "object", "description": "Pulse config: { duration, color, glowRadius }" }, "staleness": { "type": "object", "description": "Staleness config: { threshold, dimOpacity, showBadge }" }, "positiveColor": { "type": "string" }, "negativeColor": { "type": "string" }, "connectorStroke": { "type": "string" }, "connectorWidth": { "type": "number" }, "gap": { "type": "number" }, "stroke": { "type": "string" }, "strokeWidth": { "type": "number" }, "transition": { "type": "object", "description": "Transition config: { duration, easing }" } }, "required": [] } } }, { "type": "function", "function": { "name": "RealtimeHeatmap", "description": "Streaming 2D heatmap with binned time and value aggregation.", "parameters": { "type": "object", "properties": { "size": { "type": "array", "description": "[width, height] in pixels" }, "width": { "type": "number", "description": "Alias for size[0]" }, "height": { "type": "number", "description": "Alias for size[1]" }, "maxDevicePixelRatio": { "type": "number", "description": "Maximum canvas backing-store DPR; canvases repaint when browser zoom or display density changes." }, "margin": { "type": "object" }, "className": { "type": "string" }, "timeAccessor": { "type": "string", "description": "Key for time/x values", "x-semiotic-runtime-types": [ "string", "function" ] }, "valueAccessor": { "type": "string", "description": "Key for y values", "x-semiotic-runtime-types": [ "string", "function" ] }, "windowSize": { "type": "number", "description": "Number of data points visible" }, "windowMode": { "type": "string", "enum": [ "sliding", "stepping" ] }, "arrowOfTime": { "type": "string", "enum": [ "left", "right" ] }, "timeExtent": { "type": "array" }, "valueExtent": { "type": "array" }, "extentPadding": { "type": "number" }, "showAxes": { "type": "boolean" }, "background": { "type": "string" }, "enableHover": { "type": [ "boolean", "object" ] }, "tooltip": { "type": "object", "description": "Tooltip content function or config", "x-semiotic-runtime-types": [ "function", "object" ] }, "annotations": { "type": "array", "description": "Annotation objects to render on the chart. Each must have a `type` field. Position using your data field names (e.g. { type: \"widget\", month: \"Jan\", revenue: 500 }). Supported types: \"widget\" (arbitrary HTML/React content via foreignObject — v3 replacement for htmlAnnotationRules), \"label\" (callout with connector), \"callout\" (circle + label), \"text\" (plain label), \"y-threshold\" (horizontal reference line), \"x-threshold\" (vertical reference line), \"band\" (shaded y-region), \"enclose\" (circle around points), \"rect-enclose\" (rect around points), \"highlight\" (colored dots on filtered points), \"trend\" (regression line), \"envelope\" (upper/lower bounds), \"anomaly-band\" (mean ± stddev), \"forecast\" (extrapolated trend). Widget annotations accept: content (ReactNode), dx, dy, width, height, anchor (\"fixed\"|\"latest\"|\"sticky\"). Threshold annotations accept: value, label, color, strokeWidth, strokeDasharray. Enclose annotations accept: coordinates (array of data objects), label, color, padding.", "items": { "type": "object", "properties": { "type": { "type": "string", "enum": [ "widget", "label", "callout", "text", "bracket", "y-threshold", "x-threshold", "band", "enclose", "rect-enclose", "highlight", "trend", "envelope", "anomaly-band", "forecast" ], "description": "Annotation type" } }, "required": [ "type" ] } }, "autoPlaceAnnotations": { "type": [ "boolean", "object" ], "description": "Opt-in annotation placement pass for note-like annotations without manual offsets." }, "responsiveRules": { "type": "array", "description": "Semantic responsive transforms applied before chart-mode defaults." }, "mobileSemantics": { "type": "object", "description": "Phone/mobile contract consumed by audits, recipes, adapters, and agents." }, "mobileInteraction": { "type": [ "boolean", "object" ], "description": "Touch-first interaction policy for phone-sized chart slots." }, "decay": { "type": "object", "description": "Decay config: { type, halfLife, minOpacity }" }, "pulse": { "type": "object", "description": "Pulse config: { duration, color, glowRadius }" }, "staleness": { "type": "object", "description": "Staleness config: { threshold, dimOpacity, showBadge }" }, "heatmapXBins": { "type": "number" }, "heatmapYBins": { "type": "number" }, "aggregation": { "type": "string", "enum": [ "count", "sum", "mean" ] }, "colorScheme": { "type": "string", "enum": [ "blues", "reds", "greens", "viridis", "oranges", "purples", "greys", "plasma", "inferno", "magma", "cividis", "turbo", "custom" ] } }, "required": [] } } }, { "type": "function", "function": { "name": "FunnelChart", "description": "Funnel visualization with two orientations. Horizontal (default): steps top-to-bottom with centered bars and trapezoid connectors; multi-category mirrors around center axis. Vertical: steps on x-axis as vertical bars with hatched dropoff stacking (solid = retained, hatched = dropoff from previous step); multi-category renders grouped bars.", "parameters": { "type": "object", "properties": { "mode": { "type": "string", "enum": [ "primary", "context", "sparkline", "mobile" ], "description": "Display mode controlling default size, decoration, margins, labels, and interaction.", "default": "primary" }, "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object", "description": "Object margin. A side value of \"auto\" or null leaves that side available for auto-reservation." }, "className": { "type": "string" }, "title": { "type": "string", "description": "Visible chart title and the chart's accessible name." }, "description": { "type": "string", "description": "Concise accessible description that overrides the chart's generated aria-label." }, "summary": { "type": "string", "description": "Screen-reader-only summary of the chart's key takeaway; include keyboard interaction guidance when relevant." }, "accessibleTable": { "type": "boolean", "description": "Expose the chart data through Semiotic's screen-reader data table.", "default": true }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "legendInteraction": { "type": "string", "enum": [ "highlight", "isolate", "none" ], "description": "Legend interaction mode: highlight on hover, isolate on click, or none.", "default": "none" }, "legendPosition": { "type": "string", "enum": [ "right", "left", "top", "bottom" ] }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": "string", "x-semiotic-runtime-types": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array", "object" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "object", "string" ], "description": "Tooltip: true/false, \"multi\", { mode: \"multi\", content? }, a custom function, or { fields, title } config. Multi mode shows every series at the hovered x; custom multi content receives allSeries/xValue.", "x-semiotic-runtime-types": [ "boolean", "function", "object", "string" ] }, "annotations": { "type": "array", "description": "Annotation objects to render on the chart. Each must have a `type` field. Position using your data field names (e.g. { type: \"widget\", month: \"Jan\", revenue: 500 }). Supported types: \"widget\" (arbitrary HTML/React content via foreignObject — v3 replacement for htmlAnnotationRules), \"label\" (callout with connector), \"callout\" (circle + label), \"text\" (plain label), \"y-threshold\" (horizontal reference line), \"x-threshold\" (vertical reference line), \"band\" (shaded y-region), \"enclose\" (circle around points), \"rect-enclose\" (rect around points), \"highlight\" (colored dots on filtered points), \"trend\" (regression line), \"envelope\" (upper/lower bounds), \"anomaly-band\" (mean ± stddev), \"forecast\" (extrapolated trend). Widget annotations accept: content (ReactNode), dx, dy, width, height, anchor (\"fixed\"|\"latest\"|\"sticky\"). Threshold annotations accept: value, label, color, strokeWidth, strokeDasharray. Enclose annotations accept: coordinates (array of data objects), label, color, padding.", "items": { "type": "object", "properties": { "type": { "type": "string", "enum": [ "widget", "label", "callout", "text", "bracket", "y-threshold", "x-threshold", "band", "enclose", "rect-enclose", "highlight", "trend", "envelope", "anomaly-band", "forecast" ], "description": "Annotation type" } }, "required": [ "type" ] } }, "autoPlaceAnnotations": { "type": [ "boolean", "object" ], "description": "Opt-in annotation placement pass. Chooses dx/dy for note-like annotations without manual offsets and avoids note/mark/edge overlaps where possible.", "default": false }, "responsiveRules": { "type": "array", "description": "Semantic responsive transforms applied before chart-mode defaults." }, "mobileSemantics": { "type": "object", "description": "Phone/mobile contract consumed by audits, recipes, adapters, and agents." }, "mobileInteraction": { "type": [ "boolean", "object" ], "description": "Touch-first interaction policy for phone-sized chart slots." }, "maxDevicePixelRatio": { "type": "number", "description": "Maximum canvas backing-store DPR. Defaults to 3 on desktop and 2 on coarse-pointer/small-screen devices; canvases repaint when browser zoom or display density changes." }, "axisExtent": { "type": "string", "enum": [ "nice", "exact" ], "description": "Tick endpoint mode. \"nice\" rounds endpoints to readable values; \"exact\" pins the first and last tick to the actual data min and max with equidistant intermediates. Affects XY x/y axes and ordinal value axis only.", "default": "nice" }, "animate": { "type": [ "boolean", "object" ], "description": "Enable mark transitions (boolean or {duration?, easing?, intro?})." }, "loading": { "type": "boolean", "description": "Show loading skeleton / loadingContent." }, "hoverHighlight": { "type": "boolean", "description": "Dim non-hovered series/categories (requires colorBy string field)." }, "chartId": { "type": "string", "description": "Stable id for linked selection / observation / nav sync." }, "emphasis": { "type": "string", "enum": [ "primary", "secondary" ] }, "responsiveWidth": { "type": "boolean" }, "responsiveHeight": { "type": "boolean" }, "color": { "type": "string", "description": "Uniform mark fill (primitive styling)." }, "stroke": { "type": "string" }, "strokeWidth": { "type": "number" }, "opacity": { "type": "number" }, "categoryLabel": { "type": "string" }, "valueLabel": { "type": "string" }, "showCategoryTicks": { "type": "boolean", "description": "Show category tick labels on ordinal axis", "default": false }, "data": { "type": "array", "description": "Array of data objects with step and value fields" }, "stepAccessor": { "type": "string", "description": "Key for funnel step/stage name", "default": "step", "x-semiotic-runtime-types": [ "string", "function" ] }, "valueAccessor": { "type": "string", "description": "Key for numeric value per step", "default": "value", "x-semiotic-runtime-types": [ "string", "function" ] }, "categoryAccessor": { "type": "string", "description": "Key to split each step into mirrored categories (optional)", "x-semiotic-runtime-types": [ "string", "function" ] }, "orientation": { "type": "string", "enum": [ "horizontal", "vertical" ], "description": "Horizontal (default): centered bars top-to-bottom with trapezoid connectors. Vertical: vertical bars with hatched dropoff stacking — solid = retained, hatched = dropoff from previous step. Multi-category renders grouped bars in vertical mode.", "default": "horizontal" }, "connectorOpacity": { "type": "number", "description": "Opacity of trapezoid connectors between steps (0-1). Horizontal orientation only.", "default": 0.3 } }, "required": [ "data" ] } } }, { "type": "function", "function": { "name": "SwimlaneChart", "description": "Categorical lanes with sequentially stacked items colored by subcategory. Unlike StackedBarChart, the same subcategory can appear multiple times in the same lane — items stack left-to-right (horizontal) or bottom-to-top (vertical) in data order. Supports brush for value-axis selection and push API for streaming.", "parameters": { "type": "object", "properties": { "mode": { "type": "string", "enum": [ "primary", "context", "sparkline", "mobile" ], "description": "Display mode controlling default size, decoration, margins, labels, and interaction.", "default": "primary" }, "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object", "description": "Object margin. A side value of \"auto\" or null leaves that side available for auto-reservation." }, "className": { "type": "string" }, "title": { "type": "string", "description": "Visible chart title and the chart's accessible name." }, "description": { "type": "string", "description": "Concise accessible description that overrides the chart's generated aria-label." }, "summary": { "type": "string", "description": "Screen-reader-only summary of the chart's key takeaway; include keyboard interaction guidance when relevant." }, "accessibleTable": { "type": "boolean", "description": "Expose the chart data through Semiotic's screen-reader data table.", "default": true }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "legendInteraction": { "type": "string", "enum": [ "highlight", "isolate", "none" ], "description": "Legend interaction mode: highlight on hover, isolate on click, or none.", "default": "none" }, "legendPosition": { "type": "string", "enum": [ "right", "left", "top", "bottom" ] }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": "string", "x-semiotic-runtime-types": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array", "object" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "object", "string" ], "description": "Tooltip: true/false, \"multi\", { mode: \"multi\", content? }, a custom function, or { fields, title } config. Multi mode shows every series at the hovered x; custom multi content receives allSeries/xValue.", "x-semiotic-runtime-types": [ "boolean", "function", "object", "string" ] }, "annotations": { "type": "array", "description": "Annotation objects to render on the chart. Each must have a `type` field. Position using your data field names (e.g. { type: \"widget\", month: \"Jan\", revenue: 500 }). Supported types: \"widget\" (arbitrary HTML/React content via foreignObject — v3 replacement for htmlAnnotationRules), \"label\" (callout with connector), \"callout\" (circle + label), \"text\" (plain label), \"y-threshold\" (horizontal reference line), \"x-threshold\" (vertical reference line), \"band\" (shaded y-region), \"enclose\" (circle around points), \"rect-enclose\" (rect around points), \"highlight\" (colored dots on filtered points), \"trend\" (regression line), \"envelope\" (upper/lower bounds), \"anomaly-band\" (mean ± stddev), \"forecast\" (extrapolated trend). Widget annotations accept: content (ReactNode), dx, dy, width, height, anchor (\"fixed\"|\"latest\"|\"sticky\"). Threshold annotations accept: value, label, color, strokeWidth, strokeDasharray. Enclose annotations accept: coordinates (array of data objects), label, color, padding.", "items": { "type": "object", "properties": { "type": { "type": "string", "enum": [ "widget", "label", "callout", "text", "bracket", "y-threshold", "x-threshold", "band", "enclose", "rect-enclose", "highlight", "trend", "envelope", "anomaly-band", "forecast" ], "description": "Annotation type" } }, "required": [ "type" ] } }, "autoPlaceAnnotations": { "type": [ "boolean", "object" ], "description": "Opt-in annotation placement pass. Chooses dx/dy for note-like annotations without manual offsets and avoids note/mark/edge overlaps where possible.", "default": false }, "responsiveRules": { "type": "array", "description": "Semantic responsive transforms applied before chart-mode defaults." }, "mobileSemantics": { "type": "object", "description": "Phone/mobile contract consumed by audits, recipes, adapters, and agents." }, "mobileInteraction": { "type": [ "boolean", "object" ], "description": "Touch-first interaction policy for phone-sized chart slots." }, "maxDevicePixelRatio": { "type": "number", "description": "Maximum canvas backing-store DPR. Defaults to 3 on desktop and 2 on coarse-pointer/small-screen devices; canvases repaint when browser zoom or display density changes." }, "axisExtent": { "type": "string", "enum": [ "nice", "exact" ], "description": "Tick endpoint mode. \"nice\" rounds endpoints to readable values; \"exact\" pins the first and last tick to the actual data min and max with equidistant intermediates. Affects XY x/y axes and ordinal value axis only.", "default": "nice" }, "animate": { "type": [ "boolean", "object" ], "description": "Enable mark transitions (boolean or {duration?, easing?, intro?})." }, "loading": { "type": "boolean", "description": "Show loading skeleton / loadingContent." }, "hoverHighlight": { "type": "boolean", "description": "Dim non-hovered series/categories (requires colorBy string field)." }, "chartId": { "type": "string", "description": "Stable id for linked selection / observation / nav sync." }, "emphasis": { "type": "string", "enum": [ "primary", "secondary" ] }, "responsiveWidth": { "type": "boolean" }, "responsiveHeight": { "type": "boolean" }, "color": { "type": "string", "description": "Uniform mark fill (primitive styling)." }, "stroke": { "type": "string" }, "strokeWidth": { "type": "number" }, "opacity": { "type": "number" }, "categoryLabel": { "type": "string" }, "valueLabel": { "type": "string" }, "showCategoryTicks": { "type": "boolean", "description": "Show lane labels on the category axis" }, "data": { "type": "array", "description": "Array of data objects. Omit for push API mode." }, "categoryAccessor": { "type": "string", "description": "Key for lane categories (swim lanes)", "default": "category", "x-semiotic-runtime-types": [ "string", "function" ] }, "subcategoryAccessor": { "type": "string", "description": "Key for item subcategory (color grouping within lanes). Required. Duplicate subcategories in the same lane stack sequentially.", "x-semiotic-runtime-types": [ "string", "function" ] }, "valueAccessor": { "type": "string", "description": "Key for item size/duration along the value axis", "default": "value", "x-semiotic-runtime-types": [ "string", "function" ] }, "orientation": { "type": "string", "enum": [ "horizontal", "vertical" ], "description": "Horizontal renders lanes as rows; vertical as columns.", "default": "horizontal" }, "barPadding": { "type": "number", "description": "Padding between lanes in pixels", "default": 40 }, "roundedTop": { "type": "number", "description": "Rounded corner radius (px) applied to the outermost ends of each lane — left+right for horizontal, top+bottom for vertical. Middle segments stay square; single-segment lanes round all four corners." }, "gradientFill": { "type": "object", "description": "Tip-to-base gradient: { stops: [{ offset: 0-1, color?, opacity? }] }." }, "brush": { "type": "boolean", "description": "Enable value-axis brush selection" }, "onBrush": { "description": "Callback with { r: [min, max] } or null when brush clears", "x-semiotic-runtime-types": [ "function" ] }, "linkedBrush": { "type": [ "string", "object" ], "description": "LinkedCharts brush integration name" } }, "required": [ "subcategoryAccessor" ] } } }, { "type": "function", "function": { "name": "ScatterplotMatrix", "description": "Multi-panel scatterplot grid with crossfilter brushing. Requires data array with numeric fields.", "parameters": { "type": "object", "properties": { "mode": { "type": "string", "enum": [ "primary", "context", "sparkline", "mobile" ], "description": "Display mode controlling default size, decoration, margins, labels, and interaction.", "default": "primary" }, "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object", "description": "Object margin. A side value of \"auto\" or null leaves that side available for auto-reservation." }, "className": { "type": "string" }, "title": { "type": "string", "description": "Visible chart title and the chart's accessible name." }, "description": { "type": "string", "description": "Concise accessible description that overrides the chart's generated aria-label." }, "summary": { "type": "string", "description": "Screen-reader-only summary of the chart's key takeaway; include keyboard interaction guidance when relevant." }, "accessibleTable": { "type": "boolean", "description": "Expose the chart data through Semiotic's screen-reader data table.", "default": true }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "legendInteraction": { "type": "string", "enum": [ "highlight", "isolate", "none" ], "description": "Legend interaction mode: highlight on hover, isolate on click, or none.", "default": "none" }, "legendPosition": { "type": "string", "enum": [ "right", "left", "top", "bottom" ], "description": "Position the legend beside or above/below the plot.", "default": "right" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": "string", "x-semiotic-runtime-types": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array", "object" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "object", "string" ], "description": "Tooltip: true/false, \"multi\", { mode: \"multi\", content? }, a custom function, or { fields, title } config. Multi mode shows every series at the hovered x; custom multi content receives allSeries/xValue.", "x-semiotic-runtime-types": [ "boolean", "function", "object", "string" ] }, "annotations": { "type": "array", "description": "Annotation objects to render on the chart. Each must have a `type` field. Position using your data field names (e.g. { type: \"widget\", month: \"Jan\", revenue: 500 }). Supported types: \"widget\" (arbitrary HTML/React content via foreignObject — v3 replacement for htmlAnnotationRules), \"label\" (callout with connector), \"callout\" (circle + label), \"text\" (plain label), \"y-threshold\" (horizontal reference line), \"x-threshold\" (vertical reference line), \"band\" (shaded y-region), \"enclose\" (circle around points), \"rect-enclose\" (rect around points), \"highlight\" (colored dots on filtered points), \"trend\" (regression line), \"envelope\" (upper/lower bounds), \"anomaly-band\" (mean ± stddev), \"forecast\" (extrapolated trend). Widget annotations accept: content (ReactNode), dx, dy, width, height, anchor (\"fixed\"|\"latest\"|\"sticky\"). Threshold annotations accept: value, label, color, strokeWidth, strokeDasharray. Enclose annotations accept: coordinates (array of data objects), label, color, padding.", "items": { "type": "object", "properties": { "type": { "type": "string", "enum": [ "widget", "label", "callout", "text", "bracket", "y-threshold", "x-threshold", "band", "enclose", "rect-enclose", "highlight", "trend", "envelope", "anomaly-band", "forecast" ], "description": "Annotation type" } }, "required": [ "type" ] } }, "autoPlaceAnnotations": { "type": [ "boolean", "object" ], "description": "Opt-in annotation placement pass. Chooses dx/dy for note-like annotations without manual offsets and avoids note/mark/edge overlaps where possible.", "default": false }, "responsiveRules": { "type": "array", "description": "Semantic responsive transforms applied before chart-mode defaults." }, "mobileSemantics": { "type": "object", "description": "Phone/mobile contract consumed by audits, recipes, adapters, and agents." }, "mobileInteraction": { "type": [ "boolean", "object" ], "description": "Touch-first interaction policy for phone-sized chart slots." }, "maxDevicePixelRatio": { "type": "number", "description": "Maximum canvas backing-store DPR. Defaults to 3 on desktop and 2 on coarse-pointer/small-screen devices; canvases repaint when browser zoom or display density changes." }, "axisExtent": { "type": "string", "enum": [ "nice", "exact" ], "description": "Tick endpoint mode. \"nice\" rounds endpoints to readable values; \"exact\" pins the first and last tick to the actual data min and max with equidistant intermediates. Affects XY x/y axes and ordinal value axis only.", "default": "nice" }, "animate": { "type": [ "boolean", "object" ], "description": "Enable mark transitions (boolean or {duration?, easing?, intro?})." }, "loading": { "type": "boolean", "description": "Show loading skeleton / loadingContent." }, "hoverHighlight": { "type": "boolean", "description": "Dim non-hovered series/categories (requires colorBy string field)." }, "chartId": { "type": "string", "description": "Stable id for linked selection / observation / nav sync." }, "emphasis": { "type": "string", "enum": [ "primary", "secondary" ] }, "responsiveWidth": { "type": "boolean" }, "responsiveHeight": { "type": "boolean" }, "color": { "type": "string", "description": "Uniform mark fill (primitive styling)." }, "stroke": { "type": "string" }, "strokeWidth": { "type": "number" }, "opacity": { "type": "number" }, "data": { "type": "array" }, "fields": { "type": "array" } }, "required": [ "data", "fields" ] } } }, { "type": "function", "function": { "name": "MinimapChart", "description": "Overview + detail chart with linked zoom. Wraps an XY chart with a minimap navigation pane.", "parameters": { "type": "object", "properties": { "mode": { "type": "string", "enum": [ "primary", "context", "sparkline", "mobile" ], "description": "Display mode controlling default size, decoration, margins, labels, and interaction.", "default": "primary" }, "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object", "description": "Object margin. A side value of \"auto\" or null leaves that side available for auto-reservation." }, "className": { "type": "string" }, "title": { "type": "string", "description": "Visible chart title and the chart's accessible name." }, "description": { "type": "string", "description": "Concise accessible description that overrides the chart's generated aria-label." }, "summary": { "type": "string", "description": "Screen-reader-only summary of the chart's key takeaway; include keyboard interaction guidance when relevant." }, "accessibleTable": { "type": "boolean", "description": "Expose the chart data through Semiotic's screen-reader data table.", "default": true }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "legendInteraction": { "type": "string", "enum": [ "highlight", "isolate", "none" ], "description": "Legend interaction mode: highlight on hover, isolate on click, or none.", "default": "none" }, "legendPosition": { "type": "string", "enum": [ "right", "left", "top", "bottom" ], "description": "Position the legend beside or above/below the plot.", "default": "right" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": "string", "x-semiotic-runtime-types": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array", "object" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "object", "string" ], "description": "Tooltip: true/false, \"multi\", { mode: \"multi\", content? }, a custom function, or { fields, title } config. Multi mode shows every series at the hovered x; custom multi content receives allSeries/xValue.", "x-semiotic-runtime-types": [ "boolean", "function", "object", "string" ] }, "annotations": { "type": "array", "description": "Annotation objects to render on the chart. Each must have a `type` field. Position using your data field names (e.g. { type: \"widget\", month: \"Jan\", revenue: 500 }). Supported types: \"widget\" (arbitrary HTML/React content via foreignObject — v3 replacement for htmlAnnotationRules), \"label\" (callout with connector), \"callout\" (circle + label), \"text\" (plain label), \"y-threshold\" (horizontal reference line), \"x-threshold\" (vertical reference line), \"band\" (shaded y-region), \"enclose\" (circle around points), \"rect-enclose\" (rect around points), \"highlight\" (colored dots on filtered points), \"trend\" (regression line), \"envelope\" (upper/lower bounds), \"anomaly-band\" (mean ± stddev), \"forecast\" (extrapolated trend). Widget annotations accept: content (ReactNode), dx, dy, width, height, anchor (\"fixed\"|\"latest\"|\"sticky\"). Threshold annotations accept: value, label, color, strokeWidth, strokeDasharray. Enclose annotations accept: coordinates (array of data objects), label, color, padding.", "items": { "type": "object", "properties": { "type": { "type": "string", "enum": [ "widget", "label", "callout", "text", "bracket", "y-threshold", "x-threshold", "band", "enclose", "rect-enclose", "highlight", "trend", "envelope", "anomaly-band", "forecast" ], "description": "Annotation type" } }, "required": [ "type" ] } }, "autoPlaceAnnotations": { "type": [ "boolean", "object" ], "description": "Opt-in annotation placement pass. Chooses dx/dy for note-like annotations without manual offsets and avoids note/mark/edge overlaps where possible.", "default": false }, "responsiveRules": { "type": "array", "description": "Semantic responsive transforms applied before chart-mode defaults." }, "mobileSemantics": { "type": "object", "description": "Phone/mobile contract consumed by audits, recipes, adapters, and agents." }, "mobileInteraction": { "type": [ "boolean", "object" ], "description": "Touch-first interaction policy for phone-sized chart slots." }, "maxDevicePixelRatio": { "type": "number", "description": "Maximum canvas backing-store DPR. Defaults to 3 on desktop and 2 on coarse-pointer/small-screen devices; canvases repaint when browser zoom or display density changes." }, "axisExtent": { "type": "string", "enum": [ "nice", "exact" ], "description": "Tick endpoint mode. \"nice\" rounds endpoints to readable values; \"exact\" pins the first and last tick to the actual data min and max with equidistant intermediates. Affects XY x/y axes and ordinal value axis only.", "default": "nice" }, "animate": { "type": [ "boolean", "object" ], "description": "Enable mark transitions (boolean or {duration?, easing?, intro?})." }, "loading": { "type": "boolean", "description": "Show loading skeleton / loadingContent." }, "hoverHighlight": { "type": "boolean", "description": "Dim non-hovered series/categories (requires colorBy string field)." }, "chartId": { "type": "string", "description": "Stable id for linked selection / observation / nav sync." }, "emphasis": { "type": "string", "enum": [ "primary", "secondary" ] }, "responsiveWidth": { "type": "boolean" }, "responsiveHeight": { "type": "boolean" }, "color": { "type": "string", "description": "Uniform mark fill (primitive styling)." }, "stroke": { "type": "string" }, "strokeWidth": { "type": "number" }, "opacity": { "type": "number" }, "data": { "type": "array" } }, "required": [ "data" ] } } }, { "type": "function", "function": { "name": "ChoroplethMap", "description": "Geographic choropleth map with colored regions based on data values.", "parameters": { "type": "object", "properties": { "mode": { "type": "string", "enum": [ "primary", "context", "sparkline", "mobile" ], "description": "Display mode controlling default size, decoration, margins, labels, and interaction.", "default": "primary" }, "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object", "description": "Object margin. A side value of \"auto\" or null leaves that side available for auto-reservation." }, "className": { "type": "string" }, "title": { "type": "string", "description": "Visible chart title and the chart's accessible name." }, "description": { "type": "string", "description": "Concise accessible description that overrides the chart's generated aria-label." }, "summary": { "type": "string", "description": "Screen-reader-only summary of the chart's key takeaway; include keyboard interaction guidance when relevant." }, "accessibleTable": { "type": "boolean", "description": "Expose the chart data through Semiotic's screen-reader data table.", "default": true }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "legendInteraction": { "type": "string", "enum": [ "highlight", "isolate", "none" ], "description": "Legend interaction mode: highlight on hover, isolate on click, or none.", "default": "none" }, "legendPosition": { "type": "string", "enum": [ "right", "left", "top", "bottom" ], "description": "Position the legend beside or above/below the plot.", "default": "right" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": "string", "x-semiotic-runtime-types": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array" ] }, "tooltip": { "type": [ "boolean", "object", "string" ], "description": "Tooltip: true/false, \"multi\", { mode: \"multi\", content? }, a custom function, or { fields, title } config. Multi mode shows every series at the hovered x; custom multi content receives allSeries/xValue.", "x-semiotic-runtime-types": [ "boolean", "function", "object", "string" ] }, "annotations": { "type": "array", "description": "Annotation objects to render on the chart. Each must have a `type` field. Position using your data field names (e.g. { type: \"widget\", month: \"Jan\", revenue: 500 }). Supported types: \"widget\" (arbitrary HTML/React content via foreignObject — v3 replacement for htmlAnnotationRules), \"label\" (callout with connector), \"callout\" (circle + label), \"text\" (plain label), \"y-threshold\" (horizontal reference line), \"x-threshold\" (vertical reference line), \"band\" (shaded y-region), \"enclose\" (circle around points), \"rect-enclose\" (rect around points), \"highlight\" (colored dots on filtered points), \"trend\" (regression line), \"envelope\" (upper/lower bounds), \"anomaly-band\" (mean ± stddev), \"forecast\" (extrapolated trend). Widget annotations accept: content (ReactNode), dx, dy, width, height, anchor (\"fixed\"|\"latest\"|\"sticky\"). Threshold annotations accept: value, label, color, strokeWidth, strokeDasharray. Enclose annotations accept: coordinates (array of data objects), label, color, padding.", "items": { "type": "object", "properties": { "type": { "type": "string", "enum": [ "widget", "label", "callout", "text", "bracket", "y-threshold", "x-threshold", "band", "enclose", "rect-enclose", "highlight", "trend", "envelope", "anomaly-band", "forecast" ], "description": "Annotation type" } }, "required": [ "type" ] } }, "autoPlaceAnnotations": { "type": [ "boolean", "object" ], "description": "Opt-in annotation placement pass. Chooses dx/dy for note-like annotations without manual offsets and avoids note/mark/edge overlaps where possible.", "default": false }, "responsiveRules": { "type": "array", "description": "Semantic responsive transforms applied before chart-mode defaults." }, "mobileSemantics": { "type": "object", "description": "Phone/mobile contract consumed by audits, recipes, adapters, and agents." }, "mobileInteraction": { "type": [ "boolean", "object" ], "description": "Touch-first interaction policy for phone-sized chart slots." }, "maxDevicePixelRatio": { "type": "number", "description": "Maximum canvas backing-store DPR. Defaults to 3 on desktop and 2 on coarse-pointer/small-screen devices; canvases repaint when browser zoom or display density changes." }, "axisExtent": { "type": "string", "enum": [ "nice", "exact" ], "description": "Tick endpoint mode. \"nice\" rounds endpoints to readable values; \"exact\" pins the first and last tick to the actual data min and max with equidistant intermediates. Affects XY x/y axes and ordinal value axis only.", "default": "nice" }, "animate": { "type": [ "boolean", "object" ], "description": "Enable mark transitions (boolean or {duration?, easing?, intro?})." }, "loading": { "type": "boolean", "description": "Show loading skeleton / loadingContent." }, "hoverHighlight": { "type": "boolean", "description": "Dim non-hovered series/categories (requires colorBy string field)." }, "chartId": { "type": "string", "description": "Stable id for linked selection / observation / nav sync." }, "emphasis": { "type": "string", "enum": [ "primary", "secondary" ] }, "responsiveWidth": { "type": "boolean" }, "responsiveHeight": { "type": "boolean" }, "color": { "type": "string", "description": "Uniform mark fill (primitive styling)." }, "stroke": { "type": "string" }, "strokeWidth": { "type": "number" }, "opacity": { "type": "number" }, "areas": { "type": [ "array", "string" ], "description": "GeoJSON features or reference geography name" }, "valueAccessor": { "type": "string", "x-semiotic-runtime-types": [ "string", "function" ] }, "projection": { "type": "string", "default": "equalEarth" } }, "required": [ "areas" ] } } }, { "type": "function", "function": { "name": "ProportionalSymbolMap", "description": "Geographic map with sized symbols at point locations.", "parameters": { "type": "object", "properties": { "mode": { "type": "string", "enum": [ "primary", "context", "sparkline", "mobile" ], "description": "Display mode controlling default size, decoration, margins, labels, and interaction.", "default": "primary" }, "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object", "description": "Object margin. A side value of \"auto\" or null leaves that side available for auto-reservation." }, "className": { "type": "string" }, "title": { "type": "string", "description": "Visible chart title and the chart's accessible name." }, "description": { "type": "string", "description": "Concise accessible description that overrides the chart's generated aria-label." }, "summary": { "type": "string", "description": "Screen-reader-only summary of the chart's key takeaway; include keyboard interaction guidance when relevant." }, "accessibleTable": { "type": "boolean", "description": "Expose the chart data through Semiotic's screen-reader data table.", "default": true }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "legendInteraction": { "type": "string", "enum": [ "highlight", "isolate", "none" ], "description": "Legend interaction mode: highlight on hover, isolate on click, or none.", "default": "none" }, "legendPosition": { "type": "string", "enum": [ "right", "left", "top", "bottom" ], "description": "Position the legend beside or above/below the plot.", "default": "right" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": "string", "x-semiotic-runtime-types": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array", "object" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "object", "string" ], "description": "Tooltip: true/false, \"multi\", { mode: \"multi\", content? }, a custom function, or { fields, title } config. Multi mode shows every series at the hovered x; custom multi content receives allSeries/xValue.", "x-semiotic-runtime-types": [ "boolean", "function", "object", "string" ] }, "annotations": { "type": "array", "description": "Annotation objects to render on the chart. Each must have a `type` field. Position using your data field names (e.g. { type: \"widget\", month: \"Jan\", revenue: 500 }). Supported types: \"widget\" (arbitrary HTML/React content via foreignObject — v3 replacement for htmlAnnotationRules), \"label\" (callout with connector), \"callout\" (circle + label), \"text\" (plain label), \"y-threshold\" (horizontal reference line), \"x-threshold\" (vertical reference line), \"band\" (shaded y-region), \"enclose\" (circle around points), \"rect-enclose\" (rect around points), \"highlight\" (colored dots on filtered points), \"trend\" (regression line), \"envelope\" (upper/lower bounds), \"anomaly-band\" (mean ± stddev), \"forecast\" (extrapolated trend). Widget annotations accept: content (ReactNode), dx, dy, width, height, anchor (\"fixed\"|\"latest\"|\"sticky\"). Threshold annotations accept: value, label, color, strokeWidth, strokeDasharray. Enclose annotations accept: coordinates (array of data objects), label, color, padding.", "items": { "type": "object", "properties": { "type": { "type": "string", "enum": [ "widget", "label", "callout", "text", "bracket", "y-threshold", "x-threshold", "band", "enclose", "rect-enclose", "highlight", "trend", "envelope", "anomaly-band", "forecast" ], "description": "Annotation type" } }, "required": [ "type" ] } }, "autoPlaceAnnotations": { "type": [ "boolean", "object" ], "description": "Opt-in annotation placement pass. Chooses dx/dy for note-like annotations without manual offsets and avoids note/mark/edge overlaps where possible.", "default": false }, "responsiveRules": { "type": "array", "description": "Semantic responsive transforms applied before chart-mode defaults." }, "mobileSemantics": { "type": "object", "description": "Phone/mobile contract consumed by audits, recipes, adapters, and agents." }, "mobileInteraction": { "type": [ "boolean", "object" ], "description": "Touch-first interaction policy for phone-sized chart slots." }, "maxDevicePixelRatio": { "type": "number", "description": "Maximum canvas backing-store DPR. Defaults to 3 on desktop and 2 on coarse-pointer/small-screen devices; canvases repaint when browser zoom or display density changes." }, "axisExtent": { "type": "string", "enum": [ "nice", "exact" ], "description": "Tick endpoint mode. \"nice\" rounds endpoints to readable values; \"exact\" pins the first and last tick to the actual data min and max with equidistant intermediates. Affects XY x/y axes and ordinal value axis only.", "default": "nice" }, "animate": { "type": [ "boolean", "object" ], "description": "Enable mark transitions (boolean or {duration?, easing?, intro?})." }, "loading": { "type": "boolean", "description": "Show loading skeleton / loadingContent." }, "hoverHighlight": { "type": "boolean", "description": "Dim non-hovered series/categories (requires colorBy string field)." }, "chartId": { "type": "string", "description": "Stable id for linked selection / observation / nav sync." }, "emphasis": { "type": "string", "enum": [ "primary", "secondary" ] }, "responsiveWidth": { "type": "boolean" }, "responsiveHeight": { "type": "boolean" }, "color": { "type": "string", "description": "Uniform mark fill (primitive styling)." }, "stroke": { "type": "string" }, "strokeWidth": { "type": "number" }, "opacity": { "type": "number" }, "points": { "type": "array" }, "xAccessor": { "type": "string", "default": "lon", "x-semiotic-runtime-types": [ "string", "function" ] }, "yAccessor": { "type": "string", "default": "lat", "x-semiotic-runtime-types": [ "string", "function" ] }, "sizeBy": { "type": "string", "x-semiotic-runtime-types": [ "string", "function" ] }, "sizeRange": { "type": "array", "description": "Minimum and maximum symbol radius in pixels.", "default": [ 3, 30 ], "minItems": 2, "maxItems": 2, "items": { "type": "number" } }, "areas": { "type": [ "array", "string" ] } }, "required": [ "points" ] } } }, { "type": "function", "function": { "name": "FlowMap", "description": "Geographic flow map showing movement between locations with animated particles.", "parameters": { "type": "object", "properties": { "mode": { "type": "string", "enum": [ "primary", "context", "sparkline", "mobile" ], "description": "Display mode controlling default size, decoration, margins, labels, and interaction.", "default": "primary" }, "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object", "description": "Object margin. A side value of \"auto\" or null leaves that side available for auto-reservation." }, "className": { "type": "string" }, "title": { "type": "string", "description": "Visible chart title and the chart's accessible name." }, "description": { "type": "string", "description": "Concise accessible description that overrides the chart's generated aria-label." }, "summary": { "type": "string", "description": "Screen-reader-only summary of the chart's key takeaway; include keyboard interaction guidance when relevant." }, "accessibleTable": { "type": "boolean", "description": "Expose the chart data through Semiotic's screen-reader data table.", "default": true }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "legendInteraction": { "type": "string", "enum": [ "highlight", "isolate", "none" ], "description": "Legend interaction mode: highlight on hover, isolate on click, or none.", "default": "none" }, "legendPosition": { "type": "string", "enum": [ "right", "left", "top", "bottom" ], "description": "Position the legend beside or above/below the plot.", "default": "right" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": "string", "x-semiotic-runtime-types": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array", "object" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "object", "string" ], "description": "Tooltip: true/false, \"multi\", { mode: \"multi\", content? }, a custom function, or { fields, title } config. Multi mode shows every series at the hovered x; custom multi content receives allSeries/xValue.", "x-semiotic-runtime-types": [ "boolean", "function", "object", "string" ] }, "annotations": { "type": "array", "description": "Annotation objects to render on the chart. Each must have a `type` field. Position using your data field names (e.g. { type: \"widget\", month: \"Jan\", revenue: 500 }). Supported types: \"widget\" (arbitrary HTML/React content via foreignObject — v3 replacement for htmlAnnotationRules), \"label\" (callout with connector), \"callout\" (circle + label), \"text\" (plain label), \"y-threshold\" (horizontal reference line), \"x-threshold\" (vertical reference line), \"band\" (shaded y-region), \"enclose\" (circle around points), \"rect-enclose\" (rect around points), \"highlight\" (colored dots on filtered points), \"trend\" (regression line), \"envelope\" (upper/lower bounds), \"anomaly-band\" (mean ± stddev), \"forecast\" (extrapolated trend). Widget annotations accept: content (ReactNode), dx, dy, width, height, anchor (\"fixed\"|\"latest\"|\"sticky\"). Threshold annotations accept: value, label, color, strokeWidth, strokeDasharray. Enclose annotations accept: coordinates (array of data objects), label, color, padding.", "items": { "type": "object", "properties": { "type": { "type": "string", "enum": [ "widget", "label", "callout", "text", "bracket", "y-threshold", "x-threshold", "band", "enclose", "rect-enclose", "highlight", "trend", "envelope", "anomaly-band", "forecast" ], "description": "Annotation type" } }, "required": [ "type" ] } }, "autoPlaceAnnotations": { "type": [ "boolean", "object" ], "description": "Opt-in annotation placement pass. Chooses dx/dy for note-like annotations without manual offsets and avoids note/mark/edge overlaps where possible.", "default": false }, "responsiveRules": { "type": "array", "description": "Semantic responsive transforms applied before chart-mode defaults." }, "mobileSemantics": { "type": "object", "description": "Phone/mobile contract consumed by audits, recipes, adapters, and agents." }, "mobileInteraction": { "type": [ "boolean", "object" ], "description": "Touch-first interaction policy for phone-sized chart slots." }, "maxDevicePixelRatio": { "type": "number", "description": "Maximum canvas backing-store DPR. Defaults to 3 on desktop and 2 on coarse-pointer/small-screen devices; canvases repaint when browser zoom or display density changes." }, "axisExtent": { "type": "string", "enum": [ "nice", "exact" ], "description": "Tick endpoint mode. \"nice\" rounds endpoints to readable values; \"exact\" pins the first and last tick to the actual data min and max with equidistant intermediates. Affects XY x/y axes and ordinal value axis only.", "default": "nice" }, "animate": { "type": [ "boolean", "object" ], "description": "Enable mark transitions (boolean or {duration?, easing?, intro?})." }, "loading": { "type": "boolean", "description": "Show loading skeleton / loadingContent." }, "hoverHighlight": { "type": "boolean", "description": "Dim non-hovered series/categories (requires colorBy string field)." }, "chartId": { "type": "string", "description": "Stable id for linked selection / observation / nav sync." }, "emphasis": { "type": "string", "enum": [ "primary", "secondary" ] }, "responsiveWidth": { "type": "boolean" }, "responsiveHeight": { "type": "boolean" }, "color": { "type": "string", "description": "Uniform mark fill (primitive styling)." }, "stroke": { "type": "string" }, "strokeWidth": { "type": "number" }, "opacity": { "type": "number" }, "flows": { "type": "array" }, "nodes": { "type": "array" }, "valueAccessor": { "type": "string", "x-semiotic-runtime-types": [ "string", "function" ] }, "lineIdAccessor": { "type": "string", "x-semiotic-runtime-types": [ "string", "function" ] }, "pointRadius": { "type": "number", "description": "Node radius in pixels; defaults to 1.5 in sparkline mode.", "default": 5 } }, "required": [ "flows" ] } } }, { "type": "function", "function": { "name": "DistanceCartogram", "description": "Cartogram distorting geographic positions based on travel time or cost from a center point.", "parameters": { "type": "object", "properties": { "mode": { "type": "string", "enum": [ "primary", "context", "sparkline", "mobile" ], "description": "Display mode controlling default size, decoration, margins, labels, and interaction.", "default": "primary" }, "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object", "description": "Object margin. A side value of \"auto\" or null leaves that side available for auto-reservation." }, "className": { "type": "string" }, "title": { "type": "string", "description": "Visible chart title and the chart's accessible name." }, "description": { "type": "string", "description": "Concise accessible description that overrides the chart's generated aria-label." }, "summary": { "type": "string", "description": "Screen-reader-only summary of the chart's key takeaway; include keyboard interaction guidance when relevant." }, "accessibleTable": { "type": "boolean", "description": "Expose the chart data through Semiotic's screen-reader data table.", "default": true }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "legendInteraction": { "type": "string", "enum": [ "highlight", "isolate", "none" ], "description": "Legend interaction mode: highlight on hover, isolate on click, or none.", "default": "none" }, "legendPosition": { "type": "string", "enum": [ "right", "left", "top", "bottom" ], "description": "Position the legend beside or above/below the plot.", "default": "right" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": "string", "x-semiotic-runtime-types": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array", "object" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "object", "string" ], "description": "Tooltip: true/false, \"multi\", { mode: \"multi\", content? }, a custom function, or { fields, title } config. Multi mode shows every series at the hovered x; custom multi content receives allSeries/xValue.", "x-semiotic-runtime-types": [ "boolean", "function", "object", "string" ] }, "annotations": { "type": "array", "description": "Annotation objects to render on the chart. Each must have a `type` field. Position using your data field names (e.g. { type: \"widget\", month: \"Jan\", revenue: 500 }). Supported types: \"widget\" (arbitrary HTML/React content via foreignObject — v3 replacement for htmlAnnotationRules), \"label\" (callout with connector), \"callout\" (circle + label), \"text\" (plain label), \"y-threshold\" (horizontal reference line), \"x-threshold\" (vertical reference line), \"band\" (shaded y-region), \"enclose\" (circle around points), \"rect-enclose\" (rect around points), \"highlight\" (colored dots on filtered points), \"trend\" (regression line), \"envelope\" (upper/lower bounds), \"anomaly-band\" (mean ± stddev), \"forecast\" (extrapolated trend). Widget annotations accept: content (ReactNode), dx, dy, width, height, anchor (\"fixed\"|\"latest\"|\"sticky\"). Threshold annotations accept: value, label, color, strokeWidth, strokeDasharray. Enclose annotations accept: coordinates (array of data objects), label, color, padding.", "items": { "type": "object", "properties": { "type": { "type": "string", "enum": [ "widget", "label", "callout", "text", "bracket", "y-threshold", "x-threshold", "band", "enclose", "rect-enclose", "highlight", "trend", "envelope", "anomaly-band", "forecast" ], "description": "Annotation type" } }, "required": [ "type" ] } }, "autoPlaceAnnotations": { "type": [ "boolean", "object" ], "description": "Opt-in annotation placement pass. Chooses dx/dy for note-like annotations without manual offsets and avoids note/mark/edge overlaps where possible.", "default": false }, "responsiveRules": { "type": "array", "description": "Semantic responsive transforms applied before chart-mode defaults." }, "mobileSemantics": { "type": "object", "description": "Phone/mobile contract consumed by audits, recipes, adapters, and agents." }, "mobileInteraction": { "type": [ "boolean", "object" ], "description": "Touch-first interaction policy for phone-sized chart slots." }, "maxDevicePixelRatio": { "type": "number", "description": "Maximum canvas backing-store DPR. Defaults to 3 on desktop and 2 on coarse-pointer/small-screen devices; canvases repaint when browser zoom or display density changes." }, "axisExtent": { "type": "string", "enum": [ "nice", "exact" ], "description": "Tick endpoint mode. \"nice\" rounds endpoints to readable values; \"exact\" pins the first and last tick to the actual data min and max with equidistant intermediates. Affects XY x/y axes and ordinal value axis only.", "default": "nice" }, "animate": { "type": [ "boolean", "object" ], "description": "Enable mark transitions (boolean or {duration?, easing?, intro?})." }, "loading": { "type": "boolean", "description": "Show loading skeleton / loadingContent." }, "hoverHighlight": { "type": "boolean", "description": "Dim non-hovered series/categories (requires colorBy string field)." }, "chartId": { "type": "string", "description": "Stable id for linked selection / observation / nav sync." }, "emphasis": { "type": "string", "enum": [ "primary", "secondary" ] }, "responsiveWidth": { "type": "boolean" }, "responsiveHeight": { "type": "boolean" }, "color": { "type": "string", "description": "Uniform mark fill (primitive styling)." }, "stroke": { "type": "string" }, "strokeWidth": { "type": "number" }, "opacity": { "type": "number" }, "points": { "type": "array" }, "center": { "type": "array" }, "costAccessor": { "type": "string", "x-semiotic-runtime-types": [ "string", "function" ] }, "showRingLabels": { "type": "boolean", "description": "Show numeric distance-ring labels; defaults off in context and sparkline modes." }, "cartogramLayout": { "type": "string", "enum": [ "radial", "strip" ], "description": "Cost encoding: radial polar cartogram (default) or strip (Langren 1D cost axis). Sparkline mode defaults to strip." } }, "required": [ "points" ] } } }, { "type": "function", "function": { "name": "ProcessSankey", "description": "Temporal sankey with a real time axis. Edges carry startTime/endTime; nodes can declare an explicit xExtent lifetime. Use horizontal flow for operational timelines or vertical flow for history-river and lineage views.", "parameters": { "type": "object", "properties": { "mode": { "type": "string", "enum": [ "primary", "context", "sparkline", "mobile" ], "description": "Display mode controlling default size, decoration, margins, labels, and interaction.", "default": "primary" }, "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object", "description": "Object margin. A side value of \"auto\" or null leaves that side available for auto-reservation." }, "className": { "type": "string" }, "title": { "type": "string", "description": "Visible chart title and the chart's accessible name." }, "description": { "type": "string", "description": "Concise accessible description that overrides the chart's generated aria-label." }, "summary": { "type": "string", "description": "Screen-reader-only summary of the chart's key takeaway; include keyboard interaction guidance when relevant." }, "accessibleTable": { "type": "boolean", "description": "Expose the chart data through Semiotic's screen-reader data table.", "default": true }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "legendInteraction": { "type": "string", "enum": [ "highlight", "isolate", "none" ], "description": "Legend interaction mode: highlight on hover, isolate on click, or none.", "default": "none" }, "legendPosition": { "type": "string", "enum": [ "right", "left", "top", "bottom" ], "default": "right" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": "string", "x-semiotic-runtime-types": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array", "object" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "object", "string" ], "description": "Tooltip: true/false, \"multi\", { mode: \"multi\", content? }, a custom function, or { fields, title } config. Multi mode shows every series at the hovered x; custom multi content receives allSeries/xValue.", "x-semiotic-runtime-types": [ "boolean", "function", "object", "string" ] }, "annotations": { "type": "array", "description": "Annotation objects to render on the chart. Each must have a `type` field. Position using your data field names (e.g. { type: \"widget\", month: \"Jan\", revenue: 500 }). Supported types: \"widget\" (arbitrary HTML/React content via foreignObject — v3 replacement for htmlAnnotationRules), \"label\" (callout with connector), \"callout\" (circle + label), \"text\" (plain label), \"y-threshold\" (horizontal reference line), \"x-threshold\" (vertical reference line), \"band\" (shaded y-region), \"enclose\" (circle around points), \"rect-enclose\" (rect around points), \"highlight\" (colored dots on filtered points), \"trend\" (regression line), \"envelope\" (upper/lower bounds), \"anomaly-band\" (mean ± stddev), \"forecast\" (extrapolated trend). Widget annotations accept: content (ReactNode), dx, dy, width, height, anchor (\"fixed\"|\"latest\"|\"sticky\"). Threshold annotations accept: value, label, color, strokeWidth, strokeDasharray. Enclose annotations accept: coordinates (array of data objects), label, color, padding.", "items": { "type": "object", "properties": { "type": { "type": "string", "enum": [ "widget", "label", "callout", "text", "bracket", "y-threshold", "x-threshold", "band", "enclose", "rect-enclose", "highlight", "trend", "envelope", "anomaly-band", "forecast" ], "description": "Annotation type" } }, "required": [ "type" ] } }, "autoPlaceAnnotations": { "type": [ "boolean", "object" ], "description": "Opt-in annotation placement pass. Chooses dx/dy for note-like annotations without manual offsets and avoids note/mark/edge overlaps where possible.", "default": false }, "responsiveRules": { "type": "array", "description": "Semantic responsive transforms applied before chart-mode defaults." }, "mobileSemantics": { "type": "object", "description": "Phone/mobile contract consumed by audits, recipes, adapters, and agents." }, "mobileInteraction": { "type": [ "boolean", "object" ], "description": "Touch-first interaction policy for phone-sized chart slots." }, "maxDevicePixelRatio": { "type": "number", "description": "Maximum canvas backing-store DPR. Defaults to 3 on desktop and 2 on coarse-pointer/small-screen devices; canvases repaint when browser zoom or display density changes." }, "axisExtent": { "type": "string", "enum": [ "nice", "exact" ], "description": "Tick endpoint mode. \"nice\" rounds endpoints to readable values; \"exact\" pins the first and last tick to the actual data min and max with equidistant intermediates. Affects XY x/y axes and ordinal value axis only.", "default": "nice" }, "animate": { "type": [ "boolean", "object" ], "description": "Enable mark transitions (boolean or {duration?, easing?, intro?})." }, "loading": { "type": "boolean", "description": "Show loading skeleton / loadingContent." }, "hoverHighlight": { "type": "boolean", "description": "Dim non-hovered series/categories (requires colorBy string field)." }, "chartId": { "type": "string", "description": "Stable id for linked selection / observation / nav sync." }, "emphasis": { "type": "string", "enum": [ "primary", "secondary" ] }, "responsiveWidth": { "type": "boolean" }, "responsiveHeight": { "type": "boolean" }, "color": { "type": "string", "description": "Uniform mark fill (primitive styling)." }, "stroke": { "type": "string" }, "strokeWidth": { "type": "number" }, "opacity": { "type": "number" }, "edges": { "type": "array", "description": "Array of timed edge records with source, target, value, startTime, endTime. Omit for push-mode." }, "nodes": { "type": "array", "description": "Optional array of node objects. Nodes may carry an `xExtent: [start, end]` to bound the lane explicitly." }, "domain": { "type": "array", "description": "[tStart, tEnd] of the chart's time axis (required)." }, "axisTicks": { "type": "array", "description": "Optional [{ date, label }] tick array for the time axis." }, "sourceAccessor": { "type": "string", "default": "source", "x-semiotic-runtime-types": [ "string", "function" ] }, "targetAccessor": { "type": "string", "default": "target", "x-semiotic-runtime-types": [ "string", "function" ] }, "valueAccessor": { "type": "string", "default": "value", "x-semiotic-runtime-types": [ "string", "function" ] }, "nodeIdAccessor": { "type": "string", "default": "id", "x-semiotic-runtime-types": [ "string", "function" ] }, "nodeLabel": { "type": "string", "description": "Key or accessor for visible lane labels; defaults to nodeIdAccessor.", "x-semiotic-runtime-types": [ "string", "function" ] }, "startTimeAccessor": { "type": "string", "default": "startTime", "x-semiotic-runtime-types": [ "string", "function" ] }, "endTimeAccessor": { "type": "string", "default": "endTime", "x-semiotic-runtime-types": [ "string", "function" ] }, "systemInTimeAccessor": { "type": "string", "description": "Optional source-side inventory arrival time, before the ribbon departs. Values before the visible domain fade inward from its opening boundary.", "x-semiotic-runtime-types": [ "string", "function" ] }, "systemOutTimeAccessor": { "type": "string", "description": "Optional target-side inventory departure time, after the ribbon arrives.", "x-semiotic-runtime-types": [ "string", "function" ] }, "xExtentAccessor": { "type": "string", "default": "xExtent", "x-semiotic-runtime-types": [ "string", "function" ] }, "groupBy": { "type": "string", "description": "Optional node key/accessor. Equal non-empty values form contiguous, stream-like lane blocks with a zero-pixel internal gutter by default.", "x-semiotic-runtime-types": [ "string", "function" ] }, "edgeIdAccessor": { "type": "string", "default": "id", "x-semiotic-runtime-types": [ "string", "function" ] }, "orientation": { "type": "string", "enum": [ "horizontal", "vertical" ], "description": "Direction of time: left-to-right or top-to-bottom.", "default": "horizontal" }, "pairing": { "type": "string", "enum": [ "value", "temporal" ], "description": "Edge-side pairing strategy at transit nodes.", "default": "temporal" }, "packing": { "type": "string", "enum": [ "off", "reuse" ], "description": "Pack nodes with disjoint occupied-band windows into shared rows, favoring straight handoffs, matching process roles, and destination-coherent source feeders.", "default": "reuse" }, "laneOrder": { "type": "string", "enum": [ "insertion", "crossing-min", "inside-out", "crossing-min+inside-out" ], "default": "crossing-min" }, "maxValueScale": { "type": "number", "description": "Optional pixels-per-value cap that prevents sparse bands from inflating to fill the plot." }, "lanePlacement": { "type": "string", "enum": [ "stack", "hug" ], "description": "Use capped-scale slack to pull connected lanes together while preserving order and clearance. When hug (or a binding maxValueScale) is active, a bounded post-scale geometry refine re-scores adjacent lane order under rendered pixel/transit cost without raising crossings or exclusive-handoff span.", "default": "stack" }, "showLabels": { "type": [ "boolean", "string" ], "enum": [ "auto" ], "description": "Node labels: true, false, or density-budgeted auto. With auto, shed labels reappear under selection.", "default": true }, "labelPriorityAccessor": { "type": "string", "description": "Field (or React fn) for auto-label priority — higher values survive density shedding first." }, "maxLabels": { "type": "number", "description": "Optional hard cap on visible auto labels after the area budget." }, "selectionDatum": { "type": "string", "enum": [ "raw", "scene" ], "description": "Datum shape for selection/linkedHover predicates: raw author records (default) or full scene payload with __kind.", "default": "raw" }, "groupPadding": { "type": "number", "description": "Pixel gutter between adjacent slots in the same groupBy block.", "default": 0 }, "ribbonLane": { "type": "string", "enum": [ "source", "target", "both" ], "default": "both" }, "ribbonMinRun": { "type": [ "number", "string" ], "description": "Minimum rendered time-axis runway in pixels for **source-only feeder** ribbons (not a general minimum ribbon length). Use `auto` to adapt to lane distance. Only source-only feeders with proven stock/runway are affected; authored times and inventory remain unchanged.", "default": 0 }, "lifetimeMode": { "type": "string", "enum": [ "full", "half" ], "default": "half" }, "showLaneRails": { "type": "boolean", "default": false }, "showQualityReadout": { "type": "boolean", "default": false }, "edgeOpacity": { "type": "number", "default": 0.35 }, "styleRules": { "type": "array", "description": "Declarative StyleRule[] applied to node bands (raw node datum; fill may be a solid color or HatchFill — canvas pattern + SSR SVG pattern)." }, "layoutExecution": { "type": "string", "enum": [ "auto", "worker", "sync" ], "description": "Layout execution: auto (cost threshold), worker, or sync. SSR always sync.", "default": "auto" }, "layoutWorkerThreshold": { "type": "number", "description": "Override auto worker cost threshold for ProcessSankey packing/ordering." }, "layoutLoadingContent": { "type": [ "boolean", "object" ], "description": "Content while worker layout is pending. false suppresses." }, "showParticles": { "type": "boolean", "default": false }, "particleStyle": { "type": "object", "description": "ParticleStyle config — same shape as SankeyDiagram. Defaults from DEFAULT_PARTICLE_STYLE (radius 3, opacity 0.7, spawnRate 0.1, maxPerEdge 50)." } }, "required": [ "domain" ] } } }, { "type": "function", "function": { "name": "DifferenceChart", "description": "Two-series difference chart: fills the area between series A and series B with a color that switches at each crossover — A's color where A > B, B's color where B > A. Crossovers are linearly interpolated so segments meet at zero-width vertices. Both series can be drawn as overlay lines on top of the fill. Classic uses: temperature anomaly (actual vs. normal), forecast accuracy (actual vs. predicted), budget variance.", "parameters": { "type": "object", "properties": { "mode": { "type": "string", "enum": [ "primary", "context", "sparkline", "mobile" ], "description": "Display mode controlling default size, decoration, margins, labels, and interaction.", "default": "primary" }, "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object", "description": "Object margin. A side value of \"auto\" or null leaves that side available for auto-reservation." }, "className": { "type": "string" }, "title": { "type": "string", "description": "Visible chart title and the chart's accessible name." }, "description": { "type": "string", "description": "Concise accessible description that overrides the chart's generated aria-label." }, "summary": { "type": "string", "description": "Screen-reader-only summary of the chart's key takeaway; include keyboard interaction guidance when relevant." }, "accessibleTable": { "type": "boolean", "description": "Expose the chart data through Semiotic's screen-reader data table.", "default": true }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "legendInteraction": { "type": "string", "enum": [ "highlight", "isolate", "none" ], "description": "Legend interaction mode: highlight on hover, isolate on click, or none.", "default": "none" }, "legendPosition": { "type": "string", "enum": [ "right", "left", "top", "bottom" ], "description": "Position the legend beside or above/below the plot.", "default": "right" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": "string", "x-semiotic-runtime-types": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array", "object" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "object", "string" ], "description": "Tooltip: true/false, \"multi\", { mode: \"multi\", content? }, a custom function, or { fields, title } config. Multi mode shows every series at the hovered x; custom multi content receives allSeries/xValue.", "x-semiotic-runtime-types": [ "boolean", "function", "object", "string" ] }, "annotations": { "type": "array", "description": "Annotation objects to render on the chart. Each must have a `type` field. Position using your data field names (e.g. { type: \"widget\", month: \"Jan\", revenue: 500 }). Supported types: \"widget\" (arbitrary HTML/React content via foreignObject — v3 replacement for htmlAnnotationRules), \"label\" (callout with connector), \"callout\" (circle + label), \"text\" (plain label), \"y-threshold\" (horizontal reference line), \"x-threshold\" (vertical reference line), \"band\" (shaded y-region), \"enclose\" (circle around points), \"rect-enclose\" (rect around points), \"highlight\" (colored dots on filtered points), \"trend\" (regression line), \"envelope\" (upper/lower bounds), \"anomaly-band\" (mean ± stddev), \"forecast\" (extrapolated trend). Widget annotations accept: content (ReactNode), dx, dy, width, height, anchor (\"fixed\"|\"latest\"|\"sticky\"). Threshold annotations accept: value, label, color, strokeWidth, strokeDasharray. Enclose annotations accept: coordinates (array of data objects), label, color, padding.", "items": { "type": "object", "properties": { "type": { "type": "string", "enum": [ "widget", "label", "callout", "text", "bracket", "y-threshold", "x-threshold", "band", "enclose", "rect-enclose", "highlight", "trend", "envelope", "anomaly-band", "forecast" ], "description": "Annotation type" } }, "required": [ "type" ] } }, "autoPlaceAnnotations": { "type": [ "boolean", "object" ], "description": "Opt-in annotation placement pass. Chooses dx/dy for note-like annotations without manual offsets and avoids note/mark/edge overlaps where possible.", "default": false }, "responsiveRules": { "type": "array", "description": "Semantic responsive transforms applied before chart-mode defaults." }, "mobileSemantics": { "type": "object", "description": "Phone/mobile contract consumed by audits, recipes, adapters, and agents." }, "mobileInteraction": { "type": [ "boolean", "object" ], "description": "Touch-first interaction policy for phone-sized chart slots." }, "maxDevicePixelRatio": { "type": "number", "description": "Maximum canvas backing-store DPR. Defaults to 3 on desktop and 2 on coarse-pointer/small-screen devices; canvases repaint when browser zoom or display density changes." }, "axisExtent": { "type": "string", "enum": [ "nice", "exact" ], "description": "Tick endpoint mode. \"nice\" rounds endpoints to readable values; \"exact\" pins the first and last tick to the actual data min and max with equidistant intermediates. Affects XY x/y axes and ordinal value axis only.", "default": "nice" }, "animate": { "type": [ "boolean", "object" ], "description": "Enable mark transitions (boolean or {duration?, easing?, intro?})." }, "loading": { "type": "boolean", "description": "Show loading skeleton / loadingContent." }, "hoverHighlight": { "type": "boolean", "description": "Dim non-hovered series/categories (requires colorBy string field)." }, "chartId": { "type": "string", "description": "Stable id for linked selection / observation / nav sync." }, "emphasis": { "type": "string", "enum": [ "primary", "secondary" ] }, "responsiveWidth": { "type": "boolean" }, "responsiveHeight": { "type": "boolean" }, "color": { "type": "string", "description": "Uniform mark fill (primitive styling)." }, "stroke": { "type": "string" }, "strokeWidth": { "type": "number" }, "opacity": { "type": "number" }, "xLabel": { "type": "string" }, "yLabel": { "type": "string" }, "xScaleType": { "type": "string", "enum": [ "linear", "log", "time" ], "description": "x scale type. \"time\" builds a scaleTime (required for landmark ticks on timestamps)." }, "yScaleType": { "type": "string", "enum": [ "linear", "log", "time" ], "description": "y scale type." }, "data": { "type": "array", "description": "Array of `{x, a, b}` objects. Omit for push API mode." }, "xAccessor": { "type": "string", "description": "Key for x values", "default": "x", "x-semiotic-runtime-types": [ "string", "function" ] }, "seriesAAccessor": { "type": "string", "description": "Key for series A values", "default": "a", "x-semiotic-runtime-types": [ "string", "function" ] }, "seriesBAccessor": { "type": "string", "description": "Key for series B values", "default": "b", "x-semiotic-runtime-types": [ "string", "function" ] }, "seriesALabel": { "type": "string", "description": "Display label for series A in legend + tooltip", "default": "A" }, "seriesBLabel": { "type": "string", "description": "Display label for series B", "default": "B" }, "seriesAColor": { "type": "string", "description": "Fill color when series A is higher. Defaults to var(--semiotic-danger)." }, "seriesBColor": { "type": "string", "description": "Fill color when series B is higher. Defaults to var(--semiotic-info)." }, "showLines": { "type": "boolean", "description": "Draw the two series as overlay lines on top of the fill", "default": true }, "lineWidth": { "type": "number", "default": 1.5 }, "showPoints": { "type": "boolean", "description": "Show points at each data vertex on the overlay lines", "default": false }, "pointRadius": { "type": "number", "default": 3 }, "curve": { "type": "string", "enum": [ "linear", "monotoneX", "monotoneY", "step", "stepAfter", "stepBefore", "basis", "cardinal", "catmullRom" ], "default": "linear" }, "areaOpacity": { "type": "number", "description": "Difference fill opacity (0-1)", "default": 0.6 }, "gradientFill": { "type": "object", "description": "Tip-to-base gradient: { stops: [{ offset: 0-1, color?, opacity? }] }." }, "xExtent": { "type": "array", "description": "Fixed x domain `[min, max]`. Either bound may be `undefined`." }, "yExtent": { "type": "array", "description": "Fixed y domain `[min, max]`. Either bound may be `undefined`." }, "pointIdAccessor": { "type": "string", "description": "Stable ID for push-mode remove()/update()", "x-semiotic-runtime-types": [ "string", "function" ] }, "windowSize": { "type": "number", "description": "Max raw rows in the push buffer; older rows evict FIFO. Recommended for long-running streams." } }, "required": [] } } }, { "type": "function", "function": { "name": "TemporalHistogram", "description": "Static-data temporal histogram with binned aggregation. Use when data is a bounded array rather than a push stream.", "parameters": { "type": "object", "properties": { "data": { "type": "array", "description": "Array of temporal observations" }, "binSize": { "type": "number", "description": "Time bin size in milliseconds (required)" }, "size": { "type": "array", "description": "[width, height] in pixels" }, "width": { "type": "number", "description": "Alias for size[0]" }, "height": { "type": "number", "description": "Alias for size[1]" }, "margin": { "type": "object", "description": "Object margin. A side value of \"auto\" or null leaves that side available for auto-reservation." }, "className": { "type": "string" }, "timeAccessor": { "type": "string", "description": "Key for time/x values", "x-semiotic-runtime-types": [ "string", "function" ] }, "valueAccessor": { "type": "string", "description": "Key for y values", "x-semiotic-runtime-types": [ "string", "function" ] }, "direction": { "type": "string", "enum": [ "up", "down" ], "description": "Bar growth direction. Use \"down\" for mirrored histograms; explicit valueExtent is reversed.", "default": "up" }, "categoryAccessor": { "type": "string", "description": "Key for category grouping", "x-semiotic-runtime-types": [ "string", "function" ] }, "colors": { "type": "object", "description": "Map of category to color string" }, "timeExtent": { "type": "array" }, "valueExtent": { "type": "array" }, "extentPadding": { "type": "number" }, "showAxes": { "type": "boolean" }, "background": { "type": "string" }, "enableHover": { "type": [ "boolean", "object" ] }, "tooltip": { "type": "object", "description": "Tooltip content function or config", "x-semiotic-runtime-types": [ "function", "object" ] }, "annotations": { "type": "array", "description": "Annotation objects to render on the chart. Each must have a `type` field. Position using your data field names (e.g. { type: \"widget\", month: \"Jan\", revenue: 500 }). Supported types: \"widget\" (arbitrary HTML/React content via foreignObject — v3 replacement for htmlAnnotationRules), \"label\" (callout with connector), \"callout\" (circle + label), \"text\" (plain label), \"y-threshold\" (horizontal reference line), \"x-threshold\" (vertical reference line), \"band\" (shaded y-region), \"enclose\" (circle around points), \"rect-enclose\" (rect around points), \"highlight\" (colored dots on filtered points), \"trend\" (regression line), \"envelope\" (upper/lower bounds), \"anomaly-band\" (mean ± stddev), \"forecast\" (extrapolated trend). Widget annotations accept: content (ReactNode), dx, dy, width, height, anchor (\"fixed\"|\"latest\"|\"sticky\"). Threshold annotations accept: value, label, color, strokeWidth, strokeDasharray. Enclose annotations accept: coordinates (array of data objects), label, color, padding.", "items": { "type": "object", "properties": { "type": { "type": "string", "enum": [ "widget", "label", "callout", "text", "bracket", "y-threshold", "x-threshold", "band", "enclose", "rect-enclose", "highlight", "trend", "envelope", "anomaly-band", "forecast" ], "description": "Annotation type" } }, "required": [ "type" ] } }, "autoPlaceAnnotations": { "type": [ "boolean", "object" ], "description": "Opt-in annotation placement pass for note-like annotations without manual offsets." }, "responsiveRules": { "type": "array", "description": "Semantic responsive transforms applied before chart-mode defaults." }, "mobileSemantics": { "type": "object", "description": "Phone/mobile contract consumed by audits, recipes, adapters, and agents." }, "mobileInteraction": { "type": [ "boolean", "object" ], "description": "Touch-first interaction policy for phone-sized chart slots." }, "fill": { "type": "string" }, "stroke": { "type": "string" }, "strokeWidth": { "type": "number" }, "gap": { "type": "number" }, "linkedHover": { "type": [ "boolean", "string", "object" ] }, "linkedBrush": { "type": [ "string", "object" ], "description": "Cross-chart brush coordination via LinkedCharts. String: selection name. Object: { name, xField, yField }." }, "brush": { "type": [ "boolean", "string", "object" ], "description": "Enable brush selection. true defaults to { dimension: \"x\", snap: \"bin\" }. String: \"x\". Object: { dimension, snap: \"continuous\"|\"bin\", snapDuring }." } }, "required": [ "data", "binSize" ] } } }, { "type": "function", "function": { "name": "BigNumber", "description": "Focal-value display: one number, optionally with comparison / target / threshold zones (mapped to semantic theme roles) / four layout modes (tile / presentation / inline / thumbnail). Ships with NO chart-family dependency — embed your own Semiotic chart via two slots: `trendSlot` for wide / rectangular charts (LineChart, AreaChart) under the value, and `chartSlot` for square charts (DonutChart, PieChart, Scatterplot, Treemap) beside the value. The slot context exposes the resolved threshold colour + sentiment + push buffer so embedded charts can theme-link. Forward-looking POC for a future SingleValueFrame.", "parameters": { "type": "object", "properties": { "width": { "type": [ "number", "string" ], "description": "Reserved width in pixels (or any CSS length). Mode-keyed defaults: 280 (tile) / 540 (presentation) / unset (inline / thumbnail).", "default": 280 }, "height": { "type": [ "number", "string" ], "description": "Reserved height in pixels (or any CSS length). Mode-keyed defaults: 184 (tile) / 320 (presentation) / unset (inline / thumbnail).", "default": 184 }, "className": { "type": "string", "description": "Composed with the BEM root class on the outer container." }, "chartId": { "type": "string", "description": "Stable identifier surfaced on observation events." }, "description": { "type": "string", "description": "Override the auto-generated accessible label sentence." }, "summary": { "type": "string", "description": "Screen-reader-only supplement appended after the accessible label." }, "loading": { "type": "boolean", "description": "Show the loading skeleton overlay." }, "value": { "type": "number", "description": "The focal number this card exists to display" }, "label": { "type": "string", "description": "Top-line descriptor rendered above the value" }, "caption": { "type": "string", "description": "Secondary descriptor, smaller, below the label" }, "format": { "type": "string", "enum": [ "number", "currency", "percent", "compact", "duration" ], "description": "Number-format shortcut or React-only custom formatter. Percent treats the value as a ratio and multiplies by 100.", "default": "number", "x-semiotic-runtime-types": [ "string", "function" ] }, "locale": { "type": "string", "description": "BCP-47 locale for Intl.NumberFormat", "default": "en-US" }, "currency": { "type": "string", "description": "ISO 4217 code for format: \"currency\"", "default": "USD" }, "precision": { "type": "number", "description": "maximumFractionDigits passed to Intl.NumberFormat" }, "prefix": { "type": "string", "description": "Prepend to formatted value" }, "suffix": { "type": "string", "description": "Append to formatted value" }, "unit": { "type": "string", "description": "Unit label rendered after the value as small text (e.g. \"USD\", \"req/s\")" }, "comparison": { "type": "object", "description": "Comparison value: { value, label?, format?, direction? }. Drives the delta when explicit delta is not set." }, "target": { "type": "object", "description": "Target value: { value, label?, format?, direction? }. Renders \"X% of target\" next to the comparison row." }, "delta": { "type": "number", "description": "Explicit delta override; bypasses comparison-derived subtraction" }, "deltaFormat": { "type": "string", "enum": [ "number", "currency", "percent", "compact", "duration" ], "description": "Format the delta; defaults to format", "x-semiotic-runtime-types": [ "string", "function" ] }, "showDeltaPercent": { "type": "boolean", "description": "Render percent change next to absolute delta when a comparison is present", "default": true }, "direction": { "type": "string", "enum": [ "higher-is-better", "lower-is-better", "neutral" ], "description": "Default direction used to infer sentiment from the sign of the delta", "default": "higher-is-better" }, "sentiment": { "type": "string", "enum": [ "auto", "positive", "negative", "neutral" ], "description": "Force sentiment; \"auto\" infers from direction + delta sign", "default": "auto" }, "thresholds": { "type": "array", "description": "Threshold zones: [{ at, level, color?, label? }] ordered ascending by `at`. Resolved by highest `at` ≤ value. `level` maps to a semantic CSS variable (--semiotic-{success|warning|danger|info})." }, "chartSize": { "type": "number", "description": "Pixel size reserved for chartSlot (rendered as a square). Mode-keyed defaults: 44 (tile) / 80 (presentation) — sparkline scale; pass a larger value for a hero anchor." }, "windowSize": { "type": "number", "description": "Cap on the trend buffer when fed via push API", "default": 60 }, "mode": { "type": "string", "enum": [ "tile", "presentation", "inline", "thumbnail" ], "description": "Layout mode — chrome envelope around the value", "default": "tile" }, "align": { "type": "string", "enum": [ "start", "center", "end" ], "description": "Horizontal alignment within the card" }, "padding": { "type": [ "number", "object" ], "description": "Inner padding: number for uniform, or { top, right, bottom, left }" }, "emphasis": { "type": "string", "enum": [ "primary", "secondary" ], "description": "Visual emphasis hint; \"primary\" spans two ChartGrid columns" }, "color": { "type": "string", "description": "Override the value text colour. CSS variables work." }, "background": { "type": "string", "description": "Card background. CSS variables work." }, "borderColor": { "type": "string" }, "borderRadius": { "type": [ "number", "string" ] }, "animate": { "type": [ "boolean", "object" ], "description": "Tween between value changes. true = 300ms ease-out + intro. Object: { duration?, easing?: \"linear\"|\"ease-out\", intro? }" }, "stalenessThreshold": { "type": "number", "description": "Mark stale (dimmed) when no push occurs for this many ms" }, "staleLabel": { "type": "string", "default": "stale" } }, "required": [] } } }, { "type": "function", "function": { "name": "GaltonBoardChart", "description": "Physics-backed Galton board / Plinko-style dot distribution. Values enter deterministic bins and settle into a readable histogram-like projection; mechanical mode can generate a seeded no-data demonstration.", "parameters": { "type": "object", "properties": { "data": { "type": "array", "description": "Array of source records. Each record becomes one or more simulated bodies." }, "size": { "type": "array", "description": "[width, height] in pixels" }, "width": { "type": "number", "description": "Alias for size[0]" }, "height": { "type": "number", "description": "Alias for size[1]" }, "maxDevicePixelRatio": { "type": "number", "description": "Maximum canvas backing-store DPR; canvases repaint when browser zoom or display density changes." }, "className": { "type": "string" }, "title": { "type": "string" }, "description": { "type": "string", "description": "Concise accessible description that overrides the generated aria-label." }, "summary": { "type": "string", "description": "Screen-reader-only takeaway and interaction guidance." }, "accessibleTable": { "type": [ "boolean", "object" ], "description": "Expose source data through Semiotic's screen-reader data table." }, "chartId": { "type": "string", "description": "Stable chart identity for linked observation and navigation." }, "emphasis": { "type": "string", "enum": [ "primary", "secondary" ] }, "responsiveWidth": { "type": "boolean" }, "responsiveHeight": { "type": "boolean" }, "colorBy": { "type": "string", "description": "Categorical field or accessor used to color simulated bodies.", "x-semiotic-runtime-types": [ "string", "function" ] }, "seed": { "type": "number", "description": "Deterministic simulation seed.", "default": 1 }, "ballRadius": { "type": "number", "description": "Radius of each simulated circular body in pixels." }, "hoverRadius": { "type": "number", "description": "Pixel hit radius for body hover tooltips." }, "paused": { "type": "boolean", "description": "Pause the simulation at mount or on prop update." }, "tooltip": { "type": [ "boolean", "object" ], "description": "Tooltip content function/config, true for the default body tooltip, or false to disable hover tooltips.", "x-semiotic-runtime-types": [ "boolean", "function", "object" ] }, "valueAccessor": { "type": "string", "description": "Numeric field used to assign bodies to Galton bins.", "default": "value", "x-semiotic-runtime-types": [ "string", "function" ] }, "valueExtent": { "type": "array", "description": "Stable numeric [min, max] domain for binning and reference-line placement." }, "bins": { "type": "number", "description": "Number of landing bins / histogram columns.", "default": 21 }, "mode": { "type": "string", "enum": [ "sample", "mechanical" ], "description": "sample uses data values; mechanical emits a deterministic demonstration when no data is supplied.", "default": "sample" }, "pegRows": { "type": "number", "description": "Number of Bernoulli branch rows used by mechanical mode." }, "mechanicalCount": { "type": "number", "description": "Number of generated bodies in mechanical mode." }, "branchProbability": { "type": "number", "description": "Probability that each mechanical sample branches right at a peg.", "default": 0.5 }, "referenceLines": { "type": [ "object", "array" ], "description": "One or more value markers drawn over the board: { value, label, color, strokeWidth, strokeDasharray, labelPosition }." }, "rerunMS": { "type": [ "number", "null" ], "description": "Replay the seeded simulation this many milliseconds after it settles. Omit or pass null for a single run; zero replays on the next timer turn." }, "showProjection": { "type": "boolean", "description": "Whether companion docs or wrappers should show the settled projection." } }, "required": [] } } }, { "type": "function", "function": { "name": "EventDropChart", "description": "Physics-backed event-time drop chart for arrival replay, window barriers, and late/watermark handling.", "parameters": { "type": "object", "properties": { "data": { "type": "array", "description": "Array of source records. Each record becomes one or more simulated bodies." }, "size": { "type": "array", "description": "[width, height] in pixels" }, "width": { "type": "number", "description": "Alias for size[0]" }, "height": { "type": "number", "description": "Alias for size[1]" }, "maxDevicePixelRatio": { "type": "number", "description": "Maximum canvas backing-store DPR; canvases repaint when browser zoom or display density changes." }, "className": { "type": "string" }, "title": { "type": "string" }, "description": { "type": "string", "description": "Concise accessible description that overrides the generated aria-label." }, "summary": { "type": "string", "description": "Screen-reader-only takeaway and interaction guidance." }, "accessibleTable": { "type": [ "boolean", "object" ], "description": "Expose source data through Semiotic's screen-reader data table." }, "chartId": { "type": "string", "description": "Stable chart identity for linked observation and navigation." }, "emphasis": { "type": "string", "enum": [ "primary", "secondary" ] }, "responsiveWidth": { "type": "boolean" }, "responsiveHeight": { "type": "boolean" }, "colorBy": { "type": "string", "description": "Categorical field or accessor used to color simulated bodies.", "x-semiotic-runtime-types": [ "string", "function" ] }, "seed": { "type": "number", "description": "Deterministic simulation seed.", "default": 1 }, "ballRadius": { "type": "number", "description": "Radius of each simulated circular body in pixels." }, "hoverRadius": { "type": "number", "description": "Pixel hit radius for body hover tooltips." }, "paused": { "type": "boolean", "description": "Pause the simulation at mount or on prop update." }, "tooltip": { "type": [ "boolean", "object" ], "description": "Tooltip content function/config, true for the default body tooltip, or false to disable hover tooltips.", "x-semiotic-runtime-types": [ "boolean", "function", "object" ] }, "timeAccessor": { "type": "string", "description": "Event-time field used to assign drops to windows.", "default": "time", "x-semiotic-runtime-types": [ "string", "function" ] }, "arrivalAccessor": { "type": "string", "description": "Arrival-time field used to pace event ingestion.", "default": "arrivalTime", "x-semiotic-runtime-types": [ "string", "function" ] }, "windows": { "type": "object", "description": "Windowing config, currently { size, gapPolicy? }." }, "watermark": { "type": "object", "description": "Watermark config: { delay }, { value }, or a function of latest event time.", "x-semiotic-runtime-types": [ "object", "function" ] }, "timeExtent": { "type": "array", "description": "Optional stable event-time extent [min, max] for the window layout." }, "timeScale": { "type": "number", "description": "Playback speed for event-arrival pacing; higher is faster (1 = real event-time).", "default": 1 } }, "required": [ "data" ] } } }, { "type": "function", "function": { "name": "UnitPileChart", "description": "Physics-backed unit pile chart. Numeric values are unitized into repeated bodies that settle into category piles.", "parameters": { "type": "object", "properties": { "data": { "type": "array", "description": "Array of source records. Each record becomes one or more simulated bodies." }, "size": { "type": "array", "description": "[width, height] in pixels" }, "width": { "type": "number", "description": "Alias for size[0]" }, "height": { "type": "number", "description": "Alias for size[1]" }, "maxDevicePixelRatio": { "type": "number", "description": "Maximum canvas backing-store DPR; canvases repaint when browser zoom or display density changes." }, "className": { "type": "string" }, "title": { "type": "string" }, "description": { "type": "string", "description": "Concise accessible description that overrides the generated aria-label." }, "summary": { "type": "string", "description": "Screen-reader-only takeaway and interaction guidance." }, "accessibleTable": { "type": [ "boolean", "object" ], "description": "Expose source data through Semiotic's screen-reader data table." }, "chartId": { "type": "string", "description": "Stable chart identity for linked observation and navigation." }, "emphasis": { "type": "string", "enum": [ "primary", "secondary" ] }, "responsiveWidth": { "type": "boolean" }, "responsiveHeight": { "type": "boolean" }, "colorBy": { "type": "string", "description": "Categorical field or accessor used to color simulated bodies.", "x-semiotic-runtime-types": [ "string", "function" ] }, "seed": { "type": "number", "description": "Deterministic simulation seed.", "default": 1 }, "ballRadius": { "type": "number", "description": "Radius of each simulated circular body in pixels." }, "hoverRadius": { "type": "number", "description": "Pixel hit radius for body hover tooltips." }, "paused": { "type": "boolean", "description": "Pause the simulation at mount or on prop update." }, "tooltip": { "type": [ "boolean", "object" ], "description": "Tooltip content function/config, true for the default body tooltip, or false to disable hover tooltips.", "x-semiotic-runtime-types": [ "boolean", "function", "object" ] }, "categoryAccessor": { "type": "string", "description": "Categorical field that chooses the pile / bin.", "default": "category", "x-semiotic-runtime-types": [ "string", "function" ] }, "valueAccessor": { "type": "string", "description": "Numeric field converted into repeated unit bodies.", "default": "value", "x-semiotic-runtime-types": [ "string", "function" ] }, "mode": { "type": "string", "enum": [ "sample", "mechanical" ], "description": "sample uses data values; mechanical emits a deterministic no-data unit pile for design sketches.", "default": "sample" }, "mechanicalCount": { "type": "number", "description": "Number of generated unit bodies in mechanical mode." }, "mechanicalCategories": { "type": "array", "description": "Category labels generated by mechanical mode." }, "unitValue": { "type": "number", "description": "Value represented by one simulated body.", "default": 1 }, "showProjection": { "type": "boolean", "description": "Draw an exact settled-projection overlay behind the moving units so category totals remain readable.", "default": true }, "sediment": { "type": "boolean", "description": "Reserved for future sediment/aggregation mode." } }, "required": [] } } }, { "type": "function", "function": { "name": "CollisionSwarmChart", "description": "Physics-backed swarm / dot-strip chart. Quantitative records spring toward an x-position while collisions separate overlapping dots into a readable distribution.", "parameters": { "type": "object", "properties": { "data": { "type": "array", "description": "Array of source records. Each record becomes one or more simulated bodies." }, "size": { "type": "array", "description": "[width, height] in pixels" }, "width": { "type": "number", "description": "Alias for size[0]" }, "height": { "type": "number", "description": "Alias for size[1]" }, "maxDevicePixelRatio": { "type": "number", "description": "Maximum canvas backing-store DPR; canvases repaint when browser zoom or display density changes." }, "className": { "type": "string" }, "title": { "type": "string" }, "description": { "type": "string", "description": "Concise accessible description that overrides the generated aria-label." }, "summary": { "type": "string", "description": "Screen-reader-only takeaway and interaction guidance." }, "accessibleTable": { "type": [ "boolean", "object" ], "description": "Expose source data through Semiotic's screen-reader data table." }, "chartId": { "type": "string", "description": "Stable chart identity for linked observation and navigation." }, "emphasis": { "type": "string", "enum": [ "primary", "secondary" ] }, "responsiveWidth": { "type": "boolean" }, "responsiveHeight": { "type": "boolean" }, "colorBy": { "type": "string", "description": "Categorical field or accessor used to color simulated bodies.", "x-semiotic-runtime-types": [ "string", "function" ] }, "seed": { "type": "number", "description": "Deterministic simulation seed.", "default": 1 }, "ballRadius": { "type": "number", "description": "Radius of each simulated circular body in pixels." }, "hoverRadius": { "type": "number", "description": "Pixel hit radius for body hover tooltips." }, "paused": { "type": "boolean", "description": "Pause the simulation at mount or on prop update." }, "tooltip": { "type": [ "boolean", "object" ], "description": "Tooltip content function/config, true for the default body tooltip, or false to disable hover tooltips.", "x-semiotic-runtime-types": [ "boolean", "function", "object" ] }, "xAccessor": { "type": "string", "description": "Quantitative field that anchors each body along the x-axis.", "default": "x", "x-semiotic-runtime-types": [ "string", "function" ] }, "groupAccessor": { "type": "string", "description": "Optional categorical field that creates separate swarm lanes.", "x-semiotic-runtime-types": [ "string", "function" ] }, "radiusAccessor": { "type": "string", "description": "Optional numeric field used as per-body radius in pixels.", "x-semiotic-runtime-types": [ "string", "function" ] }, "pointRadius": { "type": "number", "description": "Fallback radius for each simulated body.", "default": 5 }, "xExtent": { "type": "array", "description": "Optional [min, max] domain for the quantitative axis." }, "collisionIterations": { "type": "number", "description": "Collision solver iterations per fixed physics step.", "default": 6 }, "settle": { "type": "boolean", "description": "Start bodies near their target positions for a calmer first paint or reduced-motion demo." }, "rerunMS": { "type": [ "number", "null" ], "description": "Replay the seeded simulation this many milliseconds after it settles. Omit or pass null for a single run; zero replays on the next timer turn." }, "showProjection": { "type": "boolean", "description": "Draw x-axis and group-lane guides behind the moving bodies.", "default": true } }, "required": [] } } }, { "type": "function", "function": { "name": "PacketFlowChart", "description": "Experimental physics-backed flow chart. Packets move along authored node coordinates or link paths while a static throughput layer keeps the route quantities readable.", "parameters": { "type": "object", "properties": { "mode": { "type": "string", "enum": [ "primary", "context", "sparkline", "mobile" ], "description": "Display mode controlling default size, decoration, margins, labels, and interaction.", "default": "primary" }, "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object", "description": "Object margin. A side value of \"auto\" or null leaves that side available for auto-reservation." }, "className": { "type": "string" }, "title": { "type": "string", "description": "Visible chart title and the chart's accessible name." }, "description": { "type": "string", "description": "Concise accessible description that overrides the chart's generated aria-label." }, "summary": { "type": "string", "description": "Screen-reader-only summary of the chart's key takeaway; include keyboard interaction guidance when relevant." }, "accessibleTable": { "type": "boolean", "description": "Expose the chart data through Semiotic's screen-reader data table.", "default": true }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "legendInteraction": { "type": "string", "enum": [ "highlight", "isolate", "none" ], "description": "Legend interaction mode: highlight on hover, isolate on click, or none.", "default": "none" }, "legendPosition": { "type": "string", "enum": [ "right", "left", "top", "bottom" ], "description": "Position the legend beside or above/below the plot.", "default": "right" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": "string", "x-semiotic-runtime-types": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array", "object" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "object", "string" ], "description": "Tooltip: true/false, \"multi\", { mode: \"multi\", content? }, a custom function, or { fields, title } config. Multi mode shows every series at the hovered x; custom multi content receives allSeries/xValue.", "x-semiotic-runtime-types": [ "boolean", "function", "object", "string" ] }, "annotations": { "type": "array", "description": "Annotation objects to render on the chart. Each must have a `type` field. Position using your data field names (e.g. { type: \"widget\", month: \"Jan\", revenue: 500 }). Supported types: \"widget\" (arbitrary HTML/React content via foreignObject — v3 replacement for htmlAnnotationRules), \"label\" (callout with connector), \"callout\" (circle + label), \"text\" (plain label), \"y-threshold\" (horizontal reference line), \"x-threshold\" (vertical reference line), \"band\" (shaded y-region), \"enclose\" (circle around points), \"rect-enclose\" (rect around points), \"highlight\" (colored dots on filtered points), \"trend\" (regression line), \"envelope\" (upper/lower bounds), \"anomaly-band\" (mean ± stddev), \"forecast\" (extrapolated trend). Widget annotations accept: content (ReactNode), dx, dy, width, height, anchor (\"fixed\"|\"latest\"|\"sticky\"). Threshold annotations accept: value, label, color, strokeWidth, strokeDasharray. Enclose annotations accept: coordinates (array of data objects), label, color, padding.", "items": { "type": "object", "properties": { "type": { "type": "string", "enum": [ "widget", "label", "callout", "text", "bracket", "y-threshold", "x-threshold", "band", "enclose", "rect-enclose", "highlight", "trend", "envelope", "anomaly-band", "forecast" ], "description": "Annotation type" } }, "required": [ "type" ] } }, "autoPlaceAnnotations": { "type": [ "boolean", "object" ], "description": "Opt-in annotation placement pass. Chooses dx/dy for note-like annotations without manual offsets and avoids note/mark/edge overlaps where possible.", "default": false }, "responsiveRules": { "type": "array", "description": "Semantic responsive transforms applied before chart-mode defaults." }, "mobileSemantics": { "type": "object", "description": "Phone/mobile contract consumed by audits, recipes, adapters, and agents." }, "mobileInteraction": { "type": [ "boolean", "object" ], "description": "Touch-first interaction policy for phone-sized chart slots." }, "maxDevicePixelRatio": { "type": "number", "description": "Maximum canvas backing-store DPR. Defaults to 3 on desktop and 2 on coarse-pointer/small-screen devices; canvases repaint when browser zoom or display density changes." }, "axisExtent": { "type": "string", "enum": [ "nice", "exact" ], "description": "Tick endpoint mode. \"nice\" rounds endpoints to readable values; \"exact\" pins the first and last tick to the actual data min and max with equidistant intermediates. Affects XY x/y axes and ordinal value axis only.", "default": "nice" }, "animate": { "type": [ "boolean", "object" ], "description": "Enable mark transitions (boolean or {duration?, easing?, intro?})." }, "loading": { "type": "boolean", "description": "Show loading skeleton / loadingContent." }, "hoverHighlight": { "type": "boolean", "description": "Dim non-hovered series/categories (requires colorBy string field)." }, "chartId": { "type": "string", "description": "Stable id for linked selection / observation / nav sync." }, "emphasis": { "type": "string", "enum": [ "primary", "secondary" ] }, "responsiveWidth": { "type": "boolean" }, "responsiveHeight": { "type": "boolean" }, "color": { "type": "string", "description": "Uniform mark fill (primitive styling)." }, "stroke": { "type": "string" }, "strokeWidth": { "type": "number" }, "opacity": { "type": "number" }, "size": { "type": "array", "description": "[width, height] in pixels" }, "nodes": { "type": "array", "description": "Route nodes with explicit x/y geometry. x/y may be normalized 0-1 coordinates or chart pixels." }, "links": { "type": "array", "description": "Flow links with source, target, throughput, and optional path geometry." }, "edges": { "type": "array", "description": "Alias for links, for network-shaped inputs." }, "data": { "type": "array", "description": "Alias for links when using chart-generator style data props." }, "nodeIdAccessor": { "type": "string", "description": "Key for node unique identifier.", "default": "id", "x-semiotic-runtime-types": [ "string", "function" ] }, "nodeXAccessor": { "type": "string", "description": "Node x-coordinate. Use 0-1 normalized values by default.", "default": "x", "x-semiotic-runtime-types": [ "string", "function" ] }, "nodeYAccessor": { "type": "string", "description": "Node y-coordinate. Use 0-1 normalized values by default.", "default": "y", "x-semiotic-runtime-types": [ "string", "function" ] }, "sourceAccessor": { "type": "string", "description": "Link source node id.", "default": "source", "x-semiotic-runtime-types": [ "string", "function" ] }, "targetAccessor": { "type": "string", "description": "Link target node id.", "default": "target", "x-semiotic-runtime-types": [ "string", "function" ] }, "throughputAccessor": { "type": "string", "description": "Numeric throughput field that controls pipe width and packet count.", "default": "value", "x-semiotic-runtime-types": [ "string", "function" ] }, "pathAccessor": { "type": "string", "description": "Optional link path as [{x,y}, ...] or [[x,y], ...].", "default": "path", "x-semiotic-runtime-types": [ "string", "function" ] }, "coordinateMode": { "type": "string", "enum": [ "auto", "normalized", "pixels" ], "description": "How node and path coordinates are mapped into the plot area.", "default": "auto" }, "particleRate": { "type": "number", "description": "Packets generated per throughput unit before maxParticles downsampling.", "default": 0.16 }, "maxParticles": { "type": "number", "description": "Maximum live packets generated for the initial flow scene.", "default": 180 }, "particleRadius": { "type": "number", "description": "Packet body radius in pixels.", "default": 4 }, "flowSpeed": { "type": "number", "description": "Initial packet velocity along each authored route.", "default": 90 }, "pathConstraint": { "type": "string", "enum": [ "path", "none" ], "description": "Whether live packets are steered along authored route paths.", "default": "path" }, "reducedMotion": { "type": "boolean", "description": "Start packets on their route positions and pause the simulation.", "default": false }, "showStaticFlow": { "type": "boolean", "description": "Draw the route/pipe throughput layer behind animated packets.", "default": true }, "showNodeLabels": { "type": "boolean", "default": true }, "showSensors": { "type": "boolean", "description": "Draw destination/node proximity sensors used for observation events.", "default": false }, "paused": { "type": "boolean", "description": "Pause the physics simulation.", "default": false }, "seed": { "type": "number", "description": "Deterministic seed for packet jitter and initial flow.", "default": 1 } }, "required": [] } } }, { "type": "function", "function": { "name": "GauntletChart", "description": "Physics-backed compound-plan gauntlet. A project core carries tethered positive/negative property bodies through timed gate events; settled projection is viability and outcome, not trajectories.", "parameters": { "type": "object", "properties": { "data": { "type": "array", "description": "Array of source records. Each record becomes one or more simulated bodies." }, "size": { "type": "array", "description": "[width, height] in pixels" }, "width": { "type": "number", "description": "Alias for size[0]" }, "height": { "type": "number", "description": "Alias for size[1]" }, "maxDevicePixelRatio": { "type": "number", "description": "Maximum canvas backing-store DPR; canvases repaint when browser zoom or display density changes." }, "className": { "type": "string" }, "title": { "type": "string" }, "description": { "type": "string", "description": "Concise accessible description that overrides the generated aria-label." }, "summary": { "type": "string", "description": "Screen-reader-only takeaway and interaction guidance." }, "accessibleTable": { "type": [ "boolean", "object" ], "description": "Expose source data through Semiotic's screen-reader data table." }, "chartId": { "type": "string", "description": "Stable chart identity for linked observation and navigation." }, "emphasis": { "type": "string", "enum": [ "primary", "secondary" ] }, "responsiveWidth": { "type": "boolean" }, "responsiveHeight": { "type": "boolean" }, "colorBy": { "type": "string", "description": "Categorical field or accessor used to color simulated bodies.", "x-semiotic-runtime-types": [ "string", "function" ] }, "seed": { "type": "number", "description": "Deterministic simulation seed.", "default": 1 }, "ballRadius": { "type": "number", "description": "Radius of each simulated circular body in pixels." }, "hoverRadius": { "type": "number", "description": "Pixel hit radius for body hover tooltips." }, "paused": { "type": "boolean", "description": "Pause the simulation at mount or on prop update." }, "tooltip": { "type": [ "boolean", "object" ], "description": "Tooltip content function/config, true for the default body tooltip, or false to disable hover tooltips.", "x-semiotic-runtime-types": [ "boolean", "function", "object" ] }, "positiveProperties": { "type": "array", "description": "Optional lift/value property definitions attached to each project core. Omit or pass an empty array for negative-only compound bodies.", "default": [] }, "negativeProperties": { "type": "array", "description": "Drag/cost property definitions attached to each project core." }, "gates": { "type": "array", "description": "Named process gates along the route, with optional shared FIFO capacity." }, "events": { "type": "array", "description": "Timed gate effects that add/pop properties and set outcomes.", "x-semiotic-runtime-types": [ "array", "function" ] }, "startTimeAccessor": { "type": "string", "description": "Optional per-project simulation second used as the local event-timeline origin.", "x-semiotic-runtime-types": [ "string", "function" ] }, "onCapacityChange": { "description": "Receives visit-aware queue work, wait, overflow, throughput, utilization, and pressure snapshots.", "x-semiotic-runtime-types": [ "function" ] }, "crashDetection": { "type": "boolean", "description": "Treat the crash line as a live failure trigger.", "default": true }, "rerunMS": { "type": [ "number", "null" ], "description": "Replay the full compound simulation this many milliseconds after it settles. Omit or pass null for a single run; zero replays on the next timer turn." }, "showChrome": { "type": "boolean", "description": "Draw route, socket, and graveyard chrome.", "default": true }, "showProjection": { "type": "boolean", "description": "Draw settled viability/outcome strip.", "default": true }, "showTethers": { "type": "boolean", "description": "Draw tethers between cores and property bodies.", "default": true }, "coreForceMode": { "type": "string", "enum": [ "route", "net" ], "description": "Core-body vertical force model: authored route guidance or net lift/drag drift.", "default": "route" }, "terminalBehavior": { "type": "string", "enum": [ "outcome", "hold-last" ], "default": "outcome" } }, "required": [ "negativeProperties" ] } } }, { "type": "function", "function": { "name": "ProcessFlowChart", "description": "Physics-backed multi-body process flow. Work items move through ordered stages with optional capacity, pressure, portals, absorb sinks, and feature groups that complete only when every member is absorbed.", "parameters": { "type": "object", "properties": { "data": { "type": "array", "description": "Array of source records. Each record becomes one or more simulated bodies." }, "size": { "type": "array", "description": "[width, height] in pixels" }, "width": { "type": "number", "description": "Alias for size[0]" }, "height": { "type": "number", "description": "Alias for size[1]" }, "maxDevicePixelRatio": { "type": "number", "description": "Maximum canvas backing-store DPR; canvases repaint when browser zoom or display density changes." }, "className": { "type": "string" }, "title": { "type": "string" }, "description": { "type": "string", "description": "Concise accessible description that overrides the generated aria-label." }, "summary": { "type": "string", "description": "Screen-reader-only takeaway and interaction guidance." }, "accessibleTable": { "type": [ "boolean", "object" ], "description": "Expose source data through Semiotic's screen-reader data table." }, "chartId": { "type": "string", "description": "Stable chart identity for linked observation and navigation." }, "emphasis": { "type": "string", "enum": [ "primary", "secondary" ] }, "responsiveWidth": { "type": "boolean" }, "responsiveHeight": { "type": "boolean" }, "colorBy": { "type": "string", "description": "Categorical field or accessor used to color simulated bodies.", "x-semiotic-runtime-types": [ "string", "function" ] }, "seed": { "type": "number", "description": "Deterministic seed for placement jitter.", "default": 1 }, "ballRadius": { "type": "number", "description": "Fallback body radius.", "default": 6 }, "hoverRadius": { "type": "number", "description": "Pixel hit radius for body hover tooltips." }, "paused": { "type": "boolean", "description": "Pause the simulation at mount or on prop update." }, "tooltip": { "type": [ "boolean", "object" ], "description": "Tooltip content function/config, true for the default body tooltip, or false to disable hover tooltips.", "x-semiotic-runtime-types": [ "boolean", "function", "object" ] }, "stages": { "type": "array", "description": "Ordered process stages: { id, label?, force?, damping?, capacity?, pressure?, portal?, absorb? }." }, "stageAccessor": { "type": "string", "description": "Field or accessor for each work item's current stage id.", "default": "stage", "x-semiotic-runtime-types": [ "string", "function" ] }, "idAccessor": { "type": "string", "description": "Stable work-item id.", "x-semiotic-runtime-types": [ "string", "function" ] }, "groupBy": { "type": "string", "description": "Optional feature/group key. Groups complete when all members reach an absorb stage.", "x-semiotic-runtime-types": [ "string", "function" ] }, "groupLabelAccessor": { "type": "string", "description": "Display label for group anchors.", "x-semiotic-runtime-types": [ "string", "function" ] }, "workAccessor": { "type": "string", "description": "Work-units field stamped for capacity metadata.", "x-semiotic-runtime-types": [ "string", "function" ] }, "radiusAccessor": { "type": "string", "description": "Optional per-body radius in pixels.", "x-semiotic-runtime-types": [ "string", "function" ] }, "groupCompletion": { "type": "string", "enum": [ "allAbsorbed", "none" ], "description": "How feature groups report completion.", "default": "allAbsorbed when groupBy is set" }, "groupAnchorAlong": { "type": "number", "description": "0–1 position along the lane for group anchors." }, "showProjection": { "type": "boolean", "description": "Draw settled stage-count bars.", "default": true }, "showChrome": { "type": "boolean", "description": "Draw stage labels, capacity notes, and group anchors.", "default": true }, "settle": { "type": "boolean", "description": "Start bodies at stage targets for a calmer first paint." } }, "required": [ "stages" ] } } }, { "type": "function", "function": { "name": "CrucibleChart", "description": "Physics-backed authored treatment chart. A bounded source charge passes through explicit phases and events into declared product molds and reason-labelled outlets; physics presents formation and separation but never discovers the program or products.", "parameters": { "type": "object", "properties": { "data": { "type": "array", "description": "Array of source records. Each record becomes one or more simulated bodies." }, "size": { "type": "array", "description": "[width, height] in pixels" }, "width": { "type": "number", "description": "Alias for size[0]" }, "height": { "type": "number", "description": "Alias for size[1]" }, "maxDevicePixelRatio": { "type": "number", "description": "Maximum canvas backing-store DPR; canvases repaint when browser zoom or display density changes." }, "className": { "type": "string" }, "title": { "type": "string" }, "description": { "type": "string", "description": "Accessible description of the authored charge, treatment, and terminal accounting." }, "summary": { "type": "string", "description": "Screen-reader summary of the final products, outlets, and any conservation result." }, "accessibleTable": { "type": [ "boolean", "object" ], "description": "Expose source data through Semiotic's screen-reader data table." }, "chartId": { "type": "string", "description": "Stable chart identity for linked observation and navigation." }, "emphasis": { "type": "string", "enum": [ "primary", "secondary" ] }, "responsiveWidth": { "type": "boolean" }, "responsiveHeight": { "type": "boolean" }, "colorBy": { "type": "string", "description": "Color sources by category, status, outlet, product, or a categorical accessor.", "default": "category", "x-semiotic-runtime-types": [ "string", "function" ] }, "seed": { "type": [ "number", "string" ], "description": "Deterministic placement seed. It cannot change events, products, or destinations.", "default": 1 }, "ballRadius": { "type": "number", "description": "Radius of each simulated circular body in pixels." }, "hoverRadius": { "type": "number", "description": "Pixel hit radius for body hover tooltips." }, "paused": { "type": "boolean", "description": "Pause semantic playback without altering authored time or terminal accounting.", "default": false }, "tooltip": { "type": [ "boolean", "object" ], "description": "Tooltip content function/config, true for the default body tooltip, or false to disable hover tooltips.", "x-semiotic-runtime-types": [ "boolean", "function", "object" ] }, "phases": { "type": "array", "description": "Required ordered furnace program. Supply unique phase ids, positive durations, labels, and optional authored motion/intensity; phases are never inferred from data.", "minItems": 1, "items": { "type": "object", "properties": { "id": { "type": "string" }, "duration": { "type": "number", "exclusiveMinimum": 0 }, "label": { "type": "string" }, "description": { "type": "string" }, "intensity": { "type": "number" }, "motion": { "type": "string", "enum": [ "charge", "mix", "hold", "press", "bind", "separate", "pour", "quench" ] }, "color": { "type": "string" }, "metrics": { "type": "object" } }, "required": [ "id", "duration" ], "additionalProperties": false } }, "products": { "type": "array", "description": "Declared product molds referenced by combine, contribute, complete-product, and split effects. Products are never inferred from collisions or flat rows.", "items": { "type": "object", "properties": { "id": { "type": "string" }, "label": { "type": "string" }, "description": { "type": "string" }, "category": { "type": "string" }, "amount": { "type": "number", "minimum": 0 }, "color": { "type": "string" }, "metrics": { "type": "object", "additionalProperties": { "type": "number" } }, "outletId": { "type": "string" }, "order": { "type": "number" } }, "required": [ "id" ], "additionalProperties": false } }, "events": { "type": "array", "description": "Serializable authored event tape. Each event has a stable id, a time or phase/progress position, and explicit effects.", "items": { "type": "object", "properties": { "id": { "type": "string" }, "at": { "oneOf": [ { "type": "object", "properties": { "time": { "type": "number", "minimum": 0 } }, "required": [ "time" ], "additionalProperties": false }, { "type": "object", "properties": { "phaseId": { "type": "string" }, "progress": { "type": "number", "minimum": 0, "maximum": 1 } }, "required": [ "phaseId" ], "additionalProperties": false } ] }, "effects": { "type": "array", "items": { "oneOf": [ { "type": "object", "description": "Change the explicit semantic state of selected source components.", "properties": { "type": { "const": "set-state" }, "select": { "type": "object", "properties": { "ids": { "type": "array", "items": { "type": "string" }, "minItems": 1 }, "categories": { "type": "array", "items": { "type": "string" }, "minItems": 1 }, "statuses": { "type": "array", "items": { "type": "string", "enum": [ "queued", "active", "transformed", "consumed", "retained", "ejected", "failed", "recovered" ] }, "minItems": 1 }, "outletIds": { "type": "array", "items": { "type": "string" }, "minItems": 1 }, "count": { "type": "integer", "minimum": 0 } }, "additionalProperties": false }, "state": { "type": "string", "enum": [ "queued", "active", "transformed", "retained", "ejected", "failed", "recovered" ] }, "outletId": { "type": "string" }, "reason": { "type": "string" }, "metricsDelta": { "type": "object", "additionalProperties": { "type": "number" } } }, "required": [ "type", "select", "state" ], "additionalProperties": false }, { "type": "object", "description": "Author a visible relation; physics never discovers one.", "properties": { "type": { "const": "set-relation" }, "relation": { "type": "object", "properties": { "id": { "type": "string" }, "sourceIds": { "type": "array", "items": { "type": "string" }, "minItems": 2 }, "label": { "type": "string" }, "category": { "type": "string" }, "strength": { "type": "number" }, "metrics": { "type": "object", "additionalProperties": { "type": "number" } } }, "required": [ "id", "sourceIds" ], "additionalProperties": false } }, "required": [ "type", "relation" ], "additionalProperties": false }, { "type": "object", "description": "Resolve previously authored relations.", "properties": { "type": { "const": "resolve-relation" }, "relationIds": { "type": "array", "items": { "type": "string" }, "minItems": 1 }, "resolution": { "type": "string", "enum": [ "combined", "rejected", "expired" ] }, "reason": { "type": "string" } }, "required": [ "type", "relationIds", "resolution" ], "additionalProperties": false }, { "type": "object", "description": "Combine named sources into a declared product. Set complete=false before later contribute effects.", "properties": { "type": { "const": "combine" }, "sourceIds": { "type": "array", "items": { "type": "string" }, "minItems": 1 }, "productId": { "type": "string" }, "basisRelationIds": { "type": "array", "items": { "type": "string" }, "minItems": 1 }, "loss": { "type": "object", "properties": { "amount": { "type": "number", "minimum": 0 }, "metrics": { "type": "object", "additionalProperties": { "type": "number" } }, "label": { "type": "string" } }, "additionalProperties": false }, "complete": { "type": "boolean", "default": true } }, "required": [ "type", "sourceIds", "productId" ], "additionalProperties": false }, { "type": "object", "description": "Add named sources to an explicitly forming product.", "properties": { "type": { "const": "contribute" }, "sourceIds": { "type": "array", "items": { "type": "string" }, "minItems": 1 }, "productId": { "type": "string" }, "basisRelationIds": { "type": "array", "items": { "type": "string" }, "minItems": 1 }, "loss": { "type": "object", "properties": { "amount": { "type": "number", "minimum": 0 }, "metrics": { "type": "object", "additionalProperties": { "type": "number" } }, "label": { "type": "string" } }, "additionalProperties": false } }, "required": [ "type", "sourceIds", "productId" ], "additionalProperties": false }, { "type": "object", "description": "Complete a forming product and optionally route it to a declared outlet.", "properties": { "type": { "const": "complete-product" }, "productId": { "type": "string" }, "outletId": { "type": "string" }, "reason": { "type": "string" } }, "required": [ "type", "productId" ], "additionalProperties": false }, { "type": "object", "description": "Split one named source into explicit product allocations.", "properties": { "type": { "const": "split" }, "sourceId": { "type": "string" }, "products": { "type": "array", "items": { "type": "object", "properties": { "productId": { "type": "string" }, "amount": { "type": "number", "minimum": 0 }, "metrics": { "type": "object", "additionalProperties": { "type": "number" } } }, "required": [ "productId" ], "additionalProperties": false }, "minItems": 1 }, "loss": { "type": "object", "properties": { "amount": { "type": "number", "minimum": 0 }, "metrics": { "type": "object", "additionalProperties": { "type": "number" } }, "label": { "type": "string" } }, "additionalProperties": false } }, "required": [ "type", "sourceId", "products" ], "additionalProperties": false }, { "type": "object", "description": "Route selected source components to a declared outlet with a reason.", "properties": { "type": { "const": "eject" }, "select": { "type": "object", "properties": { "ids": { "type": "array", "items": { "type": "string" }, "minItems": 1 }, "categories": { "type": "array", "items": { "type": "string" }, "minItems": 1 }, "statuses": { "type": "array", "items": { "type": "string", "enum": [ "queued", "active", "transformed", "consumed", "retained", "ejected", "failed", "recovered" ] }, "minItems": 1 }, "outletIds": { "type": "array", "items": { "type": "string" }, "minItems": 1 }, "count": { "type": "integer", "minimum": 0 } }, "additionalProperties": false }, "outletId": { "type": "string" }, "state": { "type": "string", "enum": [ "ejected", "failed", "retained", "recovered" ] }, "reason": { "type": "string" } }, "required": [ "type", "select", "outletId" ], "additionalProperties": false }, { "type": "object", "description": "Apply an explicit numeric metric delta to the run, sources, or products.", "properties": { "type": { "const": "set-metric" }, "target": { "oneOf": [ { "const": "run" }, { "type": "object", "properties": { "components": { "type": "object", "properties": { "ids": { "type": "array", "items": { "type": "string" }, "minItems": 1 }, "categories": { "type": "array", "items": { "type": "string" }, "minItems": 1 }, "statuses": { "type": "array", "items": { "type": "string", "enum": [ "queued", "active", "transformed", "consumed", "retained", "ejected", "failed", "recovered" ] }, "minItems": 1 }, "outletIds": { "type": "array", "items": { "type": "string" }, "minItems": 1 }, "count": { "type": "integer", "minimum": 0 } }, "additionalProperties": false } }, "required": [ "components" ], "additionalProperties": false }, { "type": "object", "properties": { "productIds": { "type": "array", "items": { "type": "string" }, "minItems": 1 } }, "required": [ "productIds" ], "additionalProperties": false } ] }, "metricsDelta": { "type": "object", "additionalProperties": { "type": "number" } } }, "required": [ "type", "target", "metricsDelta" ], "additionalProperties": false }, { "type": "object", "description": "Record an authored run-level outcome and optional summary.", "properties": { "type": { "const": "set-outcome" }, "outcome": { "type": "string" }, "summary": { "type": "string" } }, "required": [ "type", "outcome" ], "additionalProperties": false } ] }, "minItems": 1 }, "label": { "type": "string" }, "description": { "type": "string" }, "summary": { "type": "string" } }, "required": [ "id", "at", "effects" ], "additionalProperties": false } }, "outlets": { "type": "array", "description": "Explicit reason-labelled destinations referenced by product completions and eject effects.", "items": { "type": "object", "properties": { "id": { "type": "string" }, "label": { "type": "string" }, "description": { "type": "string" }, "side": { "type": "string", "enum": [ "left", "right", "bottom" ] }, "color": { "type": "string" }, "order": { "type": "number" } }, "required": [ "id" ], "additionalProperties": false } }, "idAccessor": { "type": "string", "description": "Stable source-component id. Event selectors and product provenance reference these resolved ids.", "default": "id", "x-semiotic-runtime-types": [ "string", "function" ] }, "labelAccessor": { "type": "string", "description": "Human-readable source-component label.", "default": "label", "x-semiotic-runtime-types": [ "string", "function" ] }, "categoryAccessor": { "type": "string", "description": "Categorical source field used for color and projection grouping.", "default": "category", "x-semiotic-runtime-types": [ "string", "function" ] }, "amountAccessor": { "type": "string", "description": "Optional non-negative amount conserved through explicit product, loss, and outlet accounting.", "x-semiotic-runtime-types": [ "string", "function" ] }, "metricsAccessor": { "type": "string", "description": "Optional per-source numeric metric map used by authored effects and evidence.", "x-semiotic-runtime-types": [ "string", "function" ] }, "initialStateAccessor": { "type": "string", "description": "Optional initial semantic component status; defaults to active.", "x-semiotic-runtime-types": [ "string", "function" ] }, "metrics": { "type": "object", "description": "Run-level numeric metrics present before the event tape begins." }, "amountLabel": { "type": "string", "description": "Display unit for source, product, loss, and conservation amounts." }, "conservation": { "type": [ "boolean", "object" ], "description": "Optional exact amount/metric balance check, or false to disable it." }, "projection": { "type": "object", "description": "Settled truth layer: { groupBy: status|outlet|category|product, measure: count|amount|metric, order?, showInputBaseline?, showDelta? }." }, "playback": { "type": "string", "enum": [ "replay", "snapshot" ], "description": "Replay the authored tape, or render one deterministic snapshot without intermediate animation.", "default": "replay" }, "snapshotAt": { "type": [ "number", "object" ], "description": "Snapshot time in semantic seconds or { phaseId, progress? }; used only with playback=snapshot." }, "controls": { "type": [ "boolean", "object" ], "description": "Built-in play/pause, reset, phase-step, timeline, and speed controls.", "default": false }, "playbackRate": { "type": "number", "description": "Positive wall-clock multiplier for authored semantic playback; 0.5 is half speed and 2 is double speed.", "default": 1 }, "rerunMS": { "type": [ "number", "null" ], "description": "Replay from a fresh deterministic mount this many milliseconds after settling. Null or omission disables looping; zero uses the next timer turn." }, "bodyRadius": { "type": "number", "description": "Fixed source-body radius. Per-row radius accessors are outside the bounded V1 contract.", "default": 7 }, "radiusRange": { "type": "array", "description": "Minimum and maximum source-body radii when amountAccessor drives area.", "default": [ 5, 18 ] }, "showBonds": { "type": "boolean", "description": "Draw authored provisional relations and product-member bonds.", "default": true }, "showChrome": { "type": "boolean", "description": "Draw the phase rail, vessel, declared molds, and reason-labelled outlets.", "default": true }, "showProjection": { "type": "boolean", "description": "Draw the exact settled projection alongside the physical treatment.", "default": true }, "initialSpawnPacing": { "type": "object", "description": "Optional presentation-only pacing for the initial source charge." }, "loading": { "type": "boolean", "description": "Show a loading state instead of starting the authored run." } }, "required": [ "data", "phases" ] } } }, { "type": "function", "function": { "name": "BumpChart", "description": "Ranked series trajectories across ordered or time-based columns, with optional magnitude-encoded ribbons.", "parameters": { "type": "object", "properties": { "mode": { "type": "string", "enum": [ "primary", "context", "sparkline", "mobile" ], "description": "Display mode controlling default size, decoration, margins, labels, and interaction.", "default": "primary" }, "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object", "description": "Object margin. A side value of \"auto\" or null leaves that side available for auto-reservation." }, "className": { "type": "string" }, "title": { "type": "string", "description": "Visible chart title and the chart's accessible name." }, "description": { "type": "string", "description": "Concise accessible description that overrides the chart's generated aria-label." }, "summary": { "type": "string", "description": "Screen-reader-only summary of the chart's key takeaway; include keyboard interaction guidance when relevant." }, "accessibleTable": { "type": "boolean", "description": "Expose the chart data through Semiotic's screen-reader data table.", "default": true }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "legendInteraction": { "type": "string", "enum": [ "highlight", "isolate", "none" ], "default": "none" }, "legendPosition": { "type": "string", "enum": [ "right", "left", "top", "bottom" ], "default": "right" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": "string", "x-semiotic-runtime-types": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array", "object" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "object", "string" ], "description": "Tooltip: true/false, \"multi\", { mode: \"multi\", content? }, a custom function, or { fields, title } config. Multi mode shows every series at the hovered x; custom multi content receives allSeries/xValue.", "x-semiotic-runtime-types": [ "boolean", "function", "object", "string" ] }, "annotations": { "type": "array", "description": "Annotation objects to render on the chart. Each must have a `type` field. Position using your data field names (e.g. { type: \"widget\", month: \"Jan\", revenue: 500 }). Supported types: \"widget\" (arbitrary HTML/React content via foreignObject — v3 replacement for htmlAnnotationRules), \"label\" (callout with connector), \"callout\" (circle + label), \"text\" (plain label), \"y-threshold\" (horizontal reference line), \"x-threshold\" (vertical reference line), \"band\" (shaded y-region), \"enclose\" (circle around points), \"rect-enclose\" (rect around points), \"highlight\" (colored dots on filtered points), \"trend\" (regression line), \"envelope\" (upper/lower bounds), \"anomaly-band\" (mean ± stddev), \"forecast\" (extrapolated trend). Widget annotations accept: content (ReactNode), dx, dy, width, height, anchor (\"fixed\"|\"latest\"|\"sticky\"). Threshold annotations accept: value, label, color, strokeWidth, strokeDasharray. Enclose annotations accept: coordinates (array of data objects), label, color, padding.", "items": { "type": "object", "properties": { "type": { "type": "string", "enum": [ "widget", "label", "callout", "text", "bracket", "y-threshold", "x-threshold", "band", "enclose", "rect-enclose", "highlight", "trend", "envelope", "anomaly-band", "forecast" ], "description": "Annotation type" } }, "required": [ "type" ] } }, "autoPlaceAnnotations": { "type": [ "boolean", "object" ], "description": "Opt-in annotation placement pass. Chooses dx/dy for note-like annotations without manual offsets and avoids note/mark/edge overlaps where possible.", "default": false }, "responsiveRules": { "type": "array", "description": "Semantic responsive transforms applied before chart-mode defaults." }, "mobileSemantics": { "type": "object", "description": "Phone/mobile contract consumed by audits, recipes, adapters, and agents." }, "mobileInteraction": { "type": [ "boolean", "object" ], "description": "Touch-first interaction policy for phone-sized chart slots." }, "maxDevicePixelRatio": { "type": "number", "description": "Maximum canvas backing-store DPR. Defaults to 3 on desktop and 2 on coarse-pointer/small-screen devices; canvases repaint when browser zoom or display density changes." }, "axisExtent": { "type": "string", "enum": [ "nice", "exact" ], "description": "Tick endpoint mode. \"nice\" rounds endpoints to readable values; \"exact\" pins the first and last tick to the actual data min and max with equidistant intermediates. Affects XY x/y axes and ordinal value axis only.", "default": "nice" }, "animate": { "type": [ "boolean", "object" ], "description": "Enable mark transitions (boolean or {duration?, easing?, intro?})." }, "loading": { "type": "boolean", "description": "Show loading skeleton / loadingContent." }, "hoverHighlight": { "type": [ "boolean", "string" ], "enum": [ "series" ], "default": true }, "chartId": { "type": "string", "description": "Stable id for linked selection / observation / nav sync." }, "emphasis": { "type": "string", "enum": [ "primary", "secondary" ] }, "responsiveWidth": { "type": "boolean" }, "responsiveHeight": { "type": "boolean" }, "color": { "type": "string", "description": "Uniform mark fill (primitive styling)." }, "stroke": { "type": "string" }, "strokeWidth": { "type": "number" }, "opacity": { "type": "number" }, "data": { "type": "array", "description": "Flat observations containing one magnitude per series and ranking column." }, "xAccessor": { "type": "string", "description": "Ordered or temporal ranking-column accessor.", "default": "x", "x-semiotic-runtime-types": [ "string", "function" ] }, "yAccessor": { "type": "string", "description": "Numeric magnitude used to calculate rank and ribbon width.", "default": "y", "x-semiotic-runtime-types": [ "string", "function" ] }, "xLabel": { "type": "string" }, "yLabel": { "type": "string", "default": "Rank" }, "lineBy": { "type": "string", "description": "Series identity accessor.", "default": "series", "x-semiotic-runtime-types": [ "string", "function" ] }, "rankDirection": { "type": "string", "enum": [ "descending", "ascending" ], "default": "descending" }, "ribbon": { "type": "boolean", "description": "Encode the original magnitude as trajectory width.", "default": false }, "curve": { "type": "string", "enum": [ "smooth", "linear" ], "default": "smooth" }, "ribbonSizeRange": { "type": "array", "description": "Minimum and maximum full ribbon width in pixels.", "default": [ 4, 28 ] }, "samplesPerSegment": { "type": "number", "default": 12 }, "lineWidth": { "type": "number", "description": "Fixed trajectory width when ribbon is false.", "default": 3 }, "highlightTop": { "type": "number", "description": "Use categorical colors for the N series with the best overall mean rank." }, "neutralColor": { "type": "string", "description": "Color for trajectories outside highlightTop. Defaults to the theme's secondary text color." }, "ribbonOpacity": { "type": "number", "default": 0.82 }, "lineOpacity": { "type": "number", "default": 0.9 }, "showPoints": { "type": "boolean", "default": false }, "pointRadius": { "type": "number", "default": 3 }, "showLabels": { "type": [ "boolean", "string" ], "enum": [ "start", "end", "both" ], "default": true }, "showAxes": { "type": "boolean", "default": true } }, "required": [ "data" ] } } }, { "type": "function", "function": { "name": "ChainReactionChart", "description": "Physics-backed dependency chain reaction. Tasks are placed by workstream lane and dependency depth; a completed task releases one delivery ball per outgoing dependency, and a downstream task arms only once every prerequisite ball has arrived. The settled reading is task state plus each blocker's downstream reach.", "parameters": { "type": "object", "properties": { "data": { "type": "array", "description": "Array of source records. Each record becomes one or more simulated bodies." }, "size": { "type": "array", "description": "[width, height] in pixels" }, "width": { "type": "number", "description": "Alias for size[0]" }, "height": { "type": "number", "description": "Alias for size[1]" }, "maxDevicePixelRatio": { "type": "number", "description": "Maximum canvas backing-store DPR; canvases repaint when browser zoom or display density changes." }, "className": { "type": "string" }, "title": { "type": "string" }, "description": { "type": "string", "description": "Concise accessible description that overrides the generated aria-label." }, "summary": { "type": "string", "description": "Screen-reader-only takeaway and interaction guidance." }, "accessibleTable": { "type": [ "boolean", "object" ], "description": "Expose source data through Semiotic's screen-reader data table." }, "chartId": { "type": "string", "description": "Stable chart identity for linked observation and navigation." }, "emphasis": { "type": "string", "enum": [ "primary", "secondary" ] }, "responsiveWidth": { "type": "boolean" }, "responsiveHeight": { "type": "boolean" }, "colorBy": { "type": "string", "description": "Categorical field or accessor used to color simulated bodies.", "x-semiotic-runtime-types": [ "string", "function" ] }, "seed": { "type": "number", "description": "Deterministic seed for delivery-ball motion.", "default": 31 }, "ballRadius": { "type": "number", "description": "Radius of each simulated circular body in pixels." }, "hoverRadius": { "type": "number", "description": "Pixel hit radius for body hover tooltips." }, "paused": { "type": "boolean", "description": "Pause the simulation at mount or on prop update." }, "tooltip": { "type": [ "boolean", "object" ], "description": "Tooltip content function/config, true for the default body tooltip, or false to disable hover tooltips.", "x-semiotic-runtime-types": [ "boolean", "function", "object" ] }, "taskIDAccessor": { "type": "string", "description": "Stable task id. Dependency arrays reference these resolved ids.", "x-semiotic-runtime-types": [ "string", "function" ] }, "labelAccessor": { "type": "string", "description": "Human-readable task name used in labels and the data table.", "x-semiotic-runtime-types": [ "string", "function" ] }, "laneAccessor": { "type": "string", "description": "Workstream the task belongs to. Lanes become the chart's columns.", "x-semiotic-runtime-types": [ "string", "function" ] }, "dependencyAccessor": { "type": "string", "description": "Array of prerequisite task ids. Edges are never inferred; a task with the wrong prerequisites reads as a different claim.", "x-semiotic-runtime-types": [ "string", "function" ] }, "startAccessor": { "type": "string", "description": "Planned start time (number or Date).", "x-semiotic-runtime-types": [ "string", "function" ] }, "endAccessor": { "type": "string", "description": "Planned end time (number or Date).", "x-semiotic-runtime-types": [ "string", "function" ] }, "progressAccessor": { "type": "string", "description": "Fractional completion 0–1, shown on the task body.", "x-semiotic-runtime-types": [ "string", "function" ] }, "statusAccessor": { "type": "string", "description": "Authored task status (done / blocked / waiting / active). Completion is an explicit data event, never something the simulation discovers.", "x-semiotic-runtime-types": [ "string", "function" ] }, "completionTimeAccessor": { "type": "string", "description": "When the task actually completed. Drives replay ordering against currentTime.", "x-semiotic-runtime-types": [ "string", "function" ] }, "blockerAccessor": { "type": "string", "description": "Reason this task is blocked. A blocked task never arms its downstream dependents.", "x-semiotic-runtime-types": [ "string", "function" ] }, "milestoneAccessor": { "type": "string", "description": "Marks a task as a milestone for emphasis.", "x-semiotic-runtime-types": [ "string", "function" ] }, "mode": { "type": "string", "enum": [ "snapshot", "replay", "mechanical" ], "description": "snapshot derives the settled state at currentTime without animating; replay animates deliveries forward from the earliest recorded completion; mechanical demonstrates the apparatus.", "default": "snapshot" }, "insight": { "type": "string", "enum": [ "none", "blocker-amplification" ], "description": "Which derived reading to surface. blocker-amplification reports how many unfinished tasks and lanes each blocker reaches.", "default": "blocker-amplification" }, "currentTime": { "type": [ "number", "object" ], "description": "Clock position used to derive the settled state (number or Date)." }, "controls": { "type": [ "boolean", "array" ], "description": "Replay control buttons: true for all, or a subset of play / pause / step / reset / settle." }, "mechanism": { "type": "string", "enum": [ "domino-ball" ], "description": "Delivery mechanism used to represent a satisfied prerequisite.", "default": "domino-ball" }, "orientation": { "type": "string", "enum": [ "vertical" ], "description": "Lane orientation. Lanes run as vertical columns.", "default": "vertical" }, "reducedMotion": { "type": "string", "enum": [ "settle" ], "description": "Force the settled reading instead of a replay. The frame also honors prefers-reduced-motion automatically." } }, "required": [ "data", "taskIDAccessor", "labelAccessor", "laneAccessor", "dependencyAccessor" ] } } } ] }