BarChart

BarChart compares values across categories. Flip horizontal for long labels, and stacked to show composition.

Usage

import { BarChart } from "@sina-design-system/core";

<BarChart
  label="Spending by category"
  data={{ labels, datasets }}
  horizontal
  valueFormatter={(n) => `$${n}`}
/>

Examples

Stacked

Horizontal · formatted values

Negative values · zero line emphasized

Props

Prop	Type	Default	Description
`label`	`string`	—	Required accessible name.
`data`	`ChartData`	—	Categories and series (Chart.js shape).
`horizontal`	`boolean`	`false`	Bars run left-to-right.
`stacked`	`boolean`	`false`	Stack series into one bar.
`valueFormatter`	`(n: number) => string`	—	Formats tooltip and axis values.

Accessibility

Like all canvas charts, it's "use client", role="img", and pairs with a text summary as the accessible path.