Api
TypeScript Types
Reference for Vue Plot's exported TypeScript types — PlotProps, PlotMarksProps, Marks, PlotContext, and PlotChildrenContext — with usage.
Vue Plot exports TypeScript types for all components, props, and mark configurations.
Importing types
types.ts
import type {
PlotProps,
PlotMarksProps,
Marks,
PlotContext,
PlotChildrenContext,
} from '@memotux/vue-plot/types'
Type reference
PlotProps
The union type for VPlot props:
types.ts
export type PlotProps = PlotOptions | PlotMarksProps;
PlotOptions— from@observablehq/plot; use with themarkspropPlotMarksProps— used when marks are children (Vue infers this automatically)
PlotMarksProps<M>
Generic type for individual mark component props:
types.ts
export type PlotMarksProps<M extends Marks = "frame"> = {
data?: Data
} & MarksOptions[M]
Usage:
types.ts
import type { PlotMarksProps } from '@memotux/vue-plot/types'
// Props for a barY mark component
type BarYProps = PlotMarksProps<'barY'>
// → { data?: Data } & BarYOptions
// Props for a dot mark component
type DotProps = PlotMarksProps<'dot'>
// → { data?: Data } & DotOptions
Marks
Union of all supported mark names:
types.ts
type Marks =
| 'area' | 'areaX' | 'areaY'
| 'arrow'
| 'auto'
| 'axisFx' | 'axisFy' | 'axisX' | 'axisY'
| 'barX' | 'barY'
| 'bollinger' | 'bollingerX' | 'bollingerY'
| 'boxX' | 'boxY'
| 'cell' | 'cellX' | 'cellY'
| 'contour'
| 'crosshair' | 'crosshairX' | 'crosshairY'
| 'delaunayLink' | 'delaunayMesh'
| 'density'
| 'differenceX' | 'differenceY'
| 'dot' | 'dotX' | 'dotY'
| 'frame'
| 'geo' | 'geoCentroid'
| 'hexgrid' | 'hexagon' | 'hexbin'
| 'image'
| 'line' | 'lineX' | 'lineY'
| 'linearRegressionX' | 'linearRegressionY'
| 'link'
| 'raster'
| 'rect' | 'rectX' | 'rectY'
| 'ruleX' | 'ruleY'
| 'text' | 'textX' | 'textY'
| 'tickX' | 'tickY'
| 'tip'
| 'tree'
| 'vector' | 'vectorX' | 'vectorY'
| 'waffleX' | 'waffleY'
PlotContext
Internal reactive context shared between root plot and child marks:
types.ts
interface PlotContext {
id: string
parent: Readonly<ShallowRef<HTMLDivElement | null>>
root: {
id: string
options: PlotOptions
_ctx?: PlotContext
}
marks: Array<PlotChildrenContext<'frame'>>
_renderQueued: boolean
}
PlotContext is used internally by Vue Plot. You typically don't need to interact with it directly.PlotChildrenContext<M>
Per-mark context for internal mark management:
types.ts
interface PlotChildrenContext<M extends Marks> {
mark: (data: Data | undefined, options: Omit<PlotMarksProps<M>, 'data'> | undefined) => RenderableMark
options: Omit<PlotMarksProps<M>, 'data'> | {}
data: PlotMarksProps<M>['data']
inserted: boolean
id: string
}
Using types in your code
Typing mark props
types.ts
import type { PlotMarksProps } from '@memotux/vue-plot/types'
const barProps: PlotMarksProps<'barY'> = {
data: [
{ name: 'A', value: 10 },
],
x: 'name',
y: 'value',
}
Typing chart configurations
types.ts
import type { PlotMarksProps, Marks } from '@memotux/vue-plot/types'
interface ChartConfig<M extends Marks> {
mark: M
props: PlotMarksProps<M>
}
const config: ChartConfig<'barY'> = {
mark: 'barY',
props: {
data: salesData,
x: 'month',
y: 'revenue',
},
}
Component prop types
Vue Plot extends Vue's global component types:
types.ts
// Vue Plot automatically generates types for every <Plot*> component:
// declare module 'vue' {
// interface GlobalComponents extends PlotComponents {}
// }
// where PlotComponents is a mapped type over all 63 marks in the Marks union.
This means TypeScript will infer correct props for <Plot*> components in templates automatically.
What's next?
- Observable Plot docs — Detailed mark option references
- Vue Plot GitHub — Source code and issues