BarChart
Renders bounded grouped or stacked categorical bars in vertical or horizontal responsive SVG layouts.@gemologic/sheen-charts · dataPlayground
<BarChart label="Regional revenue" summary="West leads; South lacks a prior-period value." categoryLabel="Region" valueLabel="Revenue" series={revenueSeries} data={revenueData} y={{ format: "number" }} height={260} arrangement="grouped" arrangement="grouped" layout="vertical"/>Variant matrix
Revenue by region
layout: vertical
layout: horizontal
arrangement: grouped
arrangement: stacked
Anatomy
- Package
@gemologic/sheen-charts- Source
packages/charts/src/BarChart.tsx- Tokens
--sheen-chart-1--sheen-chart-2--sheen-chart-grid--sheen-chart-axis--sheen-color-fg--sheen-color-fg-muted
Accessibility
Role: labeled SVG image with visible narrative and native categorical table disclosureKeyboard: Focus the plot and use Left/Right, Home/End, and Escape to inspect categories., Use the native view-as-table disclosure for every exact category and value.Do
- Use unique explicit category labels and preserve missing bars as NaN.
Do not
- Do not truncate the quantitative axis away from zero or exceed 2,000 SVG marks.
Generated props
| Name | Type | Default | Description |
|---|---|---|---|
label * | string | — | Required visible and accessible chart name. |
summary * | string | — | Required narrative interpretation. |
categoryLabel * | string | — | Required label for the categorical axis and table column. |
valueLabel * | string | — | Required label for the quantitative axis. |
series * | readonly ChartSeries[] | — | Validated series definitions and semantic colors. |
data * | ChartCategoricalData | — | Unique category labels plus equal-length Float64 value columns. |
y | ChartValueAxis | — | Value formatting; bars always retain an honest zero baseline. |
height * | number | — | Reserved SVG height, at least 160 CSS pixels. |
legend | import("./chart-types.ts").ChartLegend | inline | Inline, stacked, or hidden series key. |
tooltip | boolean | true | Whether single-tab-stop pointer and keyboard category inspection is enabled. |
empty | JSX.Element | — | Optional empty-state content. |
loading | boolean | false | Marks retained accepted content busy. |
table | import("./chart-types.ts").ChartTableOptions | — | Native-table disclosure label and bounded page size. |
class | string | — | Optional class appended to the figure. |
layout | "vertical" | "horizontal" | vertical | Vertical columns or horizontal bars. |
arrangement | "stacked" | "grouped" | grouped | Bars grouped beside each other or stacked by sign. |