Grid

Grid renders vertical and horizontal SVG grid lines aligned to a plot domain. It is an absolutely positioned layer intended to sit below data layers.

Import

import { Grid } from '@putianyi888/vue3-plots'

Example

<Grid
  :domain="domain"
  :size="{ width: 640, height: 360 }"
  :x-ticks="xTicks"
  :y-ticks="yTicks"
  stroke-color="#e4e4e7"
  dash-array="4 4"
/>

Props

Prop	Type	Default	Description
domain	PlotDomain		Data-space bounds used to place grid lines.
size	PlotSize		Outer SVG size in pixels.
padding	PlotPadding		Insets shared with other plot layers.
strokeOpacity	MaybeArray<number>	1	Grid line opacity.
strokeWidth	MaybeArray<number>	1	Grid line width in pixels.
xTicks	number[]	[]	X-axis grid positions in data-space coordinates.
yTicks	number[]	[]	Y-axis grid positions in data-space coordinates.
strokeColor	MaybeArray<string>	'none'	Grid line color.
dashArray	MaybeArray<string>	'none'	SVG stroke-dasharray value for grid lines.

Notes

Grid does not render text or axis labels. Use XLabel and YLabel for axis titles.