Docs • Gallery • Changelog • Migration
```
/* Detailed source-code truncated for AI context efficiency. */
```
For more examples using `visx`, check out the [gallery](https://airbnb.io/visx/gallery).
## Motivation
**Goal**
The goal is to create a library of components you can use to make both your own reusable chart
library or your slick custom one-off chart. visx is largely unopinionated and is meant to be built
upon. Keep your bundle sizes down and use only the packages you need.
**How?**
Under the hood, visx is using d3 for the calculations and math. If you're creating your own awesome
chart library on top of visx, it's easy to create a component api that hides d3 entirely. Meaning
your team could create charts as easily as using reusable react components.
**But why?**
Mixing two mental models for updating the DOM is never a good time. Copy and pasting d3 code into
`useEffect()` is just that. This collection of components lets you easily build your own reusable
visualization charts or library without having to learn d3. No more selections or
`enter()`/`exit()`/`update()`.
## FAQ
1. What does `visx` stand for?
> visx stands for visualization components.
1. Do you plan on supporting animation/transitions?
> A common criticism of visx is it doesn't have animation baked in, but this was a conscious
> choice. It's a powerful feature to not bake it in.
>
> Imagine your app already bundles `react-motion`, adding a hypothetical `@visx/animation` is
> bloat. Since visx is react, it already supports all react animation libs.
>
> Charting libraries are like style guides. Each org or app will eventually want full control
> over their own implementation.
>
> visx makes this easier for everyone. No need to reinvent the wheel each time.
>
> more info:
A brush allows you to select a sub-region of your chart or axis.
## Installation
```
npm install --save @visx/brush
```
---
### Overview (`packages/visx-chart/Readme.md`)
# @visx/chart
Chart-level React hooks and helpers for building primitive visx charts without adopting a chart
framework. The package starts with shared layout and domain helpers that registry-style charts can
use before composing `@visx/axis`, `@visx/scale`, `@visx/shape`, and other low-level primitives.
## Installation
```sh
npm install --save @visx/chart
```
## Motivation
visx charts are usually assembled from several packages: one package for scales, one for axes, one
for marks, one for interaction, and application code for the SVG frame around them. That composition
is the point, but every primitive chart still tends to rebuild the same chart-level setup:
- outer SVG dimensions
- margin defaults
- inner drawable width and height
- `xMax` and `yMax` aliases used throughout visx examples
- common numeric domains for primitive chart scales
- responsive width fallbacks while parent measurement initializes
- stable layout objects for downstream hooks and components
Those details are small, but they become repetitive in examples, dashboards, and registry items.
`@visx/chart` gives primitive charts one shared place for that chart-level setup while leaving scale
construction, rendering, interaction, animation, and state ownership in user code.
## Primitive-first design
The chart package is a convenience layer, not a chart framework.
- Hooks return ordinary values that can be passed to any visx primitive.
- The package does not render SVG elements or own a chart scene graph.
- Data accessors, scales, axes, marks, events, and animation remain explicit.
- Layout defaults are normalized, but callers can keep their own sizing system.
- You can use the chart hooks with one visx package, many visx packages, or custom SVG.
This keeps registry examples compact without hiding the pieces that make visx flexible. If a chart
needs a custom margin model, responsive container, canvas renderer, or no shared layout helper at
all, the primitive API still supports that.
## Basic usage
Use `useChartDimensions` to normalize an outer chart size and margin into the inner drawing area.
```tsx
import { Group } from '@visx/group';
import { useChartDimensions } from '@visx/chart';
const margin = { top: 16, right: 16, bottom: 32, left: 40 };
export function ChartFrame({ width, height, children }) {
const dimensions = useChartDimensions({ width, height, margin });
return (
);
}
```
The hook fills missing margin sides with `0`, treats non-finite dimensions as `0`, and clamps the
inner drawing area to `0` so marks never receive negative layout space.
## Numeric domains
Use the domain helpers when a primitive chart needs the usual safe defaults for empty, invalid, or
single-value data.
```tsx
import { getPositiveDomain, getZeroBaselineDomain } from '@visx/chart';
const yDomain = getZeroBaselineDomain(data.map((datum) => datum.value));
const stackedYDomain = getPositiveDomain(
data.map((datum) => datum.desktop + datum.mobile + datum.tablet),
);
```
`getZeroBaselineDomain` includes zero and expands equal domains. `getPositiveDomain` returns a
positive `[0, max]` domain with an empty fallback of `[0, 1]`. `getPaddedDomain` is available for
plots such as scatter charts where the domain should wrap finite values with proportional padding.
## Axis ticks
Use the tick helpers when a chart axis may become too dense in responsive layouts.
`getVisibleTickValues` thins explicit category tick values while preserving the first and last tick
by default, and `getAxisTickCount` computes a conservative numeric tick count from the available
axis length.
```tsx
import { getAxisTickCount, getVisibleTickValues } from '@visx/chart';
const xTickValues = getVisibleTickValues(months, {
axisLength: dimensions.innerWidth,
minTickSpacing: 48,
});
const yNumTicks = getAxisTickCount({
axisLength: dimensions.innerHeight,
maxTicks: 5,
minTickSpacing: 48,
});
```
The helpers only choose visible axis labels. They do not remove data points, bars, bins, or table
fallback rows.
## Responsive width fallback
Use `getResponsiveWidth` when a responsive container may report `0`, `NaN`, or another
non-renderable width while layout measurement initializes.
```tsx
import { getResponsiveWidth } from '@visx/chart';
const chartWidth = getResponsiveWidth(measuredWidth, 640);
```
The helper returns the measured width only when it is finite and greater than `0`; otherwise it
returns the fallback width.
## Chart config
Use `ChartConfig` when labels, colors, icons, and theme-specific tokens should live outside the
chart data. This mirrors the way registry charts are usually copied into app code: the data can come
from an API while chart presentation stays colocated with the component.
```tsx
import { getChartConfigColor, getChartConfigLabel, type ChartConfig } from '@visx/chart';
const chartConfig = {
bookings: {
label: 'Bookings',
color: 'var(--chart-1)',
},
revenue: {
label: 'Revenue',
theme: {
light: 'oklch(0.646 0.222 41.116)',
dark: 'oklch(0.488 0.243 264.376)',
},
},
} satisfies ChartConfig;
const label = getChartConfigLabel(chartConfig, 'bookings');
const color = getChartConfigColor(chartConfig, 'bookings', 'currentColor');
```
`getChartCssVariables` can turn a config into `--color-*` CSS variables for chart shells that want
the same token style as copied registry components.
## Working with scales
`xMax` and `yMax` are aliases for `innerWidth` and `innerHeight`, matching the naming used in many
visx examples.
```tsx
import { useChartDimensions } from '@visx/chart';
import { useScale } from '@visx/scale/react';
export function useRevenueScales({ data, width, height }) {
const dimensions = useChartDimensions({
width,
height,
margin: { top: 16, right: 16, bottom: 32, left: 48 },
});
const maxRevenue = Math.max(0, ...data.map((datum) => datum.revenue));
const xScale = useScale({
type: 'band',
domain: data.map((datum) => datum.month),
range: [0, dimensions.xMax],
padding: 0.2,
});
const yScale = useScale({
type: 'linear',
domain: [0, maxRevenue],
range: [dimensions.yMax, 0],
nice: true,
});
return { dimensions, xScale, yScale };
}
```
## Recipes
### Bar chart shell
```tsx
import { AxisBottom, AxisLeft } from '@visx/axis';
import { Group } from '@visx/group';
import { Bar } from '@visx/shape';
import { useChartDimensions } from '@visx/chart';
import { useScale } from '@visx/scale/react';
const margin = { top: 16, right: 16, bottom: 32, left: 48 };
export function RevenueBars({ data, width, height }) {
const dimensions = useChartDimensions({ width, height, margin });
const maxRevenue = Math.max(0, ...data.map((datum) => datum.revenue));
const xScale = useScale({
type: 'band',
domain: data.map((datum) => datum.month),
range: [0, dimensions.xMax],
padding: 0.2,
});
const yScale = useScale({
type: 'linear',
domain: [0, maxRevenue],
range: [dimensions.yMax, 0],
nice: true,
});
return (
);
}
```
### Responsive dimensions
`useChartDimensions` does not measure the DOM. Pair it with your app's layout system or with
`@visx/responsive` when a chart should fill available space.
```tsx
import { getResponsiveWidth } from '@visx/chart';
import { ParentSize } from '@visx/responsive';
export function ResponsiveRevenueBars({ data }) {
return (
Chord diagrams show directed relationships among a group of entities in a radial layout.
## Installation
```
npm install --save @visx/chord
```
---
### Overview (`packages/visx-clip-path/Readme.md`)
# @visx/clip-path
React utilities for defining `
## Installation
```
npm install --save @visx/curve
```
## Overview
The `@visx/curve` package is a wrapper of the [d3-shape](https://github.com/d3/d3-shape) curve
functions. A `curve` is a function that can be passed into other `visx` objects that draw lines or
paths, such as a `LinePath`, to change the way the line between points is drawn. Click on the
example below for an interactive way to explore curve aesthetics.
Any function with the prefix `curve` in `d3` can be used through `visx` like so:
```javascript
import { curveCatmullRomOpen } from '@visx/curve';
let line = (
## Overview
A Voronoi diagram partitions a two-dimensional plane into regions based on a set of input points.
Each unique input point maps to a corresponding region, where each region represents _all points
that are closer to the input point than to any other input point_.
Not only are Voronoi diagrams π, but they can be used to
[improve the interactive experience of a visualization](https://www.visualcinnamon.com/2015/07/voronoi.html).
This is most often accomplished by overlaying an invisible voronoi grid on top of the visualization
to increase the target area of interaction sites such as points on a scatter plot.
The `@visx/delaunay` package provides a wrapper around the existing
[d3-delaunay](https://github.com/d3/d3-delaunay) package with some `react`-specific utilities.
## Installation
```
npm install --save @visx/delaunay
```
## Usage
The `@visx/delaunay` package exports a wrapped version of the d3 `voronoi` and `delaunay` layouts for flexible usage,
as well as a `
`@visx/drag` provides `react` components and hooks for making items within an interface (or chart)
draggable.
## Installation
```
npm install --save @visx/drag
```
---
### Overview (`packages/visx-event/Readme.md`)
# @visx/event
## Installation
```
npm install --save @visx/event
```
## Usage
`@visx/event` exports a utility `localPoint` that takes an `SVG` `MouseEvent` or `TouchEvent` as
input and returns a `{ x: number; y: number; }` point coordinate (or `null` in the case the event
has no `ownerSVGElement`) within the coordinate system of the `SVG`. This makes placement of
tooltips, finding nearby datum, etc. easier.
Example:
```tsx
import { localPoint } from '@visx/event';
```
You may optionally pass a reference to the SVG node
```tsx
import { useRef } from 'react';
import { localPoint } from '@visx/event';
const svgRef = useRef
The `@visx/geo` package provides `react` components for rendering common and custom geographic
projections. `
Glyphs are small marks or symbols that you can use in your charts. Example:
[https://airbnb.io/visx/glyphs](https://airbnb.io/visx/glyphs)
## Installation
```
npm install --save @visx/glyph
```
---
### Overview (`packages/visx-gradient/Readme.md`)
# @visx/gradient
Inspired by: https://dribbble.com/shots/3380672-Sketch-Gradients-Freebie
## Example
```js
import { AreaClosed } from '@visx/shape';
import { GradientPinkBlue } from '@visx/gradient';
const GradientArea = () => {
return (
);
};
```
## The Definition Caveat
Like patterns, gradients are "defined." When you render `
The `@visx/grid` package lets you create gridlines for charts. `
`
A Heatmap is an arrangement of shapes where the data values are represented as colors.
## Example
```js
Many datasets are intrinsically hierarchical. This package contains several `react` components for
visualizing hierarchical data and largely mirrors
[`d3-hierarchy`](https://github.com/d3/d3-hierarchy).
Many components take the same input `hierarchy` data root node as defined in as specified in the
[`d3-hierarchy`](https://github.com/d3/d3-hierarchy) module. For convenience, this package also
exports the [`d3-hierarchy`](https://github.com/d3/d3-hierarchy)utility to generate this format.
```js
// equivalent to `import { hierarchy } from 'd3-hierarchy';`
import { hierarchy } from '@visx/hierarchy';
const root = hierarchy({
name: 'root',
children: [
{ name: 'child #1' },
{
name: 'child #2',
children: [{ name: 'grandchild #1' }, { name: 'grandchild #2' }, { name: 'grandchild #3' }],
},
],
});
```
## Installation
```
npm install --save @visx/hierarchy
```
---
### Overview (`packages/visx-kernel/Readme.md`)
# @visx/kernel
Shared primitives for first-party visx hooks.
`@visx/kernel` keeps user-input handling consistent across the hooks surface: referential stability,
structural equality, accessor normalization, and shared development warnings live in one package
instead of being reimplemented in each consumer package. It also provides stable id generation for
shared SVG and a11y patterns.
## Installation
```sh
npm install --save @visx/kernel
```
## Motivation
visx hooks are designed around one idea: hooks own the math, users own the render tree. That means
first-party hooks like `useScale`, `useAxis`, and `usePie` all receive the same kinds of user input:
data arrays, accessors, options objects, dimensions, ids, and callbacks.
Without a shared substrate, each package has to answer the same questions independently:
- Does this object-shaped input have the same values as last render?
- Should a string accessor and a simple property function behave the same way?
- How do we keep callback identity stable while reading fresh state?
- How do we warn about dirty data with consistent source tags and structured details?
- How do we generate stable ids for clip paths, gradients, labels, and a11y relationships?
Those are cross-cutting contracts, not chart-specific features. `@visx/kernel` keeps them small,
audited, and consistent so the hooks surface behaves like one library instead of many similar local
implementations.
## Primitive-first design
Kernel is not a chart package. It does not create scales, render axes, lay out marks, or own chart
state. It provides the tiny pieces that make those packages predictable.
- Hooks return ordinary values and refs.
- Pure helpers are safe to import on the server.
- User input is normalized before package-specific work begins.
- Warning payloads share one shape across packages.
- Public helpers are added only when multiple first-party packages need the same behavior.
Most applications should use higher-level visx packages directly. Kernel is mainly for first-party
hooks and advanced users building the same kind of low-level primitives.
## Basic usage
### Stabilize object-shaped inputs
Use `useStructuralMemo` when an options object should keep the same reference if its shallow values
are unchanged.
```tsx
import { useStructuralMemo } from '@visx/kernel';
function ChartFrame({ margin }) {
const stableMargin = useStructuralMemo(
{
top: margin?.top ?? 0,
right: margin?.right ?? 0,
bottom: margin?.bottom ?? 0,
left: margin?.left ?? 0,
},
1,
);
return 
Legends associate shapes and colors to data, and are associated with scales.
## Example
```js
import { LegendThreshold } from '@visx/legend';
import { scaleThreshold } from '@visx/scale';
const threshold = scaleThreshold({
domain: [0.02, 0.04, 0.06, 0.08, 0.1],
range: ['#f2f0f7', '#dadaeb', '#bcbddc', '#9e9ac8', '#756bb1', '#54278f'],
});
function MyChart() {
return (
Markers are graphical objects attached to a `
The `@visx/mock-data` package is here to help you test out your graphs.
## Installation
```
npm install --save @visx/mock-data
```
## Generators
Generators can create simple generic data for you like this:
```js
import Mock from '@visx/mock-data';
const points = Mock.genRandomNormalPoints();
```
### `Mock.genRandomNormalPoints()`
Returns a series of random normal x,y points.
### `Mock.getDateValue(n)`
Generates `n` date values an hour apart from each other starting with the current time.
## Mocks
Mock are essentially a bunch of data dumps that you can use like this:
```js
import Mock from '@visx/mock-data';
// or import { cityTemperature } from '@visx/mock-data';
const data = Mock.cityTemperature;
```
### `Mock.appleStock`
```js
interface AppleStock {
date: string;
close: number;
}
const appleStock: AppleStock[] = [
{ date: '2007-04-24T07:00:00.000Z', close: 93.24 },
...
];
```
### `Mock.bitcoinPrice`
```js
interface BitcoinPrices {
currency: string;
prices: BitcoinPrice[];
}
const bitcoinPrice: BitcoinPrices = {
currency: 'USD',
prices: [
{ price: '2486.69', time: '2017-07-03T00:00:00Z' },
...
]
};
```
### `Mock.browserUsage`
```js
const browserUsage: BrowserUsage[] = [
{
date: '2015 Jun 15',
'Google Chrome': '48.09',
'Internet Explorer': '24.14',
Firefox: '18.82',
Safari: '7.46',
'Microsoft Edge': '0.03',
Opera: '1.32',
Mozilla: '0.12',
'Other/Unknown': '0.01',
},
...
];
```
### `Mock.cityTemperature`
```ts
interface CityTemperature {
date: string;
'New York': string;
'San Francisco': string;
Austin: string;
}
const cityTemperature: CityTemperature[] = [
{
date: '20111001',
'New York': '63.4',
'San Francisco': '62.7',
Austin: '72.2',
},
...
];
```
### `Mock.exoplanets`
```ts
interface Exoplanets {
name: string;
radius: number;
distance: number | null;
}
const exoplanets: Exoplanets[] = [
{
name: 'Jupiter',
radius: 10.97,
distance: 0,
},
...
];
```
### `Mock.groupDateValue`
```ts
interface GroupDateValue {
key: string;
value: string;
date: string;
}
const groupDateValue: GroupDateValue[] = [
{ key: 'Group1', value: '37', date: '04/23/12' },
...
];
```
### `Mock.lesMiserables`
```ts
interface LesMiserablesNode {
id: string;
group: number;
}
interface LesMiserablesLink {
source: string;
target: string;
value: number;
}
interface LesMiserables {
nodes: LesMiserablesNode[];
links: LesMiserablesLink[];
}
const lesMiserables: LesMiserables = {
nodes: [
{ id: 'Myriel', group: 1 },
...
],
links: [
{ source: 'Napoleon', target: 'Myriel', value: 1 },
...
],
};
```
### `Mock.letterFrequency`
```ts
interface LetterFrequency {
letter: string;
frequency: number;
}
const letterFrequency: LetterFrequency[] = [
{ letter: 'A', frequency: 0.08167 },
...
];
```
### `Mock.shakespeare`
```ts
interface Shakespeare {
id: string;
parent: string | null;
size: number | null;
}
const shakespeare: Shakespeare[] = [
{
id: 'Shakespeare',
parent: null,
size: 0,
},
...
];
```
## Source For Components
### `generators/`
- [genDateValue()](https://github.com/airbnb/visx/blob/master/packages/visx-mock-data/src/generators/genDateValue.ts)
- [genRandomNormalPoints()](https://github.com/airbnb/visx/blob/master/packages/visx-mock-data/src/generators/genRandomNormalPoints.ts)
### `mocks/`
- [appleStock](https://github.com/airbnb/visx/blob/master/packages/visx-mock-data/src/mocks/appleStock.ts)
- [browserUsage](https://github.com/airbnb/visx/blob/master/packages/visx-mock-data/src/mocks/browserUsage.ts)
- [cityTemperature](https://github.com/airbnb/visx/blob/master/packages/visx-mock-data/src/mocks/cityTemperature.ts)
- [groupDateValue](https://github.com/airbnb/visx/blob/master/packages/visx-mock-data/src/mocks/groupDateValue.ts)
- [letterFrequency](https://github.com/airbnb/visx/blob/master/packages/visx-mock-data/src/mocks/letterFrequency.ts)
---
### Overview (`packages/visx-network/Readme.md`)
# @visx/network
A simple package to visualize a network or graph layout. Does not currently handle network layout.
## Example Usage
```js
import { Graph, DefaultLink, DefaultNode } from '@visx/network';
const nodes = [
{ x: 50, y: 20 },
{ x: 200, y: 300 },
{ x: 300, y: 40 },
];
const dataSample = {
nodes,
links: [
{ source: nodes[0], target: nodes[1] },
{ source: nodes[1], target: nodes[2] },
{ source: nodes[2], target: nodes[0] },
],
};
const MyGraph = () => (
Inspired by: http://riccardoscalco.github.io/textures/
## Example
```js
import { AreaClosed } from '@visx/shape';
import { PatternLines } from '@visx/pattern';
const PatternArea = () => {
return (
);
};
```
## The Definition Caveat
Like gradients, patterns are "defined." When you put down a `
A simple class to represent an `x, y` coordinate.
## Installation
```
npm install --save @visx/point
```
## Example Usage
```js
import { Point } from '@visx/point';
const point = new Point({ x: 2, y: 3 });
const { x, y } = point.value(); // Get the coords as an object
const [x, y] = point.toArray(); // or array
```
## Methods
### `point.value()`
Returns an `{ x, y }` object with the x and y coordinates.
### `point.toArray()`
Returns the coordinates as an array `[x, y]`.
---
### Overview (`packages/visx-react-spring/README.md`)
# @visx/react-spring
Although `visx` is largely unopinioned on animation, there is value in abstracting the complexity +
boilerplate of building **animated** `visx` visualization components. This package requires
`react-spring` as a `peerDependency` (to be compatible with any usage within your app) and exports
all `visx` components that depend on `react-spring`.
[`react-spring`](https://www.react-spring.io/) provides performant primitives for animating react
components and is our recommended library for making animated charts. In order to minimize
`react-spring` as a dependency across other `visx` packages, we've consolidated components which
depend on it here.
## Installation
```
npm install --save react-spring @visx/react-spring
```
---
### Overview (`packages/visx-registry/Readme.md`)
# @visx/registry
Source files and validation scripts for the visx shadcn registry. This package is private and has no
runtime API; it exists to ship drop-in chart components through GitHub registry installs.
## Motivation
visx is intentionally low level: primitives take props, compose freely, and stay out of your app's
state model. That is what makes visx useful for unusual charts, custom dashboards, and product
interfaces that do not fit a fixed charting API.
The tradeoff is that teams often need a good starting point before they can customize. A line chart,
bar chart, heatmap chart, or treemap chart usually needs the same surrounding work:
- responsive SVG sizing
- theme token usage
- axis and grid styling
- accessible SVG labels and descriptions
- hidden data table fallbacks
- live region wiring
- installable dependency metadata
That work is valuable, but it is repetitive. `@visx/registry` packages those starting points as
copyable registry items while keeping the installed output plain React and visx primitives.
## Registry-first design
The registry package is distribution infrastructure, not a chart framework.
- Registry items install into user projects as source files.
- Installed charts depend on public visx packages, not `@visx/registry`.
- Source files live under `registry/charts`.
- The repository root `registry.json` is the public GitHub registry entrypoint.
- The source registries are committed, but generated `public/r` item JSON is not.
- Each chart remains editable after install.
This keeps the installed result compatible with the rest of visx: users can change scales, marks,
themes, accessibility labels, data accessors, and layout directly in their app.
## Local development
Add or edit chart source in `registry/charts`, then update `registry.json` with the item metadata,
dependencies, source path, and install target.
```sh
yarn registry:validate
```
This validates both the root GitHub registry entrypoint and the package source registry with the
shadcn CLI.
Run the focused registry test suite when changing chart source, metadata, or build scripts:
```sh
yarn vitest run --project @visx/registry
```
Run the install smoke when changing public item names, file targets, dependencies, or exported
component names:
```sh
yarn registry:smoke
```
The smoke test installs every registry item into fresh Next and Vite fixtures with the real shadcn
CLI and typechecks the installed source.
## Item structure
Each registry item should have a stable install name and a matching component export.
```txt
registry/charts/line-chart/line-chart.tsx
components/charts/line-chart.tsx
export function LineChart()
```
Use the `-chart` suffix for chart item names, source files, targets, and exported components. This
keeps registry install names, file names, and generated import names predictable.
## GitHub installs
The public registry entrypoint is the repository root `registry.json`, which includes this package's
source registry:
```txt
registry.json
packages/visx-registry/registry.json
```
After the registry branch lands on the default branch and the referenced visx packages are
published, items can be installed with the shadcn CLI by GitHub address:
```sh
npx shadcn@latest add airbnb/visx/line-chart
```
The local smoke test builds registry item JSON into a temporary directory only so unpublished branch
changes can still be installed into fresh fixtures.
## Accessibility and theming
Registry charts should ship with live accessibility wiring from `@visx/a11y` and theme token usage
from `@visx/theme`.
Use `showLiveRegion={false}` when rendering multiple charts on a page that owns a single shared
announcer. The chart should still render its SVG semantics and hidden data table fallback.
Charts should read theme values through visx theme hooks and CSS-ready variables, rather than
hard-coding light and dark mode branches.
---
### Overview (`packages/visx-responsive/Readme.md`)
# @visx/responsive
The `@visx/responsive` package is here to help you make responsive graphs by providing a collection
of hooks, enhancers and components.
## Installation
```
npm install --save @visx/responsive
```
## Hooks
### `useScreenSize`
If you would like your graph to adapt to the screen size, you can use the `useScreenSize()` hook. It
returns current screen width and height and updates the value automatically on browser window
resize. You can optionally pass a config object as an argument to the hook. Config object attributes
are:
- `initialSize` - initial size before measuring the screen, defaults to `{ width: 0, height: 0 }`.
- `debounceTime` - determines how often the size is updated in milliseconds, defaults to `300`.
- `enableDebounceLeadingCall` - determines whether the size is updated immediately on first render,
defaults to `true`. This is essentially the value of
[`options.leading` in Lodash's `debounce`](https://lodash.com/docs/4.17.15#debounce).
#### Example
```tsx
import { useScreenSize } from '@visx/responsive';
const ChartToRender = () => {
const { width, height } = useScreenSize({ debounceTime: 150 });
return (
);
};
const chartToRender = 
Sankey diagrams visualize the directed flow between nodes in an acyclic network. This package
contains `react` components for visualizing sankey diagrams and largely mirrors
[`d3-sankey`](https://github.com/d3/d3-sankey).
Many components take the same input `sankey` data as defined in as specified in the
[`d3-sankey`](https://github.com/d3/d3-sankey) module to output a graph of the sankey layout. For
convenience, this package also exports the [`d3-sankey`](https://github.com/d3/d3-sankey)utility to
generate this format.
## Installation
```
npm install --save @visx/sankey
```
## Usage
The `@visx/sankey` package exports a wrapped version of `d3-sankey` for flexible usage, as well as a
`
## Installation
```sh
npm install --save @visx/scale
```
## Overview of scales
The `@visx/scale` package aims to provide a wrapper around existing `d3` scaling originally defined
in the [d3-scale](https://github.com/d3/d3-scale) package.
Scales are functions that help you map your data values to the physical pixel size that your graph
requires. For example, let's say you wanted to create a bar chart to show populations per country.
If you were to use a 1-to-1 scale (IE: 1 pixel per y value) your bar for the USA would be about
321.4 million pixels high!
Instead, you can tell `visx` a function to use that takes a data value (like your population per
country) and quantitatively maps to another dimensional space, like pixels.
For example, we could create a linear scale like this:
```js
const graphWidth = 500;
const graphHeight = 200;
const [minX, maxX] = getXMinAndMax();
const [minY, maxY] = getYMinAndMax();
const xScale = Scale.scaleLinear({
domain: [minX, maxX], // x-coordinate data values
range: [0, graphWidth], // svg x-coordinates, svg x-coordinates increase left to right
round: true,
});
const yScale = Scale.scaleLinear({
domain: [minY, maxY], // y-coordinate data values
// svg y-coordinates, these increase from top to bottom so we reverse the order
// so that minY in data space maps to graphHeight in svg y-coordinate space
range: [graphHeight, 0],
round: true,
});
// ...
const points = data.map((d, i) => {
const barHeight = graphHeight - yScale(d.y);
return
Shapes are the core elements of `visx`. Most of what you see on the screen, like lines, bars, and
areas are all made with shape primitives.
## Installation
```
npm install --save @visx/shape
```
---
### Overview (`packages/visx-stats/Readme.md`)
# @visx/stats
The package provides `react` components for visualizing distributions, such as Box Plots and Violin
Plots
## Installation
```
npm install --save @visx/stats
```
---
### Overview (`packages/visx-text/Readme.md`)
# @visx/text
The `@visx/text` provides a better SVG `
`@visx/threshold` allows for creation of Difference Charts in `react`, which highlight the delta
between two line series.
## Installation
```
npm install --save @visx/threshold
```
---
### Overview (`packages/visx-tooltip/Readme.md`)
# @visx/tooltip
The `@visx/tooltip` package provides utilities for making it easy to add `Tooltip`s to a
visualization and includes hooks, higher-order component (HOC) enhancers, and Tooltip components.
### Installation
```
npm install --save @visx/tooltip
```
### Modern Floating UI tooltips
`@visx/tooltip` also includes an additive Floating UI-backed surface for modern tooltip positioning.
Import it from the explicit React subpath:
```tsx
import {
ChartTooltip,
ChartTooltipContent,
FloatingTooltip,
useChartTooltip,
useFloatingTooltip,
} from '@visx/tooltip/floating';
```
Existing `@visx/tooltip` exports are unchanged. Use the modern subpath when a chart needs
collision-aware placement, virtual anchors, SVG or cursor anchoring, arrows, controlled state, or
config-driven chart tooltip content.
#### Manual chart tooltip
`useChartTooltip()` owns tooltip open state, anchor state, and rendered items. Your chart still owns
nearest-datum lookup and event handling.
```tsx
import { localPoint } from '@visx/event';
import { ChartTooltip, type ChartTooltipConfig, useChartTooltip } from '@visx/tooltip/floating';
type Datum = { month: string; revenue: number };
const tooltipConfig = {
revenue: {
label: 'Revenue',
color: '#3b82f6',
formatValue: (value) => `$${Number(value).toLocaleString()}`,
},
} satisfies ChartTooltipConfig