@visx/grid is a part of the VisX library, which provides a set of low-level visualization components for building custom visualizations in React. The @visx/grid package specifically offers components for rendering grid lines in charts, which can help in creating more readable and organized data visualizations.

What are @visx/grid's main functionalities?

Grid Rows

This feature allows you to render horizontal grid lines (rows) in your chart. The GridRows component takes a scale, width, height, and other styling properties to render the grid lines.

import { GridRows } from '@visx/grid';
import { scaleLinear } from '@visx/scale';
import { extent } from 'd3-array';

const data = [10, 20, 30, 40, 50];
const yScale = scaleLinear({
  domain: extent(data),
  range: [0, 400],
});

<GridRows
  scale={yScale}
  width={500}
  height={400}
  stroke="black"
  strokeDasharray="2,2"
/>

Grid Columns

This feature allows you to render vertical grid lines (columns) in your chart. The GridColumns component takes a scale, height, and other styling properties to render the grid lines.

import { GridColumns } from '@visx/grid';
import { scaleLinear } from '@visx/scale';
import { extent } from 'd3-array';

const data = [10, 20, 30, 40, 50];
const xScale = scaleLinear({
  domain: extent(data),
  range: [0, 500],
});

<GridColumns
  scale={xScale}
  height={400}
  stroke="black"
  strokeDasharray="2,2"
/>

Grid

This feature allows you to render both horizontal and vertical grid lines in your chart. The Grid component takes xScale, yScale, width, height, and other styling properties to render the grid lines.

import { Grid } from '@visx/grid';
import { scaleLinear } from '@visx/scale';
import { extent } from 'd3-array';

const data = [10, 20, 30, 40, 50];
const xScale = scaleLinear({
  domain: extent(data),
  range: [0, 500],
});
const yScale = scaleLinear({
  domain: extent(data),
  range: [0, 400],
});

<Grid
  xScale={xScale}
  yScale={yScale}
  width={500}
  height={400}
  stroke="black"
  strokeDasharray="2,2"
/>

Other packages similar to @visx/grid

Readme

Source

@visx/grid

The @visx/grid package lets you create gridlines for charts. <GridRows /> render horizontally, <GridColumns /> render vertically, or you can use a <Grid /> to get them both at once!

Usage

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

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

Installation

npm install --save @visx/grid

Keywords

FAQs

What is @visx/grid?

Is @visx/grid popular?

Is @visx/grid well maintained?

Last updated on 28 Jun 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install