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).
Vertical bars
Section titled “Vertical bars”```plot view=monthly_revenuePlot.barY(data, { x: "month", y: "revenue", fill: "currency" })```Horizontal bars (ranked categories)
Section titled “Horizontal bars (ranked categories)”```plot view=top_customersPlot.barX(data, { x: "revenue", y: "name", sort: { y: "x", reverse: true } })```Stacked
Section titled “Stacked”Default behaviour when you pass a fill channel with overlapping x values — Plot stacks them.
```plot view=monthly_revenue_by_regionPlot.barY(data, { x: "month", y: "revenue", fill: "region" })```Common options
Section titled “Common options”| Option | Meaning |
|---|---|
x, y | column names (one categorical, one numeric) |
fill | column name → grouping/stacking |
stroke | column name → border color |
sort | { y: "x", reverse: true } to sort the y axis by the x value |
tip | true for hover tooltips, or { format: ... } for custom |
dx, dy | offset bars (rarely needed) |
inset | shrink each bar by N pixels for a gap |
mixBlendMode | "multiply" for nicer overlap colors |
See Observable Plot — bar for the full reference.