Skip to content

TsaiBarChart

294×256 vertical bar chart. Periods 1D, 1W, 1M, 1Y, and All set bar count, width, and gap so the row fills 294 pixels. Dense periods use radius.xs on the top corners; others use radius.sm.

Open live example

TsaiBarChart(
  points: points,
  period: TsaiChartPeriod.oneWeek,
  status: TsaiChartStatus.data,
  onPeriodChanged: (period) => setPeriod(period),
  onScrubIndexChanged: (index) => setScrub(index),
  onRetry: reload,
)

status is the same data-source contract as TsaiLineChart: Mini Tabs are inert while loading. A previous bar series is grayed in place; the Penpot Loading bars (seven 1W-shaped columns) are used only when there is no last series. Hold a bar to scrub; other bars dim to accent.muted. After release the selection stays. The 96×44 tooltip pins flush on the first or last bar. showTabs hides Mini Tabs when the host supplies another period control.