Gridlines

import { Gridlines } from "nanoplot/Gridlines"

The gridlines component is used to add gridlines to the graph. It can be used to add gridlines to the X and Y axes and border.

Props

Name	Description	Type	Required	Default
`vertical`	When true renders vertical gridlines on each tick along x axis.	`boolean`	No	`true`
`horizontal`	When true renders horizontal gridlines on each tick along x axis.	`boolean`	No	`true`
`border`	When true renders border gridlines along left/right/top/bottom sides	`boolean`	No	`true`

Examples

Snippet	Result
`<Gridlines/>`	Border, vertical and horizontal grid lines are rendered
`<Gridlines border={false}/>`	Only vertical and horizontal grid lines are rendered
`<Gridlines vertical={false}/>`	Only horizontal grid lines are rendered
`<Gridlines horizontal={false}/>`	Only vertical grid lines are rendered
`<Gridlines border={false} vertical={false} />`	Only horizontal grid lines are rendered
`<Gridlines classNames={{ vertical: "[stroke-dasharray:4,4]" }} />`	All grid lines are rendered, but vertical lines are dotted
`<Gridlines classNames={{ horizontal: "[stroke-dasharray:4,4]", vertical: "[stroke-dasharray:4,4]" }} />`	All grid lines are rendered, but both horizontal and vertical lines are dotted