@visx/axis

What is @visx/axis?

@visx/axis is a part of the VisX library, which provides a collection of low-level visualization components for building custom visualizations in React. The @visx/axis package specifically focuses on rendering axes for charts, including both horizontal and vertical axes, with customizable ticks, labels, and styles.

What are @visx/axis's main functionalities?

Rendering a Basic Axis

This code demonstrates how to render a basic bottom axis using the @visx/axis package. The `AxisBottom` component is used along with a linear scale to create an axis at the bottom of the SVG.

import { AxisBottom } from '@visx/axis';
import { scaleLinear } from '@visx/scale';

const xScale = scaleLinear({ domain: [0, 100], range: [0, 400] });

<svg width={500} height={100}>
  <AxisBottom scale={xScale} top={50} />
</svg>;

Customizing Axis Ticks

This code shows how to customize the ticks of a left axis. The `tickLength` property is used to set the length of the ticks, and the `tickFormat` function is used to format the tick labels.

import { AxisLeft } from '@visx/axis';
import { scaleLinear } from '@visx/scale';

const yScale = scaleLinear({ domain: [0, 100], range: [400, 0] });

<svg width={100} height={500}>
  <AxisLeft
    scale={yScale}
    left={50}
    tickLength={10}
    tickFormat={(value) => `${value}%`}
  />
</svg>;

Styling Axis Components

This example demonstrates how to style the axis components. The `stroke` and `tickStroke` properties are used to set the color of the axis line and ticks, respectively. The `tickLabelProps` function is used to customize the properties of the tick labels.

import { AxisTop } from '@visx/axis';
import { scaleLinear } from '@visx/scale';

const xScale = scaleLinear({ domain: [0, 100], range: [0, 400] });

<svg width={500} height={100}>
  <AxisTop
    scale={xScale}
    top={50}
    stroke='#1b1a1e'
    tickStroke='#1b1a1e'
    tickLabelProps={() => ({
      fill: '#1b1a1e',
      fontSize: 11,
      textAnchor: 'middle',
    })}
  />
</svg>;

Other packages similar to @visx/axis

d3-axis

The `d3-axis` package is part of the D3.js library and provides similar functionality for creating and rendering axes in SVG. It offers a high level of customization and is widely used in the data visualization community. Compared to @visx/axis, `d3-axis` is more low-level and requires more manual setup, but it is also more flexible.

recharts

Recharts is a charting library built on React and D3. It provides a higher-level abstraction for creating charts, including built-in support for axes. Recharts is easier to use for common chart types but offers less customization compared to @visx/axis.

victory

Victory is another React-based charting library that provides components for creating a wide range of charts, including axes. Victory offers a good balance between ease of use and customization. It is more opinionated than @visx/axis but can be quicker to get started with for standard chart types.

README

@visx/axis

An axis component consists of a line with ticks, tick labels, and an axis label that helps viewers interpret your graph.

You can use one of the 4 pre-made axes, or you can create your own based on the <Axis /> element. Note that the @visx/react-spring package exports an AnimatedAxis variant with animated ticks.

Installation

npm install --save @visx/axis