@visx/axis

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>;