Chart
Field-level catalog tables below stay in English — they match the machine design schema used by the editor, API, and MCP.
Decoration and visibility use Decoration & visibility (BlockShell).
Fields
arrayBinding
Whole-value {{var:id}} or {{bind:id}} selecting an array or entry[] source. VariableArrayTemplateBlock repeats its slot per item. SlotSliderBlock repeats its first slide per item, with {{var:item.*}} and the row index, and keeps static slides when this is empty. Nested paths like {{var:parent.field}} work when that field is array-like.
arrayBinding: "{{var:hits}}"Default props
{
"shell": {
"visibility": {
"authVisibility": "all",
"routeLockVisibility": "all",
"roleVisibility": [],
"entryActionVisibility": "all",
"queryPageVisibility": "all",
"hideWhenEmpty": ""
},
"anchor": {
"anchorId": "",
"anchorKey": ""
},
"spacing": {
"padding": {
"value": "none",
"enabled": false
},
"margin": {
"enabled": false
}
},
"box": {
"enabled": false
},
"background": {
"enabled": false,
"width": "page",
"kind": "solid",
"solid": {
"color": {
"light": "",
"dark": ""
}
},
"gradient": {
"angle": 180,
"type": "linear",
"colors": [
{
"light": "",
"dark": "",
"offset": 50
},
{
"light": "",
"dark": "",
"offset": 50
}
],
"color1Light": "",
"color1Dark": "",
"color2Light": "",
"color2Dark": ""
},
"image": {
"src": "",
"mode": "cover",
"repeatSize": 100,
"position": "center"
},
"motion": {
"enabled": false,
"directionDeg": 0,
"speed": 20,
"rotateDegPerSec": 0,
"animationMode": "particle"
},
"video": {
"src": "",
"source": "file",
"youtubeUrl": "",
"fit": "cover",
"loop": true,
"repeatSize": 100
},
"particles": {
"shape": "circle",
"svgSrc": "",
"colorMode": "solid",
"colorLight": "#ffffff88",
"colorDark": "#ffffff66",
"size": 12,
"jitter": 0.2,
"count": 40,
"lifetimeSec": 4,
"speed": 40,
"animType": "fade",
"fromSide": "left",
"toSide": "right"
},
"grid": {
"style": "cells",
"motionDirectionDeg": 0,
"motionSpeed": 0,
"rotateDegPerSec": 0,
"hoverGrowLimitPct": 50,
"hoverRotateLimitDeg": 0,
"reactionTimeSec": 1,
"hoverGrow": true,
"hoverRotate": false,
"hoverColor": false,
"hoverColorLight": "#ffffff55",
"hoverColorDark": "#ffffff33",
"reactionSpeed": 1
},
"backdrop": {
"enabled": false,
"blurPx": 0,
"brightness": 1,
"contrast": 1,
"saturate": 1,
"grayscale": 0,
"sepia": 0,
"hueRotateDeg": 0
}
},
"pointerEvents": "auto",
"effects": {
"enabled": false,
"opacity": 1,
"blurPx": 0,
"brightness": 1,
"contrast": 1,
"saturate": 1,
"grayscale": 0,
"sepia": 0,
"hueRotateDeg": 0,
"dropShadowOffsetX": 0,
"dropShadowOffsetY": 0,
"dropShadowBlur": 0,
"dropShadowColorLight": "",
"dropShadowColorDark": "",
"mixBlendMode": "normal"
},
"animation": {
"scroll": {
"enabled": false,
"type": "fadeIn",
"duration": 600,
"delay": 0
},
"tilt": {
"enabled": false,
"intensity": 12
},
"wander": {
"enabled": false,
"speed": 40,
"jitter": 40,
"turnRadius": 50,
"turnSmoothness": 40,
"limits": "parent"
},
"transform": {
"enabled": false,
"rotateX": 0,
"rotateY": 0,
"rotateZ": 0,
"translateX": 0,
"translateY": 0,
"translateZ": 0,
"scale": 1
}
}
},
"appearance": {
"border": {
"enabled": false,
"style": "solid",
"colorLight": "",
"colorDark": ""
},
"shadow": {
"enabled": false,
"valueLight": "",
"valueDark": ""
}
},
"arrayBinding": "",
"categoryKey": "name",
"series": [
{
"id": "series-a",
"valueKey": "a",
"label": "Series A",
"color": "#2563eb"
},
{
"id": "series-b",
"valueKey": "b",
"label": "Series B",
"color": "#16a34a"
}
],
"chartType": "bar",
"stacked": false,
"curve": "monotone",
"showGrid": true,
"showLegend": true,
"showTooltip": true,
"pieInnerRadius": 0,
"height": 280
}Schema
{
"type": "ChartBlock",
"label": "Chart",
"defaultProps": {
"shell": {
"visibility": {
"authVisibility": "all",
"routeLockVisibility": "all",
"roleVisibility": [],
"entryActionVisibility": "all",
"queryPageVisibility": "all",
"hideWhenEmpty": ""
},
"anchor": {
"anchorId": "",
"anchorKey": ""
},
"spacing": {
"padding": {
"value": "none",
"enabled": false
},
"margin": {
"enabled": false
}
},
"box": {
"enabled": false
},
"background": {
"enabled": false,
"width": "page",
"kind": "solid",
"solid": {
"color": {
"light": "",
"dark": ""
}
},
"gradient": {
"angle": 180,
"type": "linear",
"colors": [
{
"light": "",
"dark": "",
"offset": 50
},
{
"light": "",
"dark": "",
"offset": 50
}
],
"color1Light": "",
"color1Dark": "",
"color2Light": "",
"color2Dark": ""
},
"image": {
"src": "",
"mode": "cover",
"repeatSize": 100,
"position": "center"
},
"motion": {
"enabled": false,
"directionDeg": 0,
"speed": 20,
"rotateDegPerSec": 0,
"animationMode": "particle"
},
"video": {
"src": "",
"source": "file",
"youtubeUrl": "",
"fit": "cover",
"loop": true,
"repeatSize": 100
},
"particles": {
"shape": "circle",
"svgSrc": "",
"colorMode": "solid",
"colorLight": "#ffffff88",
"colorDark": "#ffffff66",
"size": 12,
"jitter": 0.2,
"count": 40,
"lifetimeSec": 4,
"speed": 40,
"animType": "fade",
"fromSide": "left",
"toSide": "right"
},
"grid": {
"style": "cells",
"motionDirectionDeg": 0,
"motionSpeed": 0,
"rotateDegPerSec": 0,
"hoverGrowLimitPct": 50,
"hoverRotateLimitDeg": 0,
"reactionTimeSec": 1,
"hoverGrow": true,
"hoverRotate": false,
"hoverColor": false,
"hoverColorLight": "#ffffff55",
"hoverColorDark": "#ffffff33",
"reactionSpeed": 1
},
"backdrop": {
"enabled": false,
"blurPx": 0,
"brightness": 1,
"contrast": 1,
"saturate": 1,
"grayscale": 0,
"sepia": 0,
"hueRotateDeg": 0
}
},
"pointerEvents": "auto",
"effects": {
"enabled": false,
"opacity": 1,
"blurPx": 0,
"brightness": 1,
"contrast": 1,
"saturate": 1,
"grayscale": 0,
"sepia": 0,
"hueRotateDeg": 0,
"dropShadowOffsetX": 0,
"dropShadowOffsetY": 0,
"dropShadowBlur": 0,
"dropShadowColorLight": "",
"dropShadowColorDark": "",
"mixBlendMode": "normal"
},
"animation": {
"scroll": {
"enabled": false,
"type": "fadeIn",
"duration": 600,
"delay": 0
},
"tilt": {
"enabled": false,
"intensity": 12
},
"wander": {
"enabled": false,
"speed": 40,
"jitter": 40,
"turnRadius": 50,
"turnSmoothness": 40,
"limits": "parent"
},
"transform": {
"enabled": false,
"rotateX": 0,
"rotateY": 0,
"rotateZ": 0,
"translateX": 0,
"translateY": 0,
"translateZ": 0,
"scale": 1
}
}
},
"appearance": {
"border": {
"enabled": false,
"style": "solid",
"colorLight": "",
"colorDark": ""
},
"shadow": {
"enabled": false,
"valueLight": "",
"valueDark": ""
}
},
"arrayBinding": "",
"categoryKey": "name",
"series": [
{
"id": "series-a",
"valueKey": "a",
"label": "Series A",
"color": "#2563eb"
},
{
"id": "series-b",
"valueKey": "b",
"label": "Series B",
"color": "#16a34a"
}
],
"chartType": "bar",
"stacked": false,
"curve": "monotone",
"showGrid": true,
"showLegend": true,
"showTooltip": true,
"pieInnerRadius": 0,
"height": 280
},
"fields": [
{
"key": "arrayBinding",
"label": "",
"kind": "custom",
"description": "Whole-value `{{var:id}}` or `{{bind:id}}` selecting an `array` or `entry[]` source. VariableArrayTemplateBlock repeats its slot per item. SlotSliderBlock repeats its first slide per item, with `{{var:item.*}}` and the row index, and keeps static slides when this is empty. Nested paths like `{{var:parent.field}}` work when that field is array-like.",
"valueType": "arrayBinding: \"{{var:hits}}\"",
"storagePath": "arrayBinding",
"default": ""
},
{
"key": "borderEnabled",
"label": "Border enabled",
"kind": "boolean",
"description": "Enables border color, style, width, and radius.",
"valueType": "borderEnabled: false",
"storagePath": "appearance.border.enabled",
"aliases": [
"borderEnabled",
"shell.border.borderEnabled"
],
"default": false
},
{
"key": "borderColorLight",
"label": "Border color (light)",
"kind": "text",
"description": "Border color in light theme.",
"valueType": "borderColorLight: \"#e5e7eb\"",
"storagePath": "appearance.border.colorLight",
"aliases": [
"borderColorLight",
"shell.border.borderColorLight"
],
"default": ""
},
{
"key": "borderColorDark",
"label": "Border color (dark)",
"kind": "text",
"description": "Border color in dark theme.",
"valueType": "borderColorDark: \"#374151\"",
"storagePath": "appearance.border.colorDark",
"aliases": [
"borderColorDark",
"shell.border.borderColorDark"
],
"default": ""
},
{
"key": "borderStyle",
"label": "Border style",
"kind": "select",
"description": "CSS border style.",
"options": [
{
"label": "Solid",
"value": "solid"
},
{
"label": "Dashed",
"value": "dashed"
},
{
"label": "Dotted",
"value": "dotted"
}
],
"valueType": "borderStyle: \"solid\"",
"storagePath": "appearance.border.style",
"aliases": [
"borderStyle",
"shell.border.borderStyle"
],
"default": "solid"
},
{
"key": "borderWidth",
"label": "Border width",
"kind": "select",
"description": "Border width token.",
"unit": "token",
"options": [
{
"label": "none",
"value": "none"
},
{
"label": "sm",
"value": "sm"
},
{
"label": "md",
"value": "md"
},
{
"label": "lg",
"value": "lg"
}
],
"valueType": "borderWidth: \"sm\"",
"storagePath": "appearance.border.width",
"aliases": [
"borderWidth",
"shell.border.borderWidth"
]
},
{
"key": "borderWidthByBreakpoint",
"kind": "unknown",
"description": "Border Width By Breakpoint.",
"storagePath": "appearance.border.widthByBreakpoint",
"aliases": [
"borderWidthByBreakpoint",
"shell.border.borderWidthByBreakpoint"
]
},
{
"key": "borderRadius",
"label": "Border radius",
"kind": "select",
"description": "Border radius token.",
"unit": "token",
"options": [
{
"label": "none",
"value": "none"
},
{
"label": "sm",
"value": "sm"
},
{
"label": "md",
"value": "md"
},
{
"label": "lg",
"value": "lg"
},
{
"label": "xl",
"value": "xl"
},
{
"label": "full",
"value": "full"
}
],
"valueType": "borderRadius: \"md\"",
"storagePath": "appearance.border.radius",
"aliases": [
"borderRadius",
"shell.border.borderRadius"
]
},
{
"key": "shadowEnabled",
"label": "Shadow enabled",
"kind": "boolean",
"description": "Enables box shadow values for light and dark themes. When enabled and both values are empty, the theme shadow.md is used: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1).",
"valueType": "shadowEnabled: false",
"storagePath": "appearance.shadow.enabled",
"aliases": [
"shadowEnabled",
"shell.shadow.shadowEnabled"
],
"default": false
},
{
"key": "shadowValueLight",
"label": "Shadow (light)",
"kind": "text",
"description": "CSS box-shadow value in light theme. Empty uses theme shadow.md.",
"valueType": "shadowValueLight: \"0 8px 24px rgba(0, 0, 0, 0.12)\"",
"storagePath": "appearance.shadow.valueLight",
"aliases": [
"shadowValueLight",
"shell.shadow.shadowValueLight"
],
"default": ""
},
{
"key": "shadowValueDark",
"label": "Shadow (dark)",
"kind": "text",
"description": "CSS box-shadow value in dark theme. Empty uses theme shadow.md.",
"valueType": "shadowValueDark: \"0 8px 24px rgba(0, 0, 0, 0.45)\"",
"storagePath": "appearance.shadow.valueDark",
"aliases": [
"shadowValueDark",
"shell.shadow.shadowValueDark"
],
"default": ""
},
{
"key": "clipboard",
"label": "Clipboard",
"kind": "custom",
"description": "Editor-only copy/paste helpers for block props.",
"editorOnly": true,
"valueType": "// Editor-only — does not persist a stored value",
"storagePath": "clipboard"
}
],
"sharedShellFields": true
}