Bar
Vertical and horizontal bar charts with stacking, dodging, and optional value labels.
The workhorse mark. Use bars when comparing values across categories.
barY
Vertical bars – categories on x, values on y:
barX
Horizontal bars – flip the axes. Good for long category labels:
Stacking
When fill maps to a field, bars stack by default. Each color segment shows its contribution to the total:
Dodging
Set group: "dodge" to place bars side-by-side. Better for comparing individual series values:
With value labels
Use the bar's built-in label property. It understands stacking, chooses a legible text color, and positions values relative to the actual bar or segment:
Numeric labels and a numeric axis often repeat the same information. For a clean labeled bar chart, usually keep the category axis and hide the value axis: y: { display: false } for barY, or x: { display: false } for barX. Keep the value axis for dense charts, category-only labels, or comparisons where the shared scale is important.
For stacked bars, use label: { show: ["value", "total"] } to place each segment value inside its color and the total above the whole stack. Other label parts are category and percent; combine them as needed.
Properties
| Field | Type | Default | Description |
|---|---|---|---|
group | "stack" | "dodge" | "stack" | How to group bars when a color field is present. |
cornerRadius | number | theme | Corner radius on the value end of the bar (defaults to the theme's barCornerRadius). |
label | true | { show?: ("value" | "percent" | "category" | "total")[]; position?: "auto" | "outside" | "inside"; format?: string } | – | Label bars with any of value, percent, category, or stack total – combine them (e.g. ["category","value"]) for a composite. A mixed-sign stack gets separate positive and negative totals. true shows the value. format accepts a D3 number-format specifier. When numeric labels make the value axis redundant, hide y for barY or x for barX. |