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 dataset series

Base typography applied to axis labels and legend text.

Property	Type	Default	Description
`font.family`	`string`	`"Noto Sans JP"`
`font.size`	`number`	`11`

Property	Type	Default	Description
`title.visible`	`boolean`	`true`	Show or hide the title
`title.color`	`string`	`"#000000"`	Text color
`title.fontSize`	`number`	`16`	Font size in px
`title.fontFamily`	`string?`	`—`	Overrides font.family
`title.fontWeight`	`string?`	`"bold"`	Font weight
`title.position`	`"top" \| "bottom"`	`"top"`	Placement relative to chart
`title.alignment`	`"start" \| "center" \| "end"`	`"center"`	Horizontal alignment

Property	Type	Default	Description
`legend.visible`	`boolean`	`true`
`legend.position`	`"top" \| "bottom"`	`"bottom"`

Applies to both x-axis and y-axis.

Property	Type	Default	Description
`axis.color`	`string`	`"#BBBBBB"`	Line and tick color
`axis.thickness`	`number`	`1`	Line thickness (px)
`axis.label.color`	`string`	`"#666666"`	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`	`"#EEEEEE"`
`grid.thickness`	`number`	`1`

Chart area padding in pixels.

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

Property	Type	Default	Description
`animation.enabled`	`boolean`	`true`	Enable entry animation
`animation.duration`	`number`	`300`	Duration per bar group (ms)
`animation.staggerDelay`	`number`	`60`	Delay between groups (ms)

Property	Type	Default	Description
`bubble.minRadius`	`number`	`5`	Minimum bubble radius (px)
`bubble.maxRadius`	`number`	`50`	Maximum bubble radius (px)
`bubble.opacity`	`number`	`0.6`	Bubble fill opacity (0 to 1)