---
title: Chart
description: Chart protocol schemas
---

{/* ⚠️  AUTO-GENERATED — DO NOT EDIT. Run build-docs.ts to regenerate. Hand-written docs go in content/docs/guides/. */}

Unified Chart Type Taxonomy

Shared by Dashboard and Report widgets.

Provides a comprehensive set of chart types for data visualization.

<Callout type="info">
**Source:** `packages/spec/src/ui/chart.zod.ts`
</Callout>

## TypeScript Usage

```typescript
import { ChartAnnotation, ChartAxis, ChartConfig, ChartInteraction, ChartSeries, ChartType } from '@objectstack/spec/ui';
import type { ChartAnnotation, ChartAxis, ChartConfig, ChartInteraction, ChartSeries, ChartType } from '@objectstack/spec/ui';

// Validate data
const result = ChartAnnotation.parse(data);
```

---

## ChartAnnotation

### Properties

| Property | Type | Required | Description |
| :--- | :--- | :--- | :--- |
| **type** | `Enum<'line' \| 'region'>` | ✅ |  |
| **axis** | `Enum<'x' \| 'y'>` | ✅ |  |
| **value** | `number \| string` | ✅ | Start value |
| **endValue** | `number \| string` | optional | End value for regions |
| **color** | `string` | optional |  |
| **label** | `string` | optional | Display label (plain string; i18n keys are auto-generated by the framework) |
| **style** | `Enum<'solid' \| 'dashed' \| 'dotted'>` | ✅ |  |


---

## ChartAxis

### Properties

| Property | Type | Required | Description |
| :--- | :--- | :--- | :--- |
| **field** | `string` | ✅ | Data field key |
| **title** | `string` | optional | Axis display title |
| **format** | `string` | optional | Value format string (e.g., "$0,0.00") |
| **min** | `number` | optional | Minimum value |
| **max** | `number` | optional | Maximum value |
| **stepSize** | `number` | optional | Step size for ticks |
| **showGridLines** | `boolean` | ✅ |  |
| **position** | `Enum<'left' \| 'right' \| 'top' \| 'bottom'>` | optional | Axis position |
| **logarithmic** | `boolean` | ✅ |  |


---

## ChartConfig

### Properties

| Property | Type | Required | Description |
| :--- | :--- | :--- | :--- |
| **type** | `Enum<'bar' \| 'horizontal-bar' \| 'column' \| 'line' \| 'area' \| 'pie' \| 'donut' \| 'funnel' \| 'scatter' \| 'treemap' \| 'sankey' \| 'gauge' \| 'solid-gauge' \| 'metric' \| 'kpi' \| 'bullet' \| 'radar' \| 'table' \| 'pivot'>` | ✅ |  |
| **title** | `string` | optional | Chart title |
| **subtitle** | `string` | optional | Chart subtitle |
| **description** | `string` | optional | Accessibility description |
| **xAxis** | `Object` | optional | X-Axis configuration |
| **yAxis** | `Object[]` | optional | Y-Axis configuration (support dual axis) |
| **series** | `Object[]` | optional | Defined series configuration |
| **colors** | `string[]` | optional | Color palette |
| **height** | `number` | optional | Fixed height in pixels |
| **showLegend** | `boolean` | ✅ | Display legend |
| **showDataLabels** | `boolean` | ✅ | Display data labels |
| **annotations** | `Object[]` | optional |  |
| **interaction** | `Object` | optional |  |
| **aria** | `Object` | optional | ARIA accessibility attributes |


---

## ChartInteraction

### Properties

| Property | Type | Required | Description |
| :--- | :--- | :--- | :--- |
| **tooltips** | `boolean` | ✅ |  |
| **zoom** | `boolean` | ✅ |  |
| **brush** | `boolean` | ✅ |  |
| **clickAction** | `string` | optional | Action ID to trigger on click |


---

## ChartSeries

### Properties

| Property | Type | Required | Description |
| :--- | :--- | :--- | :--- |
| **name** | `string` | ✅ | Field name or series identifier |
| **label** | `string` | optional | Series display label |
| **type** | `Enum<'bar' \| 'horizontal-bar' \| 'column' \| 'line' \| 'area' \| 'pie' \| 'donut' \| 'funnel' \| 'scatter' \| 'treemap' \| 'sankey' \| 'gauge' \| 'solid-gauge' \| 'metric' \| 'kpi' \| 'bullet' \| 'radar' \| 'table' \| 'pivot'>` | optional | Override chart type for this series |
| **color** | `string` | optional | Series color (hex/rgb/token) |
| **stack** | `string` | optional | Stack identifier to group series |
| **yAxis** | `Enum<'left' \| 'right'>` | ✅ | Bind to specific Y-Axis |
| **variant** | `Enum<'primary' \| 'comparison'>` | optional | Series visual role |
| **dashArray** | `string` | optional | SVG stroke-dasharray override |
| **opacity** | `number` | optional | Series opacity override |


---

## ChartType

### Allowed Values

* `bar`
* `horizontal-bar`
* `column`
* `line`
* `area`
* `pie`
* `donut`
* `funnel`
* `scatter`
* `treemap`
* `sankey`
* `gauge`
* `solid-gauge`
* `metric`
* `kpi`
* `bullet`
* `radar`
* `table`
* `pivot`


---

