Charts

7 chart types with Apple Health-inspired design

Charts

7 chart types with Apple Health-inspired SVG rendering. Each chart type is a separate component.

Chart Components

Component	Description
`BarChart`	Vertical bar chart with rounded corners
`LineChart`	Line chart with optional data points
`PieChart`	Pie chart
`DonutChart`	Donut chart with center cutout
`AreaChart`	Area chart with gradient fill
`RadarChart`	Radar/spider chart
`ScatterChart`	Scatter plot

Common Props

Prop	Type	Default	Description
`data`	`Expression`	Required	Array of data objects
`valueKey`	`Expression`	Required	Key to extract numeric values from data
`labelKey`	`Expression`	-	Key to extract labels from data
`width`	`Expression`	`300`	Chart width in pixels
`height`	`Expression`	`200`	Chart height in pixels
`colors`	`Expression`	Built-in palette	Array of color strings
`showGrid`	`Expression`	`false`	Show grid lines
`showLabels`	`Expression`	`false`	Show axis labels

BarChart Additional Props

Prop	Type	Default	Description
`barGap`	`Expression`	-	Gap between bars
`barRadius`	`Expression`	-	Corner radius for rounded bars
`orientation`	`Expression`	`"vertical"`	Bar orientation

Data Format

Chart data is a flat array of objects:

json

[
  { "label": "Jan", "value": 65 },
  { "label": "Feb", "value": 59 },
  { "label": "Mar", "value": 80 }
]

Examples

Bar Chart

json

{
  "kind": "component",
  "name": "BarChart",
  "props": {
    "data": { "expr": "state", "name": "chartData" },
    "valueKey": { "expr": "lit", "value": "value" },
    "labelKey": { "expr": "lit", "value": "label" },
    "showGrid": { "expr": "lit", "value": true },
    "showLabels": { "expr": "lit", "value": true },
    "barRadius": { "expr": "lit", "value": 4 }
  }
}

Line Chart

json

{
  "kind": "component",
  "name": "LineChart",
  "props": {
    "data": { "expr": "state", "name": "chartData" },
    "valueKey": { "expr": "lit", "value": "value" },
    "labelKey": { "expr": "lit", "value": "label" },
    "showGrid": { "expr": "lit", "value": true }
  }
}

Pie Chart

json

{
  "kind": "component",
  "name": "PieChart",
  "props": {
    "data": { "expr": "state", "name": "chartData" },
    "valueKey": { "expr": "lit", "value": "value" },
    "labelKey": { "expr": "lit", "value": "label" }
  }
}

Donut Chart

json

{
  "kind": "component",
  "name": "DonutChart",
  "props": {
    "data": { "expr": "state", "name": "chartData" },
    "valueKey": { "expr": "lit", "value": "value" },
    "labelKey": { "expr": "lit", "value": "label" }
  }
}

Area Chart

json

{
  "kind": "component",
  "name": "AreaChart",
  "props": {
    "data": { "expr": "state", "name": "chartData" },
    "valueKey": { "expr": "lit", "value": "value" },
    "labelKey": { "expr": "lit", "value": "label" },
    "showGrid": { "expr": "lit", "value": true }
  }
}

Radar Chart

json

{
  "kind": "component",
  "name": "RadarChart",
  "props": {
    "data": { "expr": "state", "name": "chartData" },
    "valueKey": { "expr": "lit", "value": "value" },
    "labelKey": { "expr": "lit", "value": "label" }
  }
}

Scatter Chart

json

{
  "kind": "component",
  "name": "ScatterChart",
  "props": {
    "data": { "expr": "state", "name": "chartData" },
    "valueKey": { "expr": "lit", "value": "value" },
    "labelKey": { "expr": "lit", "value": "label" }
  }
}

Styling

CSS classes:

.chart-container - Main container
.chart-svg - SVG element
.chart-bar - Bar elements
.chart-line - Line paths
.chart-area - Area fills
.chart-point - Data points
.chart-slice - Pie/donut slices
.chart-grid - Grid lines
.chart-label - Axis labels

Accessibility

ARIA labels for chart elements
Semantic SVG structure
High contrast mode support
Screen reader descriptions for data