figma_create_chart
Render scatter, line, donut, pie, bar, and histogram charts directly in Figma with a single data call. Supports categorical Y bands, multi-series lines, stacked bars, annotations, and DS variable integration for colors and typography.
Instructions
Render a chart directly in Figma. All data is sent in one call — no per-element round trips. Supported chart types: • scatter / jitter — scatter plot with categorical Y bands • line — line chart with optional area fill, smooth curves, multi-series • donut / pie — donut or pie chart with legend and optional center label • bar / histogram — vertical bar chart with optional stacked segments; supports annotation vlines
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| chartType | Yes | ||
| parentNodeId | No | ||
| name | No | ||
| width | No | ||
| height | No | ||
| bars | No | Bar chart data. Each item: { label: string, value: number, color?: string (DS hex) }. | |
| annotations | No | Vertical annotation lines on a bar chart. Each item: { x: number, label?: string, color?: string }. | |
| data | No | Scatter/jitter plot data points. Each item: { x: number, y: string (category), label?: string, color?: string }. | |
| xDomain | No | [min, max] for X axis. | |
| categories | No | Donut/pie/scatter/bar segment definitions. Keys are segment names, values are { value: number, color: string (DS hex), colorVariable?: string (DS variable path) }. | |
| categoryVariables | No | DS variable paths per category. Keys match categories keys, values are DS color variable paths (e.g., {"Pass": "Component colors/Utility/Success/utility-success-500"}). Tried first; hex fallback from categories if binding fails. | |
| categoryOrder | No | Render order for categories (donut/pie/scatter). | |
| dotSize | No | ||
| jitter | No | ||
| xTicks | No | Explicit X axis tick values. | |
| tickSuffix | No | Suffix appended to every tick label (e.g. "%", "ms"). | |
| xLabel | No | ||
| series | No | Line chart series. Each item: { name: string, data: [{ x: number, y: number }], color?: string (DS hex), smooth?: boolean, area?: boolean }. | |
| yDomain | No | [min, max] for Y axis. | |
| yTicks | No | Explicit Y axis tick values. | |
| xTickSuffix | No | ||
| yTickSuffix | No | ||
| yLabel | No | ||
| size | No | ||
| innerRadius | No | ||
| centerLabel | No | ||
| centerSubLabel | No | ||
| legendPosition | No | Legend placement for donut/pie charts. "right" (default) places legend beside the chart. "bottom" places it below. | |
| bgVariable | No | DS variable path for chart outer frame background (e.g., "Colors/Background/bg-secondary"). Replaces hardcoded #F9FAFB. | |
| radiusVariable | No | DS radius variable path for chart outer frame (e.g., "Radius/radius-md"). Replaces hardcoded 8px. | |
| gridVariable | No | DS variable path for grid line color (e.g., "Colors/Border/border-secondary"). Replaces hardcoded #E7EAEE. | |
| labelFillVariable | No | DS variable path for chart label text color (e.g., "Colors/Text/text-tertiary (600)"). Replaces hardcoded #6D778C. | |
| labelTextStyleId | No | DS text style key for chart labels. Applied to all axis/legend labels. | |
| fontFamily | No | Font family for chart labels (overrides session default). |