Guide · Open source

How to use visx: install packages and build a React bar chart

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

visx is an MIT-licensed collection of low-level visualization components for React, written in TypeScript. It uses d3 for calculations and math while React updates the page. This guide shows you how to install the packages you need and build a simple bar chart, so you can see how the pieces fit together.

visxairbnb/visx · ★ 21.1k · MIT Install options & downloads

Quick start

1Check prerequisites. Make sure you have Node.js, npm and a project using React 18 or React 19.
2Install the packages. Run the npm install command for the mock-data, group, shape and scale packages.
3Import the components. Import letterFrequency, Group, Bar and the scale helpers into your component file.
4Define dimensions and margins. Set width, height and margin values, then compute the inner xMax and yMax bounds.
5Create the scales. Use scaleBand for the x-axis letters and scaleLinear for the frequency values on the y-axis.
6Render the bars in an SVG. Map over the data and draw a Bar inside an svg element for each letter.

What visx is and who it is for

visx provides reusable building blocks rather than finished charts. You install only the small packages you need, such as shapes or scales, and combine them into your own charts. Under the hood it uses d3 for the math, so you do not have to write d3 selection code by hand.

It suits React developers who want full control over how a chart looks and behaves, teams building their own chart library, and developers who already know d3 and want its math without its DOM update style. It is not a good fit if you want ready-made charts with no coding, or if your project does not use React.

Good fit: full control over chart appearance and behaviour
Good fit: a shared, reusable chart library for a team
Good fit: small bundles, because you import only the packages you use
Not a fit: no-code charting
Not a fit: projects that need built-in animation
Not a fit: projects not using React

What you need before you install visx

The source lists two prerequisites: Node.js and npm, and React 18 or 19. visx v4 is the current stable release and requires React 18 or 19. The README notes that upgrading from v3 is covered by a migration guide in the repository.

Node.js and npm
React 18 or React 19

Install the visx packages for a bar chart

Install the packages used in the README example. Each visx package is separate, so you add only the ones you need. The example uses mock data, a group helper, a shape component and a scale helper.

npm install --save @visx/mock-data @visx/group @visx/shape @visx/scale

Build a simple bar chart with visx

The README example draws a bar graph of letter frequencies. It imports the mock data and components, sets width, height and margins, then creates two scales: a band scale for the letters on the x-axis and a linear scale for the frequencies on the y-axis. Each letter is drawn as a Bar inside an SVG.

Copy the code into a React component in your project. The bars are filled with #fc2e1c in this example. You can change the colour, sizes and scales to suit your data.

Import letterFrequency from @visx/mock-data as sample data
Use Group from @visx/group and Bar from @visx/shape
Create scaleBand and scaleLinear from @visx/scale
Render the bars inside an svg element

import React from 'react';
import { letterFrequency } from '@visx/mock-data';
import { Group } from '@visx/group';
import { Bar } from '@visx/shape';
import { scaleLinear, scaleBand } from '@visx/scale';

const data = letterFrequency;
const width = 500;
const height = 500;
const margin = { top: 20, bottom: 20, left: 20, right: 20 };
const xMax = width - margin.left - margin.right;
const yMax = height - margin.top - margin.bottom;
const getLetter = (d) => d.letter;
const getFrequency = (d) => d.frequency * 100;

const xScale = scaleBand({
  range: [0, xMax],
  round: true,
  domain: data.map(getLetter),
  padding: 0.4,
});
const yScale = scaleLinear({
  range: [yMax, 0],
  round: true,
  domain: [0, Math.max(...data.map(getFrequency))],
});

function BarGraph() {
  return (
    <svg width={width} height={height}>
      {data.map((d) => {
        const letter = getLetter(d);
        const barHeight = yMax - (yScale(getFrequency(d)) ?? 0);
        return (
          <Group key={`bar-${letter}`}>
            <Bar
              x={xScale(letter)}
              y={yMax - barHeight}
              height={barHeight}
              width={xScale.bandwidth()}
              fill="#fc2e1c"
            />
          </Group>
        );
      })}
    </svg>
  );
}

Find more examples and documentation

The visx docs and gallery are linked from the README. The gallery shows more examples built with visx. The changelog and migration guide are in the repository for version history and upgrades.

To use visx with Preact, the README says to alias react and react-dom to preact/compat, and for visx v4 to configure your package manager to satisfy the React 18/19 peer dependency range.

Docs: airbnb.io/visx
Gallery: airbnb.io/visx/gallery
Homepage: visx.airbnb.tech

What people use it for

Building a reusable chart library on shared React components for a team
Creating a custom one-off chart with full control over its look and behaviour
Drawing bar charts with d3 math but without writing d3 selection code
Keeping bundle size small by importing only the visx packages you need

Frequently asked questions

How do I install visx?

Install the packages you need with your package manager. The README example uses npm install --save @visx/mock-data @visx/group @visx/shape @visx/scale. visx is split into small packages, so you add only the ones your chart uses.

What are the requirements for visx?

You need Node.js and npm, and a project using React 18 or React 19. The README states that visx v4, the current stable release, requires React 18 or 19.

Is visx free to use?

visx is licensed under the MIT licence, as shown in the repository. The source does not describe any paid tier.

Does visx include animation?

No. The README says visx deliberately does not include animation and suggests using existing React animation libraries instead. If you need animated charts, plan to pair visx with a React animation library.

How does visx compare to Recharts, Victory, Nivo or react-chartjs-2?

Those projects are listed as comparable options. visx is a set of low-level building blocks, so it gives more control but requires more code than libraries that ship finished charts. Choose visx if you want to build your own charts and choose a finished-chart library if you want ready-made charts with little code.

Can visx work with Preact?

The README says yes. Alias react and react-dom to preact/compat. For visx v4, configure your package manager to satisfy the React 18 or 19 peer dependency range.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

visx is a strong choice for React developers and teams who want full control over custom charts, and who are comfortable writing their own chart code. It is a poor fit if you need ready-made charts with no coding, built-in animation, or a project that does not use React, in which case a finished-chart library such as Recharts, Victory, Nivo or react-chartjs-2 may suit you better.

Install options & downloads