{ "$schema": "https://json-schema.org/draft/2020-12/schema", "name": "semiotic", "version": "3.5.3", "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": { "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object" }, "className": { "type": "string" }, "title": { "type": "string" }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "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" ] } }, "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" }, "xLabel": { "type": "string" }, "yLabel": { "type": "string" }, "data": { "type": "array", "description": "Array of data objects" }, "xAccessor": { "type": [ "string", "function" ], "description": "Key or accessor function for x-axis values", "default": "x" }, "yAccessor": { "type": [ "string", "function" ], "description": "Key or accessor function for y-axis values", "default": "y" }, "lineBy": { "type": [ "string", "function" ], "description": "Key to group data into separate lines" }, "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 }, "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 }, "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: [...]`." } }, "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": { "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object" }, "className": { "type": "string" }, "title": { "type": "string" }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "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" ] } }, "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" }, "xLabel": { "type": "string" }, "yLabel": { "type": "string" }, "data": { "type": "array", "description": "Array of data objects" }, "xAccessor": { "type": [ "string", "function" ], "description": "Key for x-axis values", "default": "x" }, "yAccessor": { "type": [ "string", "function" ], "description": "Key for y-axis values", "default": "y" }, "areaBy": { "type": [ "string", "function" ], "description": "Key to group data into separate areas" }, "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" }, "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 }, "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." } }, "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": { "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object" }, "className": { "type": "string" }, "title": { "type": "string" }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "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" ] } }, "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" }, "xLabel": { "type": "string" }, "yLabel": { "type": "string" }, "data": { "type": "array", "description": "Array of data objects" }, "xAccessor": { "type": [ "string", "function" ], "default": "x" }, "yAccessor": { "type": [ "string", "function" ], "default": "y" }, "areaBy": { "type": [ "string", "function" ], "description": "Key to group data into stacked areas" }, "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 }, "normalize": { "type": "boolean", "description": "Normalize stacks to 100%", "default": false } }, "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": { "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object" }, "className": { "type": "string" }, "title": { "type": "string" }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "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" ] } }, "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" }, "xLabel": { "type": "string" }, "yLabel": { "type": "string" }, "data": { "type": "array", "description": "Array of data objects" }, "xAccessor": { "type": [ "string", "function" ], "default": "x" }, "yAccessor": { "type": [ "string", "function" ], "default": "y" }, "sizeBy": { "type": [ "string", "function" ], "description": "Key for variable point sizing" }, "sizeRange": { "type": "array", "description": "Min and max radius for sizeBy scaling", "default": [ 3, 15 ] }, "pointRadius": { "type": "number", "description": "Fixed point radius", "default": 5 }, "pointOpacity": { "type": "number", "default": 0.8 }, "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": { "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object" }, "className": { "type": "string" }, "title": { "type": "string" }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "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" ] } }, "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" }, "xLabel": { "type": "string" }, "yLabel": { "type": "string" }, "data": { "type": "array", "description": "Array of data objects" }, "xAccessor": { "type": [ "string", "function" ], "default": "x" }, "yAccessor": { "type": [ "string", "function" ], "default": "y" }, "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": "Configuration for the four quadrants: { topRight, topLeft, bottomRight, bottomLeft }, each with { label, color, opacity? }" }, "showQuadrantLabels": { "type": "boolean", "default": true }, "quadrantLabelSize": { "type": "number", "default": 12 }, "sizeBy": { "type": [ "string", "function" ], "description": "Key for variable point sizing" }, "sizeRange": { "type": "array", "default": [ 3, 15 ] }, "pointRadius": { "type": "number", "default": 5 }, "pointOpacity": { "type": "number", "default": 0.8 } }, "required": [ "quadrants" ] } } }, { "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": { "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object" }, "className": { "type": "string" }, "title": { "type": "string" }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array" ] }, "tooltip": { "type": [ "boolean", "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" ] } }, "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" }, "xLabel": { "type": "string" }, "yLabel": { "type": "string" }, "data": { "type": "array", "description": "Array of data objects shared by both series" }, "xAccessor": { "type": [ "string", "function" ], "description": "Key for x values", "default": "x" }, "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": { "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object" }, "className": { "type": "string" }, "title": { "type": "string" }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "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" ] } }, "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" }, "xLabel": { "type": "string" }, "yLabel": { "type": "string" }, "data": { "type": "array" }, "xAccessor": { "type": [ "string", "function" ], "default": "x" }, "highAccessor": { "type": [ "string", "function" ], "description": "Required. Upper bound (candlestick high or range top).", "default": "high" }, "lowAccessor": { "type": [ "string", "function" ], "description": "Required. Lower bound (candlestick low or range bottom).", "default": "low" }, "openAccessor": { "type": [ "string", "function" ], "description": "Optional. Pair with closeAccessor for OHLC; omit both to render a range chart." }, "closeAccessor": { "type": [ "string", "function" ], "description": "Optional. See openAccessor." }, "candlestickStyle": { "type": "object", "description": "Style overrides." }, "mode": { "type": "string", "enum": [ "primary", "context", "sparkline" ] } }, "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": { "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object" }, "className": { "type": "string" }, "title": { "type": "string" }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "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" ] } }, "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" }, "xLabel": { "type": "string" }, "yLabel": { "type": "string" }, "data": { "type": "array", "description": "Array of data objects" }, "sizeBy": { "type": [ "string", "function" ], "description": "Key for bubble size (required)" }, "xAccessor": { "type": [ "string", "function" ], "default": "x" }, "yAccessor": { "type": [ "string", "function" ], "default": "y" }, "sizeRange": { "type": "array", "default": [ 5, 40 ] }, "bubbleOpacity": { "type": "number", "default": 0.6 }, "bubbleStrokeWidth": { "type": "number", "default": 1 }, "bubbleStrokeColor": { "type": "string", "default": "white" }, "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": { "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object" }, "className": { "type": "string" }, "title": { "type": "string" }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": [ "string", "function" ] }, "colorScheme": { "type": "string", "enum": [ "blues", "reds", "greens", "viridis", "custom" ] }, "tooltip": { "type": [ "boolean", "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" ] } }, "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" }, "xLabel": { "type": "string" }, "yLabel": { "type": "string" }, "data": { "type": "array", "description": "Array of data objects with x, y, and value" }, "xAccessor": { "type": [ "string", "function" ], "default": "x" }, "yAccessor": { "type": [ "string", "function" ], "default": "y" }, "valueAccessor": { "type": [ "string", "function" ], "description": "Key for the cell value", "default": "value" }, "showValues": { "type": "boolean", "description": "Display numeric values in cells", "default": false }, "valueFormat": { "type": "function" }, "cellBorderColor": { "type": "string", "default": "#fff" }, "cellBorderWidth": { "type": "number", "default": 1 }, "legendPosition": { "type": "string", "enum": [ "right", "left", "top", "bottom" ], "description": "Position of the gradient legend", "default": "right" } }, "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": { "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object" }, "className": { "type": "string" }, "title": { "type": "string" }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "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" ] } }, "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" }, "xLabel": { "type": "string" }, "yLabel": { "type": "string" }, "data": { "type": "array", "description": "Array of data objects" }, "xAccessor": { "type": [ "string", "function" ], "description": "Key for x-axis values", "default": "x" }, "yAccessor": { "type": [ "string", "function" ], "description": "Key for y-axis values", "default": "y" }, "orderAccessor": { "type": [ "string", "function" ], "description": "Key for point ordering (number or Date field)" }, "orderLabel": { "type": "string", "description": "Label for the ordering metric in tooltips" }, "pointRadius": { "type": "number", "description": "Point radius", "default": 4 }, "pointIdAccessor": { "type": [ "string", "function" ], "description": "Accessor for unique point IDs, used by point-anchored annotations" }, "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": { "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object" }, "className": { "type": "string" }, "title": { "type": "string" }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "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" ] } }, "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" }, "categoryLabel": { "type": "string" }, "valueLabel": { "type": "string" }, "valueFormat": { "type": "function" }, "data": { "type": "array", "description": "Array of data objects" }, "categoryAccessor": { "type": [ "string", "function" ], "description": "Key for category labels", "default": "category" }, "valueAccessor": { "type": [ "string", "function" ], "description": "Key for bar values", "default": "value" }, "orientation": { "type": "string", "enum": [ "vertical", "horizontal" ], "default": "vertical" }, "sort": { "type": [ "boolean", "string", "function" ], "description": "Sort bars: false, true, 'asc', 'desc', or comparator function", "default": false }, "barPadding": { "type": "number", "default": 40 }, "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": { "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object" }, "className": { "type": "string" }, "title": { "type": "string" }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean", "default": true }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "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" ] } }, "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" }, "categoryLabel": { "type": "string" }, "valueLabel": { "type": "string" }, "valueFormat": { "type": "function" }, "data": { "type": "array", "description": "Array of data objects" }, "stackBy": { "type": [ "string", "function" ], "description": "Key to define the stacking dimension (required)" }, "categoryAccessor": { "type": [ "string", "function" ], "default": "category" }, "valueAccessor": { "type": [ "string", "function" ], "default": "value" }, "orientation": { "type": "string", "enum": [ "vertical", "horizontal" ], "default": "vertical" }, "normalize": { "type": "boolean", "description": "Normalize stacks to 100%", "default": false }, "barPadding": { "type": "number", "default": 40 } }, "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": { "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object" }, "className": { "type": "string" }, "title": { "type": "string" }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "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" ] } }, "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" }, "categoryLabel": { "type": "string" }, "valueLabel": { "type": "string" }, "valueFormat": { "type": "function" }, "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 (required). Odd count = center is neutral." }, "categoryAccessor": { "type": [ "string", "function" ], "description": "Question/item field (ordinal axis)", "default": "question" }, "valueAccessor": { "type": [ "string", "function" ], "description": "Integer score field for raw response mode (1-based: score 1 → levels[0])", "default": "score" }, "levelAccessor": { "type": [ "string", "function" ], "description": "Level name field for pre-aggregated mode. Each value must match an entry in levels." }, "countAccessor": { "type": [ "string", "function" ], "description": "Count/frequency field for pre-aggregated mode", "default": "count" }, "orientation": { "type": "string", "enum": [ "vertical", "horizontal" ], "default": "horizontal" }, "barPadding": { "type": "number", "default": 20 } }, "required": [ "levels" ] } } }, { "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": { "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object" }, "className": { "type": "string" }, "title": { "type": "string" }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean", "default": true }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "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" ] } }, "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" }, "categoryLabel": { "type": "string" }, "valueLabel": { "type": "string" }, "valueFormat": { "type": "function" }, "data": { "type": "array", "description": "Array of data objects" }, "groupBy": { "type": [ "string", "function" ], "description": "Key to define the grouping dimension (required)" }, "categoryAccessor": { "type": [ "string", "function" ], "default": "category" }, "valueAccessor": { "type": [ "string", "function" ], "default": "value" }, "orientation": { "type": "string", "enum": [ "vertical", "horizontal" ], "default": "vertical" }, "barPadding": { "type": "number", "default": 60 } }, "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": { "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object" }, "className": { "type": "string" }, "title": { "type": "string" }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "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" ] } }, "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" }, "categoryLabel": { "type": "string" }, "valueLabel": { "type": "string" }, "valueFormat": { "type": "function" }, "data": { "type": "array", "description": "Array of data objects" }, "categoryAccessor": { "type": [ "string", "function" ], "default": "category" }, "valueAccessor": { "type": [ "string", "function" ], "default": "value" }, "orientation": { "type": "string", "enum": [ "vertical", "horizontal" ], "default": "vertical" }, "sizeBy": { "type": [ "string", "function" ], "description": "Key for variable point sizing" }, "sizeRange": { "type": "array", "default": [ 3, 8 ] }, "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": { "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object" }, "className": { "type": "string" }, "title": { "type": "string" }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "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" ] } }, "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" }, "categoryLabel": { "type": "string" }, "valueLabel": { "type": "string" }, "valueFormat": { "type": "function" }, "data": { "type": "array", "description": "Array of data objects" }, "categoryAccessor": { "type": [ "string", "function" ], "default": "category" }, "valueAccessor": { "type": [ "string", "function" ], "default": "value" }, "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": { "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object" }, "className": { "type": "string" }, "title": { "type": "string" }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "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" ] } }, "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" }, "categoryLabel": { "type": "string" }, "valueLabel": { "type": "string" }, "valueFormat": { "type": "function" }, "data": { "type": "array", "description": "Array of data objects" }, "categoryAccessor": { "type": [ "string", "function" ], "default": "category" }, "valueAccessor": { "type": [ "string", "function" ], "default": "value" }, "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": { "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object" }, "className": { "type": "string" }, "title": { "type": "string" }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "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" ] } }, "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" }, "categoryLabel": { "type": "string" }, "valueLabel": { "type": "string" }, "valueFormat": { "type": "function" }, "data": { "type": "array", "description": "Array of data objects" }, "categoryAccessor": { "type": [ "string", "function" ], "default": "category" }, "valueAccessor": { "type": [ "string", "function" ], "default": "value" }, "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": { "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object" }, "className": { "type": "string" }, "title": { "type": "string" }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "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" ] } }, "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" }, "categoryLabel": { "type": "string" }, "valueLabel": { "type": "string" }, "valueFormat": { "type": "function" }, "data": { "type": "array", "description": "Array of data objects" }, "categoryAccessor": { "type": [ "string", "function" ], "description": "Key for category grouping" }, "valueAccessor": { "type": [ "string", "function" ], "description": "Key for numeric values to build distributions from" }, "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": { "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object" }, "className": { "type": "string" }, "title": { "type": "string" }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "showGrid": { "type": "boolean", "default": true }, "colorBy": { "type": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "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" ] } }, "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" }, "categoryLabel": { "type": "string" }, "valueLabel": { "type": "string" }, "valueFormat": { "type": "function" }, "data": { "type": "array", "description": "Array of data objects" }, "categoryAccessor": { "type": [ "string", "function" ], "default": "category" }, "valueAccessor": { "type": [ "string", "function" ], "default": "value" }, "orientation": { "type": "string", "enum": [ "vertical", "horizontal" ], "default": "horizontal" }, "sort": { "type": [ "boolean", "string", "function" ], "description": "Sort dots: true, false, 'asc', 'desc'", "default": true }, "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": { "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object" }, "className": { "type": "string" }, "title": { "type": "string" }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "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" ] } }, "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" }, "data": { "type": "array", "description": "Array of data objects" }, "categoryAccessor": { "type": [ "string", "function" ], "default": "category" }, "valueAccessor": { "type": [ "string", "function" ], "default": "value" }, "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": { "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object" }, "className": { "type": "string" }, "title": { "type": "string" }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "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" ] } }, "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" }, "data": { "type": "array", "description": "Array of data objects" }, "categoryAccessor": { "type": [ "string", "function" ], "default": "category" }, "valueAccessor": { "type": [ "string", "function" ], "default": "value" }, "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": { "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object" }, "className": { "type": "string" }, "title": { "type": "string" }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "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" ] } }, "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" }, "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. Last value should equal max." }, "gradientFill": { "type": "object", "description": "Arc-length gradient for the gauge band. Color stops are sampled along the sweep from start to 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" }, "color": { "type": "string", "description": "Fallback fill color used when no thresholds are defined" }, "valueFormat": { "type": "function" }, "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": { "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object" }, "className": { "type": "string" }, "title": { "type": "string" }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "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" ] } }, "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" }, "nodes": { "type": "array", "description": "Array of node objects" }, "edges": { "type": "array", "description": "Array of edge objects with source and target" }, "nodeIDAccessor": { "type": [ "string", "function" ], "description": "Key for node unique identifier", "default": "id" }, "sourceAccessor": { "type": [ "string", "function" ], "description": "Key for edge source node ID", "default": "source" }, "targetAccessor": { "type": [ "string", "function" ], "description": "Key for edge target node ID", "default": "target" }, "nodeLabel": { "type": [ "string", "function" ], "description": "Key or accessor for node labels" }, "nodeSize": { "type": [ "number", "string", "function" ], "description": "Fixed node radius or key for variable sizing", "default": 8 }, "nodeSizeRange": { "type": "array", "default": [ 5, 20 ] }, "edgeWidth": { "type": [ "number", "string", "function" ], "description": "Fixed edge width or key for variable width", "default": 1 }, "edgeColor": { "type": "string", "default": "#999" }, "edgeOpacity": { "type": "number", "default": 0.6 }, "iterations": { "type": "number", "description": "Force simulation iterations", "default": 300 }, "forceStrength": { "type": "number", "default": 0.1 }, "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": { "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object" }, "className": { "type": "string" }, "title": { "type": "string" }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "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" ] } }, "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" }, "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", "function" ], "default": "source" }, "targetAccessor": { "type": [ "string", "function" ], "default": "target" }, "valueAccessor": { "type": [ "string", "function" ], "description": "Key for edge flow value", "default": "value" }, "nodeIdAccessor": { "type": [ "string", "function" ], "default": "id" }, "edgeColorBy": { "type": [ "string", "function" ], "enum": [ "source", "target", "gradient" ], "description": "How to color edges", "default": "source" }, "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", "function" ], "description": "Key for node labels" }, "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": { "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object" }, "className": { "type": "string" }, "title": { "type": "string" }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "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" ] } }, "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" }, "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", "function" ], "default": "source" }, "targetAccessor": { "type": [ "string", "function" ], "default": "target" }, "valueAccessor": { "type": [ "string", "function" ], "default": "value" }, "nodeIdAccessor": { "type": [ "string", "function" ], "default": "id" }, "edgeColorBy": { "type": [ "string", "function" ], "enum": [ "source", "target" ], "default": "source" }, "padAngle": { "type": "number", "default": 0.01 }, "groupWidth": { "type": "number", "default": 20 }, "nodeLabel": { "type": [ "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": { "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object" }, "className": { "type": "string" }, "title": { "type": "string" }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "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" ] } }, "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" }, "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", "function" ], "description": "Key for the children array in each node", "default": "children" }, "valueAccessor": { "type": [ "string", "function" ], "default": "value" }, "nodeIdAccessor": { "type": [ "string", "function" ], "default": "name" }, "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", "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": { "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object" }, "className": { "type": "string" }, "title": { "type": "string" }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "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" ] } }, "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" }, "data": { "type": "object", "description": "Root node object with nested children" }, "childrenAccessor": { "type": [ "string", "function" ], "default": "children" }, "valueAccessor": { "type": [ "string", "function" ], "default": "value" }, "nodeIdAccessor": { "type": [ "string", "function" ], "default": "name" }, "colorByDepth": { "type": "boolean", "default": false }, "showLabels": { "type": "boolean", "default": true }, "nodeLabel": { "type": [ "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": { "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object" }, "className": { "type": "string" }, "title": { "type": "string" }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "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" ] } }, "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" }, "data": { "type": "object", "description": "Root node object with nested children" }, "childrenAccessor": { "type": [ "string", "function" ], "default": "children" }, "valueAccessor": { "type": [ "string", "function" ], "default": "value" }, "nodeIdAccessor": { "type": [ "string", "function" ], "default": "name" }, "colorByDepth": { "type": "boolean", "default": false }, "showLabels": { "type": "boolean", "default": true }, "nodeLabel": { "type": [ "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": { "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object" }, "className": { "type": "string" }, "title": { "type": "string" }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "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" ] } }, "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" }, "data": { "type": "object", "description": "Hierarchical root object with children: { name: 'root', children: [...] }" }, "childrenAccessor": { "type": [ "string", "function" ], "description": "Key to access children from each datum", "default": "children" }, "nodeIdAccessor": { "type": [ "string", "function" ], "description": "Key to identify each node", "default": "name" }, "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", "function" ], "description": "Ring size divisor per depth", "default": 2.95 }, "speed": { "type": "number", "description": "Orbit speed in degrees per frame", "default": 0.25 }, "eccentricity": { "type": [ "number", "function" ], "description": "Vertical squash for elliptical orbits (1 = circle)", "default": 1 }, "showRings": { "type": "boolean", "description": "Show orbital ring paths", "default": true }, "nodeRadius": { "type": [ "number", "function" ], "description": "Node radius", "default": 6 }, "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]" }, "margin": { "type": "object" }, "className": { "type": "string" }, "timeAccessor": { "type": [ "string", "function" ], "description": "Key for time/x values" }, "valueAccessor": { "type": [ "string", "function" ], "description": "Key for y values" }, "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": [ "function", "object" ], "description": "Tooltip content function or config" }, "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" ] } }, "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]" }, "margin": { "type": "object" }, "className": { "type": "string" }, "timeAccessor": { "type": [ "string", "function" ], "description": "Key for time/x values" }, "valueAccessor": { "type": [ "string", "function" ], "description": "Key for y values" }, "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": [ "function", "object" ], "description": "Tooltip content function or config" }, "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" ] } }, "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)" }, "categoryAccessor": { "type": [ "string", "function" ], "description": "Key for category grouping" }, "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": { "type": "function", "description": "Callback when brush extent changes: (extent | null) => void" }, "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]" }, "margin": { "type": "object" }, "className": { "type": "string" }, "timeAccessor": { "type": [ "string", "function" ], "description": "Key for time/x values" }, "valueAccessor": { "type": [ "string", "function" ], "description": "Key for y values" }, "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": [ "function", "object" ], "description": "Tooltip content function or config" }, "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" ] } }, "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", "function" ] }, "colors": { "type": "object" }, "radius": { "type": "number" }, "fill": { "type": "string" }, "opacity": { "type": "number" }, "stroke": { "type": "string" }, "strokeWidth": { "type": "number" }, "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]" }, "margin": { "type": "object" }, "className": { "type": "string" }, "timeAccessor": { "type": [ "string", "function" ], "description": "Key for time/x values" }, "valueAccessor": { "type": [ "string", "function" ], "description": "Key for y values" }, "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": [ "function", "object" ], "description": "Tooltip content function or config" }, "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" ] } }, "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]" }, "margin": { "type": "object" }, "className": { "type": "string" }, "timeAccessor": { "type": [ "string", "function" ], "description": "Key for time/x values" }, "valueAccessor": { "type": [ "string", "function" ], "description": "Key for y values" }, "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": [ "function", "object" ], "description": "Tooltip content function or config" }, "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" ] } }, "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" ] } }, "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": { "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object" }, "className": { "type": "string" }, "title": { "type": "string" }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "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" ] } }, "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" }, "categoryLabel": { "type": "string" }, "valueLabel": { "type": "string" }, "valueFormat": { "type": "function" }, "data": { "type": "array", "description": "Array of data objects with step and value fields" }, "stepAccessor": { "type": [ "string", "function" ], "description": "Key for funnel step/stage name", "default": "step" }, "valueAccessor": { "type": [ "string", "function" ], "description": "Key for numeric value per step", "default": "value" }, "categoryAccessor": { "type": [ "string", "function" ], "description": "Key to split each step into mirrored categories (optional)" }, "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 }, "showCategoryTicks": { "type": "boolean", "description": "Show category tick labels on ordinal axis", "default": false }, "responsiveWidth": { "type": "boolean" }, "legendPosition": { "type": "string", "enum": [ "right", "left", "top", "bottom" ] } }, "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": { "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object" }, "className": { "type": "string" }, "title": { "type": "string" }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "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" ] } }, "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" }, "categoryLabel": { "type": "string" }, "valueLabel": { "type": "string" }, "valueFormat": { "type": "function" }, "data": { "type": "array", "description": "Array of data objects. Omit for push API mode." }, "categoryAccessor": { "type": [ "string", "function" ], "description": "Key for lane categories (swim lanes)", "default": "category" }, "subcategoryAccessor": { "type": [ "string", "function" ], "description": "Key for item subcategory (color grouping within lanes). Required. Duplicate subcategories in the same lane stack sequentially." }, "valueAccessor": { "type": [ "string", "function" ], "description": "Key for item size/duration along the value axis", "default": "value" }, "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." }, "brush": { "type": "boolean", "description": "Enable value-axis brush selection" }, "onBrush": { "type": "function", "description": "Callback with { r: [min, max] } or null when brush clears" }, "linkedBrush": { "type": [ "string", "object" ], "description": "LinkedCharts brush integration name" }, "showCategoryTicks": { "type": "boolean", "description": "Show lane labels on the category axis" }, "responsiveWidth": { "type": "boolean" }, "legendPosition": { "type": "string", "enum": [ "right", "left", "top", "bottom" ] } }, "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": { "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object" }, "className": { "type": "string" }, "title": { "type": "string" }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "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" ] } }, "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" }, "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": { "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object" }, "className": { "type": "string" }, "title": { "type": "string" }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "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" ] } }, "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" }, "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": { "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object" }, "className": { "type": "string" }, "title": { "type": "string" }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array" ] }, "tooltip": { "type": [ "boolean", "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" ] } }, "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" }, "areas": { "type": [ "array", "string" ], "description": "GeoJSON features or reference geography name" }, "valueAccessor": { "type": [ "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": { "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object" }, "className": { "type": "string" }, "title": { "type": "string" }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "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" ] } }, "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" }, "points": { "type": "array" }, "xAccessor": { "type": [ "string", "function" ], "default": "lon" }, "yAccessor": { "type": [ "string", "function" ], "default": "lat" }, "sizeBy": { "type": [ "string", "function" ] }, "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": { "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object" }, "className": { "type": "string" }, "title": { "type": "string" }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "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" ] } }, "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" }, "flows": { "type": "array" }, "nodes": { "type": "array" }, "valueAccessor": { "type": [ "string", "function" ] }, "lineIdAccessor": { "type": [ "string", "function" ] } }, "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": { "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object" }, "className": { "type": "string" }, "title": { "type": "string" }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "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" ] } }, "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" }, "points": { "type": "array" }, "center": { "type": "array" }, "costAccessor": { "type": [ "string", "function" ] } }, "required": [ "points" ] } } }, { "type": "function", "function": { "name": "ProcessSankey", "description": "Temporal sankey with a real time x-axis. Edges carry startTime/endTime; nodes can declare an explicit xExtent lifetime. Use for timestamped flow events (PR commits, campaign-finance contributions, supply-chain shipments).", "parameters": { "type": "object", "properties": { "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object" }, "className": { "type": "string" }, "title": { "type": "string" }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "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" ] } }, "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" }, "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 x-axis (required)." }, "axisTicks": { "type": "array", "description": "Optional [{ date, label }] tick array for the time axis." }, "sourceAccessor": { "type": [ "string", "function" ], "default": "source" }, "targetAccessor": { "type": [ "string", "function" ], "default": "target" }, "valueAccessor": { "type": [ "string", "function" ], "default": "value" }, "nodeIdAccessor": { "type": [ "string", "function" ], "default": "id" }, "startTimeAccessor": { "type": [ "string", "function" ], "default": "startTime" }, "endTimeAccessor": { "type": [ "string", "function" ], "default": "endTime" }, "xExtentAccessor": { "type": [ "string", "function" ], "default": "xExtent" }, "edgeIdAccessor": { "type": [ "string", "function" ], "default": "id" }, "legendPosition": { "type": "string", "enum": [ "right", "left", "top", "bottom" ], "default": "right" }, "pairing": { "type": "string", "enum": [ "value", "temporal" ], "description": "Edge-side pairing strategy at transit nodes.", "default": "temporal" }, "packing": { "type": "string", "enum": [ "off", "reuse" ], "description": "Lane reuse — pack lifetime-disjoint nodes into the same row.", "default": "reuse" }, "laneOrder": { "type": "string", "enum": [ "insertion", "crossing-min", "inside-out", "crossing-min+inside-out" ], "default": "crossing-min" }, "ribbonLane": { "type": "string", "enum": [ "source", "target", "both" ], "default": "both" }, "lifetimeMode": { "type": "string", "enum": [ "full", "half" ], "default": "half" }, "showLaneRails": { "type": "boolean", "default": false }, "showQualityReadout": { "type": "boolean", "default": false }, "edgeOpacity": { "type": "number", "default": 0.35 }, "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": { "width": { "type": "number", "default": 600 }, "height": { "type": "number", "default": 400 }, "margin": { "type": "object" }, "className": { "type": "string" }, "title": { "type": "string" }, "enableHover": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean" }, "showGrid": { "type": "boolean", "default": false }, "colorBy": { "type": [ "string", "function" ] }, "colorScheme": { "type": [ "string", "array" ], "default": "category10" }, "tooltip": { "type": [ "boolean", "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" ] } }, "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" }, "xLabel": { "type": "string" }, "yLabel": { "type": "string" }, "data": { "type": "array", "description": "Array of `{x, a, b}` objects. Omit for push API mode." }, "xAccessor": { "type": [ "string", "function" ], "description": "Key for x values", "default": "x" }, "seriesAAccessor": { "type": [ "string", "function" ], "description": "Key for series A values", "default": "a" }, "seriesBAccessor": { "type": [ "string", "function" ], "description": "Key for series B values", "default": "b" }, "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": [ "boolean", "object" ], "description": "Tip→base gradient across each segment; same shape as AreaChart.gradientFill" }, "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", "function" ], "description": "Stable ID for push-mode remove()/update()" }, "windowSize": { "type": "number", "description": "Max raw rows in the push buffer; older rows evict FIFO. Recommended for long-running streams." } }, "required": [] } } } ] }