Bar Chart
Bar charts compare values across categories, in the Shoreline design language with zero styling effort.
Experimental. BarChart is not stable yet: it ships in @vtex/shoreline-charts at 0.x, so its API and visuals may change between minor versions.
BarChart lives in the separate @vtex/shoreline-charts package. Install it and import its stylesheet once in your app:
pnpm add @vtex/shoreline-chartsimport { BarChart } from '@vtex/shoreline-charts'
import '@vtex/shoreline-charts/css'Examples
Variants
direction sets the bar orientation: vertical (the default) or horizontal.
Grouping
grouping controls how multiple series combine: grouped (the default) places them side by side, stacked piles them into a single bar per category.
Series aggregation
Only maxSeries series render (default 3); the rest fold into a single Others aggregate that takes the last slot’s color. Raise maxSeries to give more series their own name and color. It is capped at 6 — the palette length — and series past the cap still aggregate, so raising maxSeries never drops data.
Tooltip with deltas
Each series can carry a deltas array — one entry per category — shown in the hover tooltip beside the value. direction (up / down / flat) and tone (success / critical / neutral) are independent, because a decrease is not inherently bad: falling complaints is direction: 'down' with tone: 'success'. The comparison data need not be plotted — it only feeds the tooltip.
Loading state
Pass loading to show a skeleton placeholder instead of the chart while data is being fetched.
Empty state
When no series has any non-null value, the chart renders its empty state. Override the message through the messages prop, or let it localize from the surrounding LocaleProvider.
Negative values
Negative values render below the zero line. Corner radius is resolved per bar from the value’s sign, so bars below zero round at their far end rather than at the zero line — including the outermost segment of a stacked bar with mixed signs.
Localization
Internal messages — the empty state and the Others aggregate — localize from the surrounding LocaleProvider. Data supplied through props is not translated: series names and categories are the consumer’s to localize.
Required props
series
Chart series. Multiple series render per the grouping prop. At most
maxSeries of them render: past that, the tail is summed per category
into a single aggregate series named after the others message.
categories
Labels of the category axis, in render order. Every series provides one value per category.
label
Accessible name announced for the chart.
Optional props
description
Accessible long description of what the chart shows.
direction
Orientation of the bars.
grouping
How multiple series combine: side by side or stacked.
loading
Shows a loading placeholder instead of the chart.
messages
Overrides the chart's internal messages, which are otherwise localized from
the surrounding LocaleProvider.
maxSeries
How many series render at most. Raise it to give more series their own name and color instead of aggregating them; the default keeps the chart to the primary and secondary series plus the aggregate.
Capped at 6 — the palette has that many colors and never cycles them. Series past the cap still aggregate, so no data is dropped.
Related components
Table
Table lists items vertically and can include actions for each row. The columns display property values for users to scan, sort, and compare.
Collection
Collection combines a list of items with controls for the view. The list can be a Table and the controls can be a Search, Filters, and Pagination.
EmptyState
An Empty State represents the state of a container, such as when there are no items to display or when the user isn't allowed to access items.
Skeleton
Skeletons compose a low-fidelity representation of content that will load. They appear when the entire page is loading and take up to 5s.