Grid | Cortexcn

Installation

ProPart of Cortexcn Pro

The source for grid comes with a Cortexcn Pro license, along with every other chart and the website templates. Pick a license on the pricing page.

Buy Pro See what is in Pro

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 "@/components/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

For a pattern fill instead of grid lines, use Background in place of Grid.

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);
}