@vx/grid

The @vx/grid package lets you create rows and columns. Or, you can use a <Grid /> to get them both at once!

Example

grid example

import { Grid } from '@vx/grid';
// or
// import * as Grid from '@vx/grid';
// <Grid.Grid />

const grid = (
  <Grid
    xScale={xScale}
    yScale={yScale}
    width={xMax}
    height={yMax}
    numTicksRows={numTicksForHeight(height)}
    numTicksColumns={numTicksForWidth(width)}
  />
);

Installation

npm install --save @vx/grid

Components

API

<Grid />

# Grid.className<string>

# Grid.columnLineStyle<object>

# Grid.columnTickValues<array>

# Grid.height<number> required

# Grid.left<number>

# Grid.numTicksColumns<number>

# Grid.numTicksRows<number>

# Grid.rowLineStyle<object>

# Grid.rowTickValues<array>

# Grid.stroke<string>

# Grid.strokeDasharray<string>

# Grid.strokeWidth<union(string|number)>

# Grid.top<number>

# Grid.width<number> required

# Grid.xOffset<number>

# Grid.xScale<func> required

# Grid.yOffset<number>

# Grid.yScale<func> required

<GridColumns />

# GridColumns.className<string>

# GridColumns.height<number> required

# GridColumns.left<number>
Default0

# GridColumns.lineStyle<object>

# GridColumns.numTicks<number>
Default10

# GridColumns.offset<number>

# GridColumns.scale<func> required

# GridColumns.stroke<string>
Default'#eaf0f6'

# GridColumns.strokeDasharray<string>

# GridColumns.strokeWidth<union(string|number)>
Default1

# GridColumns.tickValues<array>

# GridColumns.top<number>
Default0

<GridRows />

# GridRows.className<string>

# GridRows.left<number>
Default0

# GridRows.lineStyle<object>

# GridRows.numTicks<number>
Default10

# GridRows.offset<number>

# GridRows.scale<func> required

# GridRows.stroke<string>
Default'#eaf0f6'

# GridRows.strokeDasharray<string>

# GridRows.strokeWidth<union(string|number)>
Default1

# GridRows.tickValues<array>

# GridRows.top<number>
Default0

# GridRows.width<number> required