{
"type": "object",
"properties": {
"type": {
"const": "Sparkline",
"default": "Sparkline",
"type": "string"
},
"id": {
"type": [
"string",
"null"
],
"default": null,
"description": "HTML id attribute for CSS targeting. Applied to the outermost element."
},
"ariaLabel": {
"type": [
"string",
"null"
],
"default": null,
"description": "Accessible name, independent of visible text."
},
"ariaLabelledBy": {
"type": [
"string",
"null"
],
"default": null,
"description": "Space-separated IDs of elements providing the accessible name."
},
"cssClass": {
"type": [
"string",
"null"
],
"default": null,
"description": "CSS/Tailwind classes for styling. Accepts a Responsive() for breakpoint-aware classes."
},
"onMount": {
"default": null,
"description": "Action(s) to execute when this component mounts."
},
"data": {
"anyOf": [
{
"items": {
"anyOf": [
{
"type": "integer"
},
{
"type": "number"
}
]
},
"type": "array"
},
{
"type": "string"
}
],
"description": "Flat list of numeric values or `{{ interpolation }}` reference"
},
"height": {
"anyOf": [
{
"type": "integer"
},
{
"type": "string"
},
{
"type": "null"
}
],
"default": null,
"description": "Chart height in pixels (default 24px via CSS)"
},
"variant": {
"anyOf": [
{
"enum": [
"default",
"success",
"warning",
"destructive",
"info",
"muted"
],
"type": "string"
},
{
"type": "string"
}
],
"default": "default",
"description": "Visual variant: default, success, warning, destructive, info, muted"
},
"indicatorClass": {
"type": [
"string",
"null"
],
"default": null,
"description": "Tailwind classes for the line/fill (e.g. 'stroke-blue-500')"
},
"fill": {
"default": false,
"description": "Show area fill under the line",
"type": "boolean"
},
"curve": {
"default": "linear",
"description": "Line interpolation: linear, smooth, or step",
"enum": [
"linear",
"smooth",
"step"
],
"type": "string"
},
"strokeWidth": {
"default": 1.5,
"description": "Line thickness in pixels",
"type": "number"
},
"mode": {
"default": "line",
"description": "Chart mode: line or bar",
"enum": [
"line",
"bar"
],
"type": "string"
}
},
"required": [
"type",
"data"
]
}
Sparkline
JSON Schema for the Sparkline component.
Compact inline chart for showing trends at a glance.