Toast Style

Pastel tones, smooth staggered animations, hover focus effects — Inspired by Toast UI Chart.

Configuration

Series color palette. Colors cycle automatically when datasets exceed palette length.

Property	Type	Default	Description
`colors`	`string[]`	`["#00a9ff", "#ffb840", ...]`	Color palette for series

Base typography applied to axis labels and legend text.

Property	Type	Default	Description
`font.family`	`string`	`"Arial"`
`font.size`	`number`	`11`

Property	Type	Default	Description
`title.text`	`string`	`""`	Title text
`title.visible`	`boolean`	`true`	Show or hide the title
`title.color`	`string`	`"#333333"`	Text color
`title.fontSize`	`number`	`18`	Font size in px
`title.fontWeight`	`string?`	`"bold"`	Font weight
`title.position`	`"top" \| "bottom"`	`"top"`	Placement relative to chart
`title.alignment`	`"start" \| "center" \| "end"`	`"start"`	Horizontal alignment

Property	Type	Default	Description
`legend.visible`	`boolean`	`true`
`legend.position`	`"top" \| "bottom" \| "right" \| "right-top" \| "right-center" \| "right-bottom"`	`"bottom"`
`legend.gap`	`number`	`12`	Spacing between legend and chart (px)

Applies to both x-axis and y-axis.

Property	Type	Default	Description
`axis.color`	`string`	`"#333333"`	Line and tick color
`axis.thickness`	`number`	`1`	Line thickness (px)
`axis.label.color`	`string`	`"#333333"`	Label text color
`axis.label.fontSize`	`number`	`11`	Label font size (px)
`axis.label.gap`	`number`	`8`	Gap between tick and label (px)
`axis.tick.size`	`number`	`6`	Tick mark length (px)

Property	Type	Default	Description
`grid.color`	`string`	`"rgba(0, 0, 0, 0.05)"`
`grid.thickness`	`number`	`1`

Chart area padding in pixels.

Property	Type	Default
`padding.top`	`number`	`30`
`padding.right`	`number`	`20`
`padding.bottom`	`number`	`20`
`padding.left`	`number`	`60`

Property	Type	Default	Description
`animation.enabled`	`boolean`	`true`	Enable entry animation
`animation.duration`	`number`	`300`	Animation duration (ms)
`animation.staggerDelay`	`number`	`60`	Delay between cells (ms)

Heatmap-specific visual settings.

Property	Type	Default	Description
`heatmap.colorRange`	`[string, string, string]`	`["#FDE68A", "#F97316", "#B91C1C"]`	Color gradient range [low, mid, high]
`heatmap.segment.gap`	`number`	`0`	Gap between cells (px)