tessl/npm-visx--axis
React axis components for data visualization with D3 scale integration, providing pre-built orientations and flexible customization options.
—
Pending
prebuilt-axes.mddocs/
Pre-built Axis Components
Pre-configured axis components for standard chart orientations. Each component includes appropriate default styling, positioning, and tick label alignment for its orientation.
Components
AxisLeft
Left-oriented axis component with right-aligned tick labels positioned to the left of tick marks.
function AxisLeft<Scale extends AxisScale>(props: SharedAxisProps<Scale>): JSX.Element;Default styling:
- Tick labels:
textAnchor: 'end', positioned withdx: '-0.25em', dy: '0.25em',fill: '#222',fontFamily: 'Arial',fontSize: 10 - Label offset: 36px
- Tick length: 8px
- Orientation:
Orientation.left
Usage:
import { AxisLeft } from '@visx/axis';
import { scaleLinear } from '@visx/scale';
const yScale = scaleLinear({
range: [300, 0],
domain: [0, 100],
});
<AxisLeft
scale={yScale}
left={50}
label="Y Values"
stroke="#333"
tickStroke="#333"
tickLabelProps={{
fill: '#333',
fontSize: 12,
}}
/>AxisRight
Right-oriented axis component with left-aligned tick labels positioned to the right of tick marks.
function AxisRight<Scale extends AxisScale>(props: AxisRightProps<Scale>): JSX.Element;
type AxisRightProps<Scale extends AxisScale> = SharedAxisProps<Scale>;Default styling:
- Tick labels:
textAnchor: 'start', positioned withdx: '0.25em', dy: '0.25em',fill: '#222',fontFamily: 'Arial',fontSize: 10 - Label offset: 36px
- Tick length: 8px
- Orientation:
Orientation.right
Usage:
import { AxisRight } from '@visx/axis';
<AxisRight
scale={yScale}
left={450}
label="Secondary Y"
numTicks={5}
/>AxisTop
Top-oriented axis component with center-aligned tick labels positioned above tick marks.
function AxisTop<Scale extends AxisScale>(props: AxisTopProps<Scale>): JSX.Element;
type AxisTopProps<Scale extends AxisScale> = SharedAxisProps<Scale>;Default styling:
- Tick labels:
textAnchor: 'middle', positioned withdy: '-0.75em',fill: '#222',fontFamily: 'Arial',fontSize: 10 - Label offset: 8px
- Tick length: 8px
- Orientation:
Orientation.top
Usage:
import { AxisTop } from '@visx/axis';
import { scaleTime } from '@visx/scale';
const timeScale = scaleTime({
range: [0, 400],
domain: [new Date('2023-01-01'), new Date('2023-12-31')],
});
<AxisTop
scale={timeScale}
top={20}
left={50}
label="Timeline"
tickFormat={(date) => date.toLocaleDateString()}
/>AxisBottom
Bottom-oriented axis component with center-aligned tick labels positioned below tick marks.
function AxisBottom<Scale extends AxisScale>(props: SharedAxisProps<Scale>): JSX.Element;Default styling:
- Tick labels:
textAnchor: 'middle', positioned withdy: '0.25em',fill: '#222',fontFamily: 'Arial',fontSize: 10 - Label offset: 8px
- Tick length: 8px
- Orientation:
Orientation.bottom
Usage:
import { AxisBottom } from '@visx/axis';
import { scaleBand } from '@visx/scale';
const categoryScale = scaleBand({
range: [0, 400],
domain: ['A', 'B', 'C', 'D'],
padding: 0.1,
});
<AxisBottom
scale={categoryScale}
top={300}
left={50}
label="Categories"
tickLabelProps={(value) => ({
fill: value === 'C' ? 'red' : 'black',
fontSize: 11,
})}
/>Common Props
All pre-built axis components accept the same SharedAxisProps interface:
interface SharedAxisProps<Scale extends AxisScale> {
// Required
scale: Scale;
// Position
left?: number;
top?: number;
// 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;
}Scale Integration
All pre-built axis components work with any D3-compatible scale:
// Linear scales
import { scaleLinear } from '@visx/scale';
const linearScale = scaleLinear({ range: [0, 400], domain: [0, 100] });
// Band scales
import { scaleBand } from '@visx/scale';
const bandScale = scaleBand({ range: [0, 400], domain: ['A', 'B', 'C'] });
// Time scales
import { scaleTime } from '@visx/scale';
const timeScale = scaleTime({
range: [0, 400],
domain: [new Date('2023-01-01'), new Date('2023-12-31')]
});
// Ordinal scales
import { scaleOrdinal } from '@visx/scale';
const colorScale = scaleOrdinal({
range: ['red', 'blue', 'green'],
domain: ['Type A', 'Type B', 'Type C']
});Customization Examples
Custom Tick Formatting
<AxisBottom
scale={linearScale}
tickFormat={(value) => `$${value.toFixed(2)}`}
/>Dynamic Tick Label Styling
<AxisLeft
scale={yScale}
tickLabelProps={(value, index) => ({
fill: value > 50 ? 'red' : 'black',
fontSize: index % 2 === 0 ? 12 : 10,
fontWeight: value === 0 ? 'bold' : 'normal',
})}
/>Custom Tick Values
<AxisBottom
scale={linearScale}
tickValues={[0, 25, 50, 75, 100]}
numTicks={undefined} // Ignored when tickValues provided
/>Hide Specific Elements
<AxisLeft
scale={yScale}
hideAxisLine={true}
hideTicks={false}
hideZero={true}
/>Using Default Styling Constants
import { AxisLeft, leftTickLabelProps } from '@visx/axis';
// Use default left tick label props as base
<AxisLeft
scale={yScale}
tickLabelProps={{
...leftTickLabelProps,
fontSize: 12, // Override specific properties
fill: 'blue'
}}
/>
// Or use them directly for custom styling
const customTickProps = {
...leftTickLabelProps,
fontWeight: 'bold'
};Install with Tessl CLI
npx tessl i tessl/npm-visx--axis