CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-visx--axis

React axis components for data visualization with D3 scale integration, providing pre-built orientations and flexible customization options.

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

@visx/axis

@visx/axis provides React components for creating data visualization axes with full D3 scale integration. It offers pre-built axis components for all four orientations (left, right, top, bottom) and a flexible base component for custom configurations, enabling the creation of professional charts with properly positioned ticks, labels, and axis lines.

Package Information

  • Package Name: @visx/axis
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @visx/axis

Core Imports

import { 
  Axis, 
  AxisLeft, 
  AxisRight, 
  AxisTop, 
  AxisBottom, 
  Orientation,
  SharedAxisProps,
  AxisProps,
  AxisRightProps,
  AxisTopProps,
  leftTickLabelProps,
  rightTickLabelProps,
  topTickLabelProps,
  bottomTickLabelProps
} from "@visx/axis";

For CommonJS:

const { Axis, AxisLeft, AxisRight, AxisTop, AxisBottom, Orientation } = require("@visx/axis");

Basic Usage

import React from 'react';
import { scaleLinear } from '@visx/scale';
import { AxisLeft, AxisBottom } from '@visx/axis';

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

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

function Chart() {
  return (
    <svg width={500} height={400}>
      <AxisLeft
        scale={yScale}
        left={40}
        label="Y Values"
        stroke="#1b1a1e"
        tickStroke="#1b1a1e"
        tickLabelProps={{
          fill: '#1b1a1e',
          fontSize: 11,
          textAnchor: 'end',
        }}
      />
      <AxisBottom
        scale={xScale}
        top={300}
        left={40}
        label="X Values"
        stroke="#1b1a1e"
        tickStroke="#1b1a1e"
        tickLabelProps={{
          fill: '#1b1a1e',
          fontSize: 11,
          textAnchor: 'middle',
        }}
      />
    </svg>
  );
}

Architecture

@visx/axis is built around several key components:

  • Base Axis Component: The flexible Axis component that can be oriented in any direction
  • Oriented Components: Pre-configured components (AxisLeft, AxisRight, AxisTop, AxisBottom) with orientation-specific defaults
  • Scale Integration: Full compatibility with D3 and @visx/scale functions
  • Tick System: Automatic tick positioning, formatting, and rendering with customization options
  • Type Safety: Complete TypeScript definitions for all components and props

Capabilities

Pre-built Axis Components

Ready-to-use axis components with orientation-specific styling and positioning. Perfect for standard chart layouts without configuration overhead.

function AxisLeft<Scale extends AxisScale>(props: SharedAxisProps<Scale>): JSX.Element;
function AxisRight<Scale extends AxisScale>(props: SharedAxisProps<Scale>): JSX.Element;
function AxisTop<Scale extends AxisScale>(props: SharedAxisProps<Scale>): JSX.Element;
function AxisBottom<Scale extends AxisScale>(props: SharedAxisProps<Scale>): JSX.Element;

Pre-built Axis Components

Base Axis Component

Flexible axis component with full customization control. Ideal for custom orientations, complex styling, or when you need complete control over axis behavior.

function Axis<Scale extends AxisScale>(props: AxisProps<Scale>): JSX.Element;

interface AxisProps<Scale extends AxisScale> extends SharedAxisProps<Scale> {
  orientation?: OrientationType;
}

Base Axis Component

Orientation Constants

Orientation constants for axis positioning and validation.

const Orientation: {
  readonly top: "top";
  readonly left: "left";
  readonly right: "right";
  readonly bottom: "bottom";
};

type OrientationType = "top" | "left" | "right" | "bottom";

Default Styling Constants

Exported default styling objects for each axis orientation:

const leftTickLabelProps: {
  readonly dx: "-0.25em";
  readonly dy: "0.25em";
  readonly fill: "#222";
  readonly fontFamily: "Arial";
  readonly fontSize: 10;
  readonly textAnchor: "end";
};

const rightTickLabelProps: {
  readonly dx: "0.25em";
  readonly dy: "0.25em";
  readonly fill: "#222";
  readonly fontFamily: "Arial";
  readonly fontSize: 10;
  readonly textAnchor: "start";
};

