Api

Mark Components

Browse all 62 mark components available in Vue Plot — from PlotBarY and PlotDot to statistical, axis, and geo marks — with their Observable Plot mappings and option types.

Every mark from Observable Plot is available as a <Plot*> Vue component.

Naming convention

Observable Plot	Vue Component
`barY(data, options)`	`<PlotBarY :data="data" v-bind="options" />`
`dot(data, options)`	`<PlotDot :data="data" v-bind="options" />`
`lineX(data, options)`	`<PlotLineX :data="data" v-bind="options" />`

Pattern: Plot + capitalize the mark function name.

Common marks

Area marks

Component	Observable Plot	Options Type
`<PlotArea>`	`area()`	`AreaOptions`
`<PlotAreaX>`	`areaX()`	`AreaXOptions`
`<PlotAreaY>`	`areaY()`	`AreaYOptions`

Bar marks

Component	Observable Plot	Options Type
`<PlotBarX>`	`barX()`	`BarXOptions`
`<PlotBarY>`	`barY()`	`BarYOptions`

Dot marks

Component	Observable Plot	Options Type
`<PlotDot>`	`dot()`	`DotOptions`
`<PlotDotX>`	`dotX()`	`DotXOptions`
`<PlotDotY>`	`dotY()`	`DotYOptions`

Line marks

Component	Observable Plot	Options Type
`<PlotLine>`	`line()`	`LineOptions`
`<PlotLineX>`	`lineX()`	`LineXOptions`
`<PlotLineY>`	`lineY()`	`LineYOptions`

Rect marks

Component	Observable Plot	Options Type
`<PlotRect>`	`rect()`	`RectOptions`
`<PlotRectX>`	`rectX()`	`RectXOptions`
`<PlotRectY>`	`rectY()`	`RectYOptions`

Rule marks

Component	Observable Plot	Options Type
`<PlotRuleX>`	`ruleX()`	`RuleXOptions`
`<PlotRuleY>`	`ruleY()`	`RuleYOptions`

Text marks

Component	Observable Plot	Options Type
`<PlotText>`	`text()`	`TextOptions`
`<PlotTextX>`	`textX()`	`TextXOptions`
`<PlotTextY>`	`textY()`	`TextYOptions`

Tick marks

Component	Observable Plot	Options Type
`<PlotTickX>`	`tickX()`	`TickXOptions`
`<PlotTickY>`	`tickY()`	`TickYOptions`

Special marks

Component	Observable Plot	Options Type
`<PlotFrame>`	`frame()`	`FrameOptions`
`<PlotCell>`	`cell()`	`CellOptions`
`<PlotCellX>`	`cellX()`	`CellOptions`
`<PlotCellY>`	`cellY()`	`CellOptions`
`<PlotArrow>`	`arrow()`	`ArrowOptions`
`<PlotImage>`	`image()`	`ImageOptions`
`<PlotLink>`	`link()`	`LinkOptions`
`<PlotVector>`	`vector()`	`VectorOptions`
`<PlotVectorX>`	`vectorX()`	`VectorOptions`
`<PlotVectorY>`	`vectorY()`	`VectorOptions`

Statistical marks

Component	Observable Plot	Options Type
`<PlotBollingerX>`	`bollingerX()`	`BollingerXOptions`
`<PlotBollingerY>`	`bollingerY()`	`BollingerYOptions`
`<PlotBoxX>`	`boxX()`	`BoxXOptions`
`<PlotBoxY>`	`boxY()`	`BoxYOptions`
`<PlotDensity>`	`density()`	`DensityOptions`
`<PlotContour>`	`contour()`	`ContourOptions`
`<PlotLinearRegressionX>`	`linearRegressionX()`	`LinearRegressionXOptions`
`<PlotLinearRegressionY>`	`linearRegressionY()`	`LinearRegressionYOptions`

Other marks

Component	Observable Plot	Options Type
`<PlotBollinger>`	`bollinger()`	`BollingerOptions`
`<PlotCrosshair>`	`crosshair()`	`CrosshairOptions`
`<PlotCrosshairX>`	`crosshairX()`	`CrosshairOptions`
`<PlotCrosshairY>`	`crosshairY()`	`CrosshairOptions`
`<PlotDelaunayLink>`	`delaunayLink()`	`DelaunayOptions`
`<PlotDelaunayMesh>`	`delaunayMesh()`	`DelaunayOptions`
`<PlotDifferenceX>`	`differenceX()`	`DifferenceOptions`
`<PlotDifferenceY>`	`differenceY()`	`DifferenceOptions`
`<PlotGeo>`	`geo()`	`GeoOptions`
`<PlotGeoCentroid>`	`geoCentroid()`	`CentroidOptions`
`<PlotHexgrid>`	`hexgrid()`	`HexgridOptions`
`<PlotHexagon>`	`hexagon()`	`DotOptions`
`<PlotHexbin>`	`hexbin()`	`HexbinOptions`
`<PlotRaster>`	`raster()`	`RasterOptions`
`<PlotTip>`	`tip()`	`TipOptions`
`<PlotTree>`	`tree()`	`TreeOptions`
`<PlotWaffleX>`	`waffleX()`	`WaffleXOptions`
`<PlotWaffleY>`	`waffleY()`	`WaffleYOptions`

Axis marks

Component	Observable Plot	Options Type
`<PlotAxisFx>`	`axisFx()`	`AxisXOptions`
`<PlotAxisFy>`	`axisFy()`	`AxisYOptions`
`<PlotAxisX>`	`axisX()`	`AxisXOptions`
`<PlotAxisY>`	`axisY()`	`AxisYOptions`

Auto

Component	Observable Plot	Options Type
`<PlotAuto>`	`auto()`	`AutoOptions`

Props pattern

Every mark component accepts:

Prop	Type	Description
`data`	`Data`	The dataset to visualize
(all options)	Varies	All options from the corresponding Observable Plot function

App.vue

<PlotDot
  :data="scatterData"
  x="weight"
  y="height"
  r="age"
  fill="steelblue"
  tip
/>

See the Observable Plot documentation for detailed option references for each mark.

Edit this pageorReport an issue

VPlot

Explore the VPlot component API — props from Observable Plot's PlotOptions, the marks prop, responsive sizing, and usage examples.

TypeScript Types

Reference for Vue Plot's exported TypeScript types — PlotProps, PlotMarksProps, Marks, PlotContext, and PlotChildrenContext — with usage.