Bar – Charts

A bar chart shows distribution within a single series. Each bar is a variable, so variant assigns color per datum. Use monochrome for four or fewer ordered variables, and categorical for five or more.

Design rules: Bar charts
Shared API / tooltips / palettes: Chart component

Minimal option

Define structure and data in the option. The palette, corner radius, and hover behavior come from variant. Orientation follows the axis layout rather than a Chart prop: the category axis holds the labels and the value axis holds the measurements.

Variant styling

variant applies the following treatment:

Concern	Behavior
Color	Monochrome steps or categorical hues by datum index
Corner radius	Open end of each bar, following orientation and sign
Hover	Series focus and blur

Avoid hand-authoring borderRadius or palette hex values to reproduce this treatment.

Direct labels

Direct labels keep values visible without hover. Categorical bar charts require them, because the categorical hues do not all reach a 3:1 contrast ratio against each other. The chart theme styles bar.label with a font, a translucent background, and 4px of padding, and leaves it at show: false. Enable it for the orientation in use:

Vertical bars: label: { show: true, position: "top" } places the label above the open end
Horizontal bars: label: { show: true, position: "right" } places the label past the open end

Leave renderTooltip unset when direct labels carry enough information. Widen grid on the open end so labels are not clipped.

Tooltips

Pass renderTooltip for richer hover content, either in place of direct labels or alongside them. See Chart component.

​Minimal option

​Variant styling

​Direct labels

​Tooltips

Minimal option

Variant styling

Direct labels

Tooltips