Skip to content

Bar

Bars are the right default for comparing a numeric value across discrete categories. Use Plot.barY when categories sit on the x-axis and the bar grows up; Plot.barX when categories sit on the y-axis (better for long labels).

```plot view=monthly_revenue
Plot.barY(data, { x: "month", y: "revenue", fill: "currency" })
```
```plot view=top_customers
Plot.barX(data, { x: "revenue", y: "name", sort: { y: "x", reverse: true } })
```

Default behaviour when you pass a fill channel with overlapping x values — Plot stacks them.

```plot view=monthly_revenue_by_region
Plot.barY(data, { x: "month", y: "revenue", fill: "region" })
```
OptionMeaning
x, ycolumn names (one categorical, one numeric)
fillcolumn name → grouping/stacking
strokecolumn name → border color
sort{ y: "x", reverse: true } to sort the y axis by the x value
tiptrue for hover tooltips, or { format: ... } for custom
dx, dyoffset bars (rarely needed)
insetshrink each bar by N pixels for a gap
mixBlendMode"multiply" for nicer overlap colors

See Observable Plot — bar for the full reference.