const topTickLabelProps: {
  readonly dy: "-0.75em";
  readonly fill: "#222";
  readonly fontFamily: "Arial";
  readonly fontSize: 10;
  readonly textAnchor: "middle";
};

const bottomTickLabelProps: {
  readonly dy: "0.25em";
  readonly fill: "#222";
  readonly fontFamily: "Arial";
  readonly fontSize: 10;
  readonly textAnchor: "middle";
};

Core Types

External types referenced in the API come from:

  • TextProps: From @visx/text - properties for text rendering
  • ReactNode, Ref, SVGProps: From React - standard React types
  • D3Scale, ScaleInput, NumberLike: From @visx/scale - scale-related types
type AxisScale<Output extends AxisScaleOutput = AxisScaleOutput> = D3Scale<Output, any, any>;
type AxisScaleOutput = number | NumberLike | undefined;

interface SharedAxisProps<Scale extends AxisScale> {
  // Position
  left?: number;
  top?: number;
  
  // Scale (required)
  scale: Scale;
  
  // Ticks
  numTicks?: number;
  tickValues?: ScaleInput<Scale>[];
  tickFormat?: TickFormatter<ScaleInput<Scale>>;
  tickLength?: number;
  hideTicks?: boolean;
  hideZero?: boolean;
  
  // Axis line
  hideAxisLine?: boolean;
  axisLineClassName?: string;
  stroke?: string;
  strokeWidth?: number | string;
  strokeDasharray?: string;
  
  // Labels
  label?: string;
  labelOffset?: number;
  labelProps?: Partial<TextProps>;
  labelClassName?: string;
  
  // Styling
  axisClassName?: string;
  tickClassName?: string;
  tickStroke?: string;
  tickLabelProps?: TickLabelProps<ScaleInput<Scale>>;
  tickLineProps?: Omit<SVGProps<SVGLineElement>, 'to' | 'from' | 'ref'>;
  
  // Advanced
  rangePadding?: number | { start?: number; end?: number };
  tickTransform?: string;
  tickComponent?: (tickRendererProps: TickRendererProps) => ReactNode;
  ticksComponent?: (tickRendererProps: TicksRendererProps<Scale>) => ReactNode;
  innerRef?: Ref<SVGGElement>;
  children?: (renderProps: AxisRendererProps<Scale>) => ReactNode;
}

type TickFormatter<T> = (
  value: T,
  index: number,
  values: { value: T; index: number }[]
) => string | undefined;

type TickLabelProps<T> =
  | Partial<TextProps>
  | ((value: T, index: number, values: { value: T; index: number }[]) => Partial<TextProps>);

interface TickRendererProps extends Partial<TextProps> {
  x: number;
  y: number;
  formattedValue: string | undefined;
}

interface TicksRendererProps<Scale extends AxisScale> {
  tickLabelProps: Partial<TextProps>[];
  hideTicks?: boolean;
  horizontal: boolean;
  orientation: OrientationType;
  scale: Scale;
  tickClassName?: string;
  tickComponent?: (tickRendererProps: TickRendererProps) => ReactNode;
  tickStroke?: string;
  tickTransform?: string;
  ticks: ComputedTick<Scale>[];
  strokeWidth?: number | string;
  tickLineProps?: Omit<SVGProps<SVGLineElement>, 'to' | 'from' | 'ref'>;
}

interface AxisRendererProps<Scale extends AxisScale> extends SharedAxisProps<Scale> {
  axisFromPoint: { x: number; y: number };
  axisToPoint: { x: number; y: number };
  horizontal: boolean;
  scale: Scale;
  tickPosition: (value: ScaleInput<Scale>) => AxisScaleOutput;
  tickSign: 1 | -1;
  ticks: ComputedTick<Scale>[];
}

interface ComputedTick<Scale extends AxisScale> {
  value: ScaleInput<Scale>;
  index: number;
  from: { x: number; y: number };
  to: { x: number; y: number };
  formattedValue: string | undefined;
}
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@visx/axis@3.12.x
Publish Source
CLI
Badge
tessl/npm-visx--axis badge