Api

VPlot

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

The main chart component. Accepts plot configuration via props.

Import

App.vue

import { VPlot } from '@memotux/vue-plot'

Usage

App.vue

<template>
  <VPlot :width="680" :marks="marks" />
</template>

Or with children:

App.vue

<template>
  <VPlot :width="680">
    <PlotBarY :data="data" x="name" y="value" />
  </VPlot>
</template>

Props

VPlot accepts all properties from Observable Plot's PlotOptions, plus the marks prop.

Plot options

Prop	Type	Default	Description
`width`	`number`	Auto	Width of the plot in pixels
`height`	`number`	Auto	Height of the plot in pixels
`marginTop`	`number`	—	Inherits Observable Plot's default
`marginRight`	`number`	—	Inherits Observable Plot's default
`marginBottom`	`number`	—	Inherits Observable Plot's default
`marginLeft`	`number`	—	Inherits Observable Plot's default
`style`	`object`	—	CSS styles applied to the SVG
`className`	`string`	—	CSS class applied to the SVG
`aspectRatio`	`number`	`null`	SVG aspect ratio
`clip`	`boolean`	—	Clip marks to the frame
`nice`	`boolean`	—	Round scales to nice values
`zero`	`boolean`	—	Include zero in scales
`round`	`boolean`	—	Round to integer pixels
`axis`	`string`	—	Default axis label
`grid`	`boolean`	—	Show grid lines

Marks prop

Prop	Type	Description
`marks`	`RenderableMark[]`	Array of mark functions from `@observablehq/plot`

If marks are provided as both props and children, only children are rendered.

Types

types.ts

import type { PlotProps } from '@memotux/vue-plot/types'

// VPlot accepts either PlotOptions or marks-based props
type PlotProps<M extends Marks = Marks> = PlotOptions | PlotMarksProps<M>

Examples

Basic bar chart

App.vue

<script setup lang="ts">
import { barY } from '@observablehq/plot'

const data = [
  { name: 'A', value: 10 },
  { name: 'B', value: 20 },
  { name: 'C', value: 15 },
]

// barY from @observablehq/plot — programmatic API
</script>

<template>
  <VPlot :width="680" :height="400" :marks="[
    barY(data, { x: 'name', y: 'value' })
  ]" />
</template>

Custom margins

App.vue

<template>
  <VPlot
    :width="680"
    :height="400"
    :marginTop="40"
    :marginRight="40"
    :marginBottom="60"
    :marginLeft="80"
  >
    <PlotBarY :data="data" x="name" y="value" />
  </VPlot>
</template>

Responsive width

App.vue

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const data = ref([
  { name: 'A', value: 10 },
  { name: 'B', value: 20 },
  { name: 'C', value: 15 },
])
const container = ref(null)
const width = ref(680)

onMounted(() => {
  const observer = new ResizeObserver(entries => {
    width.value = entries[0].contentRect.width
  })
  observer.observe(container.value)
})
</script>

<template>
  <div ref="container">
    <VPlot :width="width">
      <PlotBarY :data="data" x="name" y="value" />
    </VPlot>
  </div>
</template>

What's next?

Mark Components — All available mark components
TypeScript Types — Type definitions and usage

Edit this pageorReport an issue

Nuxt Integration

Install and configure the @memotux/nuxt-vue-plot module for auto-imports, custom-element compilation, and SSR-compatible chart rendering in Nuxt.

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.