Bar Chart

API and Development

View SourceOpens in a new tab Submit IssueOpens in a new tab

Prop	Type	Default
`label`	`LocalizedMessage`	required
`description`	`LocalizedMessage`	-
`categories`	`readonly (LocalizedMessage \| DisplayValue)[]`	required
`series`	`readonly BarChartSeries[]`	required
`orientation`	`BarChartOrientation`	`Vertical`
`beginAtZero`	`boolean`	`true`
`showValueAxis`	`boolean`	`false`
`showValueLabels`	`boolean`	`false`
`palette`	`ChartPalette \| readonly string[]`	`Categorical`
`showLegend`	`boolean`	`false`
`legendPosition`	`ChartLegendPosition`	`Top`
`hiddenSeries`	`readonly number[]` (controlled)	-
`defaultHiddenSeries`	`readonly number[]`	`[]`
`onHiddenSeriesChange`	`(hiddenSeries, details) => void`	-
`showTooltip`	`boolean`	`true`
`formatTooltipTitle`	`(index, category) => LocalizedMessage \| DisplayValue`	the category
`formatTooltipRow`	`(row: BarChartTooltipRow) => LocalizedMessage \| DisplayValue`	name and value
`formatValue`	`(value: number) => LocalizedMessage \| DisplayValue`	locale decimal format
`locale`	`string`	runtime locale
`className`, `id`, `ref`	root `div`	-

BarChart forwards data-* attributes to the root. It takes no style, role, children or event handler.

BarChartSeries

Field	Type	Default
`name`	`LocalizedMessage \| DisplayValue`	required
`values`	`readonly number[]`	required
`color`	CSS color or bare custom property name	palette color for the position
`colors`	`readonly string[]`, one color per bar	the series color

BarChartTooltipRow

{ datasetIndex, index, value, formattedValue, dataset, category }.

Exports

BarChart, BarChartOrientation, ChartLegendPosition, ChartPalette and the types BarChartProps, BarChartSeries, BarChartTooltipRow, ChartColor, ChartText and ChartPaletteInput, from @prepared911/ui/bar-chart. The root barrel exports the same names (the shared ones once).

Props

Name	Type	Default	Description
`categories`	`readonly ChartText[]`	—	Category labels, given once. Every series has one value per category. A label is never cut with an ellipsis: one that does not fit its band wraps inside it, and a band too narrow to wrap in thins labels, ending on the last category. The full text is always the tooltip title.
`label`	`LocalizedMessage`	—	Accessible name of the chart. It names the plot and captions the data table that assistive technology reads. The chart paints no heading; render one beside it if the screen needs one.
`series`	`readonly BarChartSeries[]`	—	The bars, in the order callbacks report as `datasetIndex`. With several series the bars of a category sit side by side.
`beginAtZero`	`boolean`	—	Includes zero on the value axis. Defaults to `true`.
`className`	`string`	—	Classes appended after the generated classes. Put overrides in `@layer chroma.overrides`.
`defaultHiddenSeries`	`readonly number[]`	—	Initial hidden series positions when uncontrolled.
`description`	`LocalizedMessage`	—	Longer description of the chart, read after its name: what it shows, or how to explore it with a keyboard.
`formatTooltipRow`	`((row: BarChartTooltipRow) => ChartText)`	—	Formats one tooltip row, the whole text beside the series swatch. Defaults to the series name and the formatted value.
`formatTooltipTitle`	`((index: number, category: ChartText) => ChartText)`	—	Formats the tooltip heading from the category position and its full label. Defaults to the category label.
`formatValue`	`((value: number) => ChartText)`	—	Formats a value for axis ticks, end labels, tooltip rows and the data table. Defaults to the runtime locale's decimal format. Return `toDisplayValue(...)` for data, or a `LocalizedMessage` when the text carries a unit word.
`hiddenSeries`	`readonly number[]`	—	Controlled list of hidden series positions. Pair with `onHiddenSeriesChange`.
`id`	`string`	—	Id of the root element.
`legendPosition`	`ChartLegendPosition`	—	Legend edge. Defaults to {@link ChartLegendPosition.Top}.
`locale`	`string`	—	BCP 47 locale for the default value format. Defaults to the runtime locale.
`onHiddenSeriesChange`	`((hiddenSeries: readonly number[], details: ChangeDetails<ChangeReason>) => void)`	—	Called with the next list of hidden series positions when a legend entry is pressed, before it applies. `details.cancel()` keeps the current list.
`orientation`	`BarChartOrientation`	—	Vertical or horizontal bars. Defaults to {@link BarChartOrientation.Vertical}.
`palette`	`ChartPaletteInput`	—	Series colors. Defaults to {@link ChartPalette.Categorical}. After the last color the order repeats.
`ref`	`Ref<HTMLDivElement>`	—	Ref to the root element.
`showLegend`	`boolean`	—	Paints a legend whose entries are buttons that show or hide a series or slice. Defaults to `false`.
`showTooltip`	`boolean`	—	Shows the tooltip on hover and keyboard focus. Defaults to `true`.
`showValueAxis`	`boolean`	—	Paints value axis tick labels beside the plot. Defaults to `false`.
`showValueLabels`	`boolean`	—	Paints each value at the end of its bar, formatted by `formatValue`. Room for the labels is reserved automatically. Defaults to `false`.

Storybook

Interactive examples and edge cases for this component are in Storybook.

DefaultOpens in a new tab

Bar Chart / Usage

Bar Chart / Accessibility

On this page

Bar Chart

API and Development

View SourceOpens in a new tab Submit IssueOpens in a new tab

Prop	Type	Default
`label`	`LocalizedMessage`	required
`description`	`LocalizedMessage`	-
`categories`	`readonly (LocalizedMessage \| DisplayValue)[]`	required
`series`	`readonly BarChartSeries[]`	required
`orientation`	`BarChartOrientation`	`Vertical`
`beginAtZero`	`boolean`	`true`
`showValueAxis`	`boolean`	`false`
`showValueLabels`	`boolean`	`false`
`palette`	`ChartPalette \| readonly string[]`	`Categorical`
`showLegend`	`boolean`	`false`
`legendPosition`	`ChartLegendPosition`	`Top`
`hiddenSeries`	`readonly number[]` (controlled)	-
`defaultHiddenSeries`	`readonly number[]`	`[]`
`onHiddenSeriesChange`	`(hiddenSeries, details) => void`	-
`showTooltip`	`boolean`	`true`
`formatTooltipTitle`	`(index, category) => LocalizedMessage \| DisplayValue`	the category
`formatTooltipRow`	`(row: BarChartTooltipRow) => LocalizedMessage \| DisplayValue`	name and value
`formatValue`	`(value: number) => LocalizedMessage \| DisplayValue`	locale decimal format
`locale`	`string`	runtime locale
`className`, `id`, `ref`	root `div`	-

BarChart forwards data-* attributes to the root. It takes no style, role, children or event handler.

BarChartSeries

Field	Type	Default
`name`	`LocalizedMessage \| DisplayValue`	required
`values`	`readonly number[]`	required
`color`	CSS color or bare custom property name	palette color for the position
`colors`	`readonly string[]`, one color per bar	the series color

BarChartTooltipRow

{ datasetIndex, index, value, formattedValue, dataset, category }.

Exports

Props

Name	Type	Default	Description
`categories`	`readonly ChartText[]`	—	Category labels, given once. Every series has one value per category. A label is never cut with an ellipsis: one that does not fit its band wraps inside it, and a band too narrow to wrap in thins labels, ending on the last category. The full text is always the tooltip title.
`label`	`LocalizedMessage`	—	Accessible name of the chart. It names the plot and captions the data table that assistive technology reads. The chart paints no heading; render one beside it if the screen needs one.
`series`	`readonly BarChartSeries[]`	—	The bars, in the order callbacks report as `datasetIndex`. With several series the bars of a category sit side by side.
`beginAtZero`	`boolean`	—	Includes zero on the value axis. Defaults to `true`.
`className`	`string`	—	Classes appended after the generated classes. Put overrides in `@layer chroma.overrides`.
`defaultHiddenSeries`	`readonly number[]`	—	Initial hidden series positions when uncontrolled.
`description`	`LocalizedMessage`	—	Longer description of the chart, read after its name: what it shows, or how to explore it with a keyboard.
`formatTooltipRow`	`((row: BarChartTooltipRow) => ChartText)`	—	Formats one tooltip row, the whole text beside the series swatch. Defaults to the series name and the formatted value.
`formatTooltipTitle`	`((index: number, category: ChartText) => ChartText)`	—	Formats the tooltip heading from the category position and its full label. Defaults to the category label.
`formatValue`	`((value: number) => ChartText)`	—	Formats a value for axis ticks, end labels, tooltip rows and the data table. Defaults to the runtime locale's decimal format. Return `toDisplayValue(...)` for data, or a `LocalizedMessage` when the text carries a unit word.
`hiddenSeries`	`readonly number[]`	—	Controlled list of hidden series positions. Pair with `onHiddenSeriesChange`.
`id`	`string`	—	Id of the root element.
`legendPosition`	`ChartLegendPosition`	—	Legend edge. Defaults to {@link ChartLegendPosition.Top}.
`locale`	`string`	—	BCP 47 locale for the default value format. Defaults to the runtime locale.
`onHiddenSeriesChange`	`((hiddenSeries: readonly number[], details: ChangeDetails<ChangeReason>) => void)`	—	Called with the next list of hidden series positions when a legend entry is pressed, before it applies. `details.cancel()` keeps the current list.
`orientation`	`BarChartOrientation`	—	Vertical or horizontal bars. Defaults to {@link BarChartOrientation.Vertical}.
`palette`	`ChartPaletteInput`	—	Series colors. Defaults to {@link ChartPalette.Categorical}. After the last color the order repeats.
`ref`	`Ref<HTMLDivElement>`	—	Ref to the root element.
`showLegend`	`boolean`	—	Paints a legend whose entries are buttons that show or hide a series or slice. Defaults to `false`.
`showTooltip`	`boolean`	—	Shows the tooltip on hover and keyboard focus. Defaults to `true`.
`showValueAxis`	`boolean`	—	Paints value axis tick labels beside the plot. Defaults to `false`.
`showValueLabels`	`boolean`	—	Paints each value at the end of its bar, formatted by `formatValue`. Room for the labels is reserved automatically. Defaults to `false`.

Storybook

Interactive examples and edge cases for this component are in Storybook.

DefaultOpens in a new tab

Bar Chart / Usage

Bar Chart / Accessibility

On this page