@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
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>
Default | 0 |
# GridColumns.lineStyle<object>
# GridColumns.numTicks<number>
Default | 10 |
# GridColumns.offset<number>
# GridColumns.scale<func> required
# GridColumns.stroke<string>
Default | '#eaf0f6' |
# GridColumns.strokeDasharray<string>
# GridColumns.strokeWidth<union(string|number)>
Default | 1 |
# GridColumns.tickValues<array>
# GridColumns.top<number>
Default | 0 |
<GridRows />
# GridRows.className<string>
# GridRows.left<number>
Default | 0 |
# GridRows.lineStyle<object>
# GridRows.numTicks<number>
Default | 10 |
# GridRows.offset<number>
# GridRows.scale<func> required
# GridRows.stroke<string>
Default | '#eaf0f6' |
# GridRows.strokeDasharray<string>
# GridRows.strokeWidth<union(string|number)>
Default | 1 |
# GridRows.tickValues<array>
# GridRows.top<number>
Default | 0 |
# GridRows.width<number> required