API reference
Chart
Show an exact comparison or trend with supplied numeric data.
presentation.tsx
<Chart id="trend" x={9} y={26} w={82} h={54} type="line" data='[{"label":"Q1","value":42},{"label":"Q2","value":58}]' showAxes="true" showLabels="true" ariaLabel="Quarterly adoption" />Props reference
Keep these values literal and serializable so Canvas, Inspector, validation, and export can process them reliably.
| API | Property | Type / values | Required | Description |
|---|---|---|---|---|
| Shared native-layer props | id | string | Yes | Stable, unique layer identifier. Required for every visible native layer. |
| x | number | Yes | Left position as a percentage of the slide canvas. | |
| y | number | Yes | Top position as a percentage of the slide canvas. | |
| w | number | Yes | Frame width as a percentage of the slide canvas. | |
| h | number | Yes | Frame height as a percentage of the slide canvas. | |
| groupId | string | — | Groups native children without adding a wrapper element. | |
| groupName | string | — | Human-readable name for a group in Workbench. | |
| sharedId | string | — | Matches the same layer type across adjacent Morph slides; unique within each slide. | |
| rotation | number | — | Clockwise rotation in degrees. | |
| opacity | number | — | Layer opacity from 0 to 1. | |
| motion | JSON string | — | Versioned declarative action sequence. Keep a complete static final frame. | |
| interaction | JSON string | — | Versioned click interaction for slide navigation or a link. | |
| Chart | type | bar | line | area | pie | donut | scatter | Yes | Chart visualization type. |
| data | JSON string | Yes | One to 24 rows; every row needs a finite numeric value and may include label, x, size, and color. | |
| chartDataByType | JSON string | — | Optional data sets keyed by chart type. | |
| chartPreset | executive | minimal | vivid | — | Visual preset. | |
| chartTheme | light | dark-gold | — | Chart-specific theme. | |
| palette | aurora | editorial | gilded | ocean | sunset | — | Named color palette. | |
| colorMode | palette | single | emphasis | gradient | — | Color distribution strategy. | |
| emphasisIndex | number | — | Data point emphasized by color mode. | |
| annotationIndex / annotationText / annotationColor | number | string | — | Optional annotation target, label, and color. | |
| barGap | compact | balanced | airy | — | Spacing for bar charts. | |
| barRadius / areaOpacity / donutHole | number | — | Rounded bars, area fill opacity, or donut hole size. | |
| lineSmooth | boolean | — | Smoothes a line or area path. | |
| showAxes / showGrid / showLabels | boolean | — | Shows axes, grid, or labels. | |
| labelMode / labelColor | all | value | category | none | color | — | Label visibility mode and color. | |
| numberFormat | auto | integer | decimal | percent | currency | compact | — | Value formatting. | |
| decimals / currency | number | string | — | Decimal places and currency code or symbol. | |
| sort | input | ascending | descending | — | Data ordering. | |
| referenceValue / referenceLabel / referenceColor | number | string | — | Optional reference line value, label, and color. | |
| chartMotion | auto | grow | draw | sweep | pop | none | — | Chart entrance motion. |
Required syntax
Use id, x, y, w, h, type, and data. data is a JSON string of label and value entries, and the supplied values are preserved exactly.
Make data legible
Use nearby Text to state units, period, and source. showAxes, showLabels, palette, and chartMotion are supported presentation props when they clarify the data.