Grid | Bklit UI

Preview

Installation

pnpm dlx shadcn@latest add https://ui.bklit.com/r/grid.json

Usage

The Grid component adds visual reference lines to charts. It must be used inside a chart component (LineChart, AreaChart, BarChart).

import { LineChart, Line, Grid, ChartTooltip } from "@bklitui/ui/charts";

<LineChart data={data}>
  <Grid horizontal />
  <Line dataKey="value" />
  <ChartTooltip />
</LineChart>

Props

Prop	Type	Default	Description
`horizontal`	`boolean`	`true`	Show horizontal grid lines
`vertical`	`boolean`	`false`	Show vertical grid lines
`numTicksRows`	`number`	`5`	Number of horizontal lines
`numTicksColumns`	`number`	`10`	Number of vertical lines
`rowTickValues`	`number[]`	-	Explicit tick values for horizontal grid lines. When set, overrides `numTicksRows`. Use with Live Line Chart so grid rows align with `LiveYAxis` labels.
`stroke`	`string`	`var(--chart-grid)`	Line color
`strokeOpacity`	`number`	`1`	Line opacity
`strokeWidth`	`number`	`1`	Line width
`strokeDasharray`	`string`	`"4,4"`	Dash pattern (empty string for solid)
`fadeHorizontal`	`boolean`	`true`	Fade horizontal lines at left/right edges
`fadeVertical`	`boolean`	`false`	Fade vertical lines at top/bottom edges

Examples

Horizontal Only (Default)

The most common configuration with horizontal reference lines.

<LineChart data={data}>
<Grid horizontal />
<Line dataKey="value" />
<XAxis />
<ChartTooltip />
</LineChart>

<LineChart data={data}><Grid horizontal /><Line dataKey="value" /><XAxis /><ChartTooltip /></LineChart>

Vertical Only

Use vertical grid lines to emphasize time intervals.

<LineChart data={data}>
<Grid horizontal={false} vertical />
<Line dataKey="value" />
<XAxis />
<ChartTooltip />
</LineChart>

<LineChart data={data}><Grid horizontal={false} vertical /><Line dataKey="value" /><XAxis /><ChartTooltip /></LineChart>

Both Horizontal and Vertical

Display a full grid for detailed reference.

<LineChart data={data}>
<Grid horizontal vertical />
<Line dataKey="value" />
<XAxis />
<ChartTooltip />
</LineChart>

<LineChart data={data}><Grid horizontal vertical /><Line dataKey="value" /><XAxis /><ChartTooltip /></LineChart>

Solid Lines

Remove the dash pattern for solid grid lines.

<LineChart data={data}>
<Grid horizontal strokeDasharray="" />
<Line dataKey="value" />
<XAxis />
<ChartTooltip />
</LineChart>

<LineChart data={data}><Grid horizontal strokeDasharray="" /><Line dataKey="value" /><XAxis /><ChartTooltip /></LineChart>

Without Edge Fade

Disable the edge fade effect for sharp line endings.

<LineChart data={data}>
<Grid horizontal fadeHorizontal={false} />
<Line dataKey="value" />
<XAxis />
<ChartTooltip />
</LineChart>

<LineChart data={data}><Grid horizontal fadeHorizontal={false} /><Line dataKey="value" /><XAxis /><ChartTooltip /></LineChart>

Dense Grid

Increase the number of grid lines for more granular reference.

<LineChart data={data}>
<Grid horizontal vertical numTicksRows={10} numTicksColumns={15} />
<Line dataKey="value" />
<XAxis />
<ChartTooltip />
</LineChart>

<LineChart data={data}><Grid horizontal vertical numTicksRows={10} numTicksColumns={15} /><Line dataKey="value" /><XAxis /><ChartTooltip /></LineChart>

Custom Styling

<LineChart data={data}>
  <Grid
    horizontal
    vertical
    stroke="var(--border)"
    strokeOpacity={0.5}
    strokeWidth={0.5}
    strokeDasharray=""
    fadeHorizontal={false}
    fadeVertical={false}
  />
  <Line dataKey="value" />
</LineChart>

Theming

The Grid uses CSS variables for theming:

:root {
  --chart-grid: oklch(0.9 0 0);
}

.dark {
  --chart-grid: oklch(0.25 0 0);
}