Grid | Bklit UI

Preview

Installation

pnpm dlx shadcn@latest add @bklit/grid

pnpm dlx shadcn@latest add @bklit/grid

The Grid component adds visual reference lines to charts. It must be used inside a chart component (LineChart, AreaChart, BarChart, ScatterChart, CandlestickChart, LiveLineChart, and other cartesian charts).

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)
`highlightRowValues`	`number[]`	—	Emphasize horizontal lines at specific y values (e.g. `[0]` for break-even)
`highlightRowStroke`	`string`	`var(--chart-foreground-muted)`	Stroke for highlighted rows
`highlightRowStrokeOpacity`	`number`	`1`	Opacity for highlighted rows
`highlightRowStrokeWidth`	`number`	`1`	Width for highlighted rows
`highlightRowStrokeDasharray`	`string`	`"0"`	Dash pattern for highlighted rows
`fadeHorizontal`	`boolean`	`true`	Fade horizontal lines at left/right edges
`fadeVertical`	`boolean`	`false`	Fade vertical lines at top/bottom edges
`hideHorizontalEdgeLines`	`boolean`	`false`	Omit the first and last horizontal grid lines
`hideVerticalEdgeLines`	`boolean`	`false`	Omit the first and last vertical grid lines

Studio

Edit in Studio

Open in Studio

Open Studio with the line chart, select Grid in the components tree, and tune lines, stroke, and edge options in the properties panel. The same controls are available on area, bar, candlestick, live line, line, and scatter charts.

For a pattern fill instead of grid lines, hide Grid and use Background in Studio or in code.

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>

Hide edge lines

Omit the outermost horizontal or vertical grid lines — useful when the chart border already provides a frame.

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

<LineChart data={data}>  <Grid horizontal hideHorizontalEdgeLines />  <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);
}