Chart

Unified Chart Type Taxonomy

Shared by Dashboard and Report widgets.

Provides a comprehensive set of chart types for data visualization.

Source: packages/spec/src/ui/chart.zod.ts

TypeScript Usage

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 \| Object`	optional	Display label: plain string or i18n translation object
style	`Enum<'solid' \| 'dashed' \| 'dotted'>`	✅

ChartAxis

Properties

Property	Type	Required	Description
field	`string`	✅	Data field key
title	`string \| Object`	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' \| 'grouped-bar' \| 'stacked-bar' \| 'bi-polar-bar' \| 'line' \| 'area' \| 'stacked-area' \| 'step-line' \| 'spline' \| 'pie' \| 'donut' \| 'funnel' \| 'pyramid' \| 'scatter' \| 'bubble' \| 'treemap' \| 'sunburst' \| 'sankey' \| 'word-cloud' \| 'gauge' \| 'solid-gauge' \| 'metric' \| 'kpi' \| 'bullet' \| 'choropleth' \| 'bubble-map' \| 'gl-map' \| 'heatmap' \| 'radar' \| 'waterfall' \| 'box-plot' \| 'violin' \| 'candlestick' \| 'stock' \| 'table' \| 'pivot'>`	✅
title	`string \| Object`	optional	Chart title
subtitle	`string \| Object`	optional	Chart subtitle
description	`string \| Object`	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 \| Object`	optional	Series display label
type	`Enum<'bar' \| 'horizontal-bar' \| 'column' \| 'grouped-bar' \| 'stacked-bar' \| 'bi-polar-bar' \| 'line' \| 'area' \| 'stacked-area' \| 'step-line' \| 'spline' \| 'pie' \| 'donut' \| 'funnel' \| 'pyramid' \| 'scatter' \| 'bubble' \| 'treemap' \| 'sunburst' \| 'sankey' \| 'word-cloud' \| 'gauge' \| 'solid-gauge' \| 'metric' \| 'kpi' \| 'bullet' \| 'choropleth' \| 'bubble-map' \| 'gl-map' \| 'heatmap' \| 'radar' \| 'waterfall' \| 'box-plot' \| 'violin' \| 'candlestick' \| 'stock' \| '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

ChartType

Allowed Values

bar
horizontal-bar
column
grouped-bar
stacked-bar
bi-polar-bar
line
area
stacked-area
step-line
spline
pie
donut
funnel
pyramid
scatter
bubble
treemap
sunburst
sankey
word-cloud
gauge
solid-gauge
metric
kpi
bullet
choropleth
bubble-map
gl-map
heatmap
radar
waterfall
box-plot
violin
candlestick
stock
table
pivot

On this page