B

bon-ui

Chart

Data charts with a shared ChartRoot API. Bar, line, and combo modes; bars support grouped or stacked series; combo supports dual Y-axes.

Basic

Single-series vertical bars via type="bar". Height defaults to h-56. Pass showValue to label each bar. Set color on a datum to highlight categories (Fri/Sat/Sun use success / warning / gray).

Small

Compact chart

Grouped

Multi-series via series with default stacking="grouped". seriesGap spaces bars inside a group.

Stacked

Same data with stacking="stacked"— one column per category; segments stack bottom to top in series order. showValue labels the category total.

Line

Single-series polyline via type="line". Pass showValue to label each point. color sets the series token when series is omitted (default primary).

Line dashed

Set dashed on a point to dash the segment that arrives at that point. Sat and Sun are a forecast tail; Fri stays the join, so the solid stroke and the dashed stroke stay connected. Multi-series uses dashes keyed by series.

Line curve

Smooth path with curve. fill adds a vertical gradient under the line (series color 50% → 0). lineSize sets stroke width (default 2). pointAlign="edge" aligns points and category labels to the plot edges.

Line dense

Thirty daily points with pointAlign="edge", curve, and fill. labelInterval=6 shows every 6th category label (first and last always kept).

Line curve small

Compact sparkline: pointAlign="edge" puts first/last points on the plot edges; showLabel="false".

Line multi

Multi-series lines share the same series API as bars. Each series gets its own fill when fill is set.

Combo

Overlay bars and a line with type="combo". Shared category labels; each series sets type (bar / line) and optional yAxis (left / right; defaults bar→left, line→right). showYAxis shows tick labels (default on for combo); use { left: false } / { right: false } to hide a side. Fri uses colors: { visits: "success" } to recolor only the bar — the rate line point stays series-colored.

Empty

Empty data defaults to a muted panel. emptyVariant="plot" keeps legend / Y-axis / category-label slots so the layout does not jump when data arrives. Centered No Data sits on the grid.

Grid

Square cell field via type="grid". Plot size is derived from gridSize × gridRows / gridCols with gridGap; Y-axis ticks align to that height. Covered cells use the series color (area under the line).