Skip to content

Plots

A Plot block is a fenced markdown block whose body is an Observable Plot expression. PlotPress runs the named view, exposes the result as data, and renders the result of your expression.

ChartMarkUse it forPage
BarPlot.barY / Plot.barXcounts, sums, comparisons across categoriesBar
LinePlot.linetime series, monotone trendsLine
AreaPlot.areaYstacked time series, cumulative volumeArea
Dot (scatter)Plot.dottwo-dimensional relationships, outliersDot
HistogramPlot.rectY + Plot.binXdistribution of a single numeric variableHistogram
HeatmapPlot.celldense 2D categorical or binned dataHeatmap
Box plotPlot.boxY / Plot.boxXdistribution + outliers across categoriesBox plot
```plot view=monthly_revenue
Plot.barY(data, { x: "month", y: "revenue" })
```

Three things happen:

  1. PlotPress runs monthly_revenue against the dashboard’s default connection.
  2. The result rows become data inside the block body.
  3. The expression’s return value is rendered. If it’s a single mark, PlotPress wraps it in Plot.plot({ marks: [...] }). To control margins, scales, color, etc., return a full plot config.

Every chart inherits a small set of defaults so most blocks are one-liners:

DefaultValueOverride
Widthparent widthwidth: NUMBER in the config
Height240 pxheight=NUMBER in the fence info, or height in the config
MarginsPlot’s own (varies by mark)marginLeft, marginRight, etc.
Color schemePlot’s tableau10color: { scheme: "viridis" }
Gridoffy: { grid: true }, x: { grid: true }

Plot’s full mark-option reference is at observablehq.com/plot. Every chart page below lists the most-used options — there are more, and the ones below are stable across Plot’s 0.6.x line.