flitter-ui (지금 베타입니다)
Back to Pie Chart

Toast Style

Inspired by Toast UI Chart

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

Configuration

Colors

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

PropertyTypeDefaultDescription
colorsstring[]["#00a9ff", "#ffb840", ...]Color palette for pie slices

Title

PropertyTypeDefaultDescription
title.textstring""Title text
title.visiblebooleantrueShow or hide the title
title.colorstring"#333333"Text color
title.fontSizenumber18Font size in px
title.fontWeightstring?"bold"Font weight
title.position"top" | "bottom""top"Placement relative to chart
title.alignment"start" | "center" | "end""start"Horizontal alignment

Legend

PropertyTypeDefaultDescription
legend.visiblebooleantrue
legend.position"top" | "bottom" | "right" | "right-top" | "right-center" | "right-bottom""right-top"
legend.gapnumber12Spacing between legend and chart (px)

Padding

Chart area padding in pixels.

PropertyTypeDefaultDescription
padding.topnumber20
padding.rightnumber20
padding.bottomnumber20
padding.leftnumber20

Animation

PropertyTypeDefaultDescription
animation.enabledbooleantrueEnable entry animation
animation.durationnumber300Animation duration (ms)
animation.staggerDelaynumber60Delay between slices (ms)

Pie

Pie-specific visual settings.

PropertyTypeDefaultDescription
pie.strokeColorstring"white"Border color between slices
pie.strokeWidthnumber2Border width between slices (px)
pie.innerRadiusRationumber0Inner radius ratio (0 = pie, 0.5 = donut)

Basic Pie

Donut