<Chart.Bar /> renders a classic bar chart. Data with no seriesId is rendered as a single series.
Give points a seriesId to render several series, side by side by default or stacked with
mode="stacked".
A multi-series chart draws a legend, since its colors are the only thing naming the series. A
single-series chart draws none.
See Using charts for height tokens, color tokens, format, and the
empty and error states.
Example: Grouped
mode defaults to "grouped". Series sit side by side, in the order of the series array.
TypeScript
Example: Stacked
mode="stacked" stacks one segment per series. seriesId is required in data when using
"stacked" mode. The series array’s order is the bottom-to-top order of the stack.
TypeScript
Props
Array<ChartDatum> | Array<ChartSeriesDatum>
required
The data set to be plotted. Each point is
{x, y, seriesId?}. x is a category or position: an
ISO date string or a number, never a Date. y is the value.In "stacked" mode, seriesId is required on every point.'grouped' | 'stacked'
Bars side by side, or stacked on each other.Defaults to
"grouped".Array<ChartSeries>
Names, colors, and orders the series ids used in
data. Each entry is
{id, label, color?}.Listing a series is optional, and listing an id that no point uses is ignored. The array’s order
is the order of the legend, the grouping, and the stacking. Ids missing from it follow, in order
of first appearance in data.A single-series chart (points with no seriesId) takes its color and its tooltip label from the
first entry, and ignores that entry’s id.ChartAxis
The category axis.
{label?, format?, currency?}. format and currency follow the
shared format rules.ChartAxis
The value axis.
{label?, format?, currency?}. format="currency" needs a sibling currency
code.string
A caption above the chart.
'small' | 'medium' | 'large' | 'extraLarge'
The height of the whole chart, including title and legend.Defaults to
"medium" (240px). See Using charts.