@visx/grid
Advanced tools
Package description
@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.
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"
/>D3.js is a powerful JavaScript library for creating data visualizations. It provides extensive functionality for creating and manipulating SVG elements, including grid lines. However, D3.js is more low-level compared to @visx/grid, which is specifically designed for React and provides higher-level components for grid lines.
Recharts is a composable charting library built on React components. It provides a variety of chart types and includes grid line functionality out of the box. Recharts is more opinionated and higher-level compared to @visx/grid, which offers more flexibility and customization options.
Victory is another React-based charting library that provides a set of modular charting components, including grid lines. Victory is similar to @visx/grid in that it is designed for React, but it offers a more comprehensive set of charting components and is easier to use for common chart types.
Changelog
v1.1.0
@types/d3-scale to ^3.1.0 #856 closes #855Line shapeRendering to crispEdges if rectilinear #840applyPositionStyle prop so users don't have to set absolute positioning when unstyled=true #857initialWidth and initialHeight to withParentSize #836 closes #554ignoreDimensions prop to optimize re-renders #834 closes #247TooltipWithBounds overlowing its parent on small screens #837 closes #466TooltipWithBounds positioning when unstyled=true #828tickLabelProps when hideZero=true #818 fixes #815ParentSize to function component #834Changes:
- @visx/annotation: 1.0.0 => 1.1.0
- @visx/axis: 1.0.0 => 1.1.0
- @visx/brush: 1.0.0 => 1.1.0
- @visx/demo: 1.0.0 => 1.1.0
- @visx/grid: 1.0.0 => 1.1.0
- @visx/legend: 1.0.0 => 1.1.0
- @visx/marker: 1.0.0 => 1.1.0
- @visx/network: 1.0.0 => 1.1.0
- @visx/pattern: 1.0.0 => 1.1.0
- @visx/react-spring: 1.0.0 => 1.1.0
- @visx/responsive: 1.0.0 => 1.1.0
- @visx/scale: 1.0.0 => 1.1.0
- @visx/shape: 1.0.0 => 1.1.0
- @visx/stats: 1.0.0 => 1.1.0
- @visx/text: 1.0.0 => 1.1.0
- @visx/threshold: 1.0.0 => 1.1.0
- @visx/tooltip: 1.0.0 => 1.1.0
- @visx/visx: 1.0.0 => 1.1.0
- @visx/xychart: 1.0.0 => 1.1.0 (private)
Readme
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!
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)}
/>
);
npm install --save @visx/grid
FAQs
visx grid
The npm package @visx/grid receives a total of 231,359 weekly downloads. As such, @visx/grid popularity was classified as popular.
We found that @visx/grid demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers collaborating on the project.
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.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.
Security News
A JavaScript library maintainer is under fire after merging a controversial PR to support legacy versions of Node.js.
Security News
Results from the 2023 State of JavaScript Survey highlight key trends, including Vite's dominance, rising TypeScript adoption, and the enduring popularity of React. Discover more insights on developer preferences and technology usage.