Grid

Subtle background gridlines aligned with axis nice-ticks. Place as the first child of ChartRoot for correct z-order.

Primitive: ChartGrid

Interactive demo

Usage

import { ChartRoot, ChartGrid, ChartLine } from '@ramtt/charts'

<ChartRoot data={data} height={200}>
  <ChartGrid horizontal vertical />
  <ChartLine />
</ChartRoot>

Props

Prop	Type	Default	Description
horizontal	`boolean`	true	Render horizontal gridlines (Y ticks)
vertical	`boolean`	false	Render vertical gridlines (X ticks)
tickCount	`number`	4	Horizontal tick count (match ChartAxisY)
verticalTickCount	`number`	6	Vertical tick count
strokeDasharray	`string`	'3 3'	Dash pattern (use "" for solid)
className	`string`	—	Class on the grid <g>