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

AG Style

Inspired by AG Charts

Muted tones, minimal animation, clean business dashboard look — Inspired by AG Charts.

Configuration

Colors

Series color palette with separate fill and stroke arrays. Colors cycle automatically.

PropertyTypeDefaultDescription
colors.fillsstring[]["#5090dc", "#ffa03a", ...]Fill color palette for series
colors.strokesstring[]["#2b6cb5", "#cc7a1e", ...]Stroke color palette for series outlines

Background

PropertyTypeDefaultDescription
backgroundstring"white"Chart background color

Font

Base typography applied to axis labels and legend text.

PropertyTypeDefaultDescription
font.familystring"Verdana, sans-serif"
font.sizenumber13

Title

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

Subtitle

PropertyTypeDefaultDescription
subtitle.visiblebooleanfalseShow or hide subtitle
subtitle.textstring""Subtitle text
subtitle.colorstring"#8d949a"Text color
subtitle.fontSizenumber14Font size in px
subtitle.fontFamilystring?Overrides font.family
subtitle.fontWeightstring?Font weight

Legend

PropertyTypeDefaultDescription
legend.visiblebooleantrue
legend.position"top" | "bottom" | "right" | "right-top" | "right-center" | "right-bottom""bottom"
legend.gapnumber16Spacing between legend items (px)
legend.colorstring"#585858"Legend text color

Axis

Applies to both x-axis and y-axis.

PropertyTypeDefaultDescription
axis.colorstring"#8a8c8c"Line and tick color
axis.thicknessnumber1Line thickness (px)
axis.label.colorstring"#585858"Label text color
axis.label.fontSizenumber13Label font size (px)
axis.label.gapnumber11Gap between axis and label (px)
axis.tick.enabledbooleanfalseShow tick marks
axis.tick.sizenumber6Tick mark length (px)
axis.xLine.visiblebooleantrueShow x-axis line
axis.yLine.visiblebooleantrueShow y-axis line

Grid

PropertyTypeDefaultDescription
grid.colorstring"#e2e2e2"
grid.thicknessnumber1
grid.dashnumber[][]Dash pattern (e.g. [4, 2])
grid.xLine.visiblebooleanfalseShow horizontal grid lines
grid.yLine.visiblebooleantrueShow vertical grid lines

Padding

Chart area padding in pixels.

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

Tooltip

PropertyTypeDefaultDescription
tooltip.enabledbooleantrueEnable tooltips
tooltip.backgroundColorstring"white"Background color
tooltip.textColorstring"#181d1f"Text color
tooltip.borderColorstring"#e2e2e2"Border color
tooltip.borderRadiusnumber4Corner radius (px)
tooltip.paddingnumber12Internal padding (px)

Bar

PropertyTypeDefaultDescription
bar.gapnumber0Gap between stacked bar groups (px)

Vertical

Horizontal

Negative Vertical

Negative Horizontal