0
# Pre-built Axis Components
1

2
Pre-configured axis components for standard chart orientations. Each component includes appropriate default styling, positioning, and tick label alignment for its orientation.
3

4
## Components
5

6
### AxisLeft
7

8
Left-oriented axis component with right-aligned tick labels positioned to the left of tick marks.
9

10
```typescript { .api }
11
function AxisLeft<Scale extends AxisScale>(props: SharedAxisProps<Scale>): JSX.Element;
12
```
13

14
**Default styling:**
15
- Tick labels: `textAnchor: 'end'`, positioned with `dx: '-0.25em', dy: '0.25em'`, `fill: '#222'`, `fontFamily: 'Arial'`, `fontSize: 10`
16
- Label offset: 36px
17
- Tick length: 8px
18
- Orientation: `Orientation.left`
19

20
**Usage:**
21

22
```typescript
23
import { AxisLeft } from '@visx/axis';
24
import { scaleLinear } from '@visx/scale';
25

26
const yScale = scaleLinear({
27
  range: [300, 0],
28
  domain: [0, 100],
29
});
30

31
<AxisLeft
32
  scale={yScale}
33
  left={50}
34
  label="Y Values"
35
  stroke="#333"
36
  tickStroke="#333"
37
  tickLabelProps={{
38
    fill: '#333',
39
    fontSize: 12,
40
  }}
41
/>
42
```
43

44
### AxisRight
45

46
Right-oriented axis component with left-aligned tick labels positioned to the right of tick marks.
47

48
```typescript { .api }
49
function AxisRight<Scale extends AxisScale>(props: AxisRightProps<Scale>): JSX.Element;
50

51
type AxisRightProps<Scale extends AxisScale> = SharedAxisProps<Scale>;
52
```
53

54
**Default styling:**
55
- Tick labels: `textAnchor: 'start'`, positioned with `dx: '0.25em', dy: '0.25em'`, `fill: '#222'`, `fontFamily: 'Arial'`, `fontSize: 10`
56
- Label offset: 36px
57
- Tick length: 8px
58
- Orientation: `Orientation.right`
59

60
**Usage:**
61

62
```typescript
63
import { AxisRight } from '@visx/axis';
64

65
<AxisRight
66
  scale={yScale}
67
  left={450}
68
  label="Secondary Y"
69
  numTicks={5}
70
/>
71
```
72

73
### AxisTop
74

75
Top-oriented axis component with center-aligned tick labels positioned above tick marks.
76

77
```typescript { .api }
78
function AxisTop<Scale extends AxisScale>(props: AxisTopProps<Scale>): JSX.Element;
79

80
type AxisTopProps<Scale extends AxisScale> = SharedAxisProps<Scale>;
81
```
82

83
**Default styling:**
84
- Tick labels: `textAnchor: 'middle'`, positioned with `dy: '-0.75em'`, `fill: '#222'`, `fontFamily: 'Arial'`, `fontSize: 10`
85
- Label offset: 8px
86
- Tick length: 8px
87
- Orientation: `Orientation.top`
88

89
**Usage:**
90

91
```typescript
92
import { AxisTop } from '@visx/axis';
93
import { scaleTime } from '@visx/scale';
94

95
const timeScale = scaleTime({
96
  range: [0, 400],
97
  domain: [new Date('2023-01-01'), new Date('2023-12-31')],
98
});
99

100
<AxisTop
101
  scale={timeScale}
102
  top={20}
103
  left={50}
104
  label="Timeline"
105
  tickFormat={(date) => date.toLocaleDateString()}
106
/>
107
```
108

109
### AxisBottom
110

111
Bottom-oriented axis component with center-aligned tick labels positioned below tick marks.
112

113
```typescript { .api }
114
function AxisBottom<Scale extends AxisScale>(props: SharedAxisProps<Scale>): JSX.Element;
115
```
116

117
**Default styling:**
118
- Tick labels: `textAnchor: 'middle'`, positioned with `dy: '0.25em'`, `fill: '#222'`, `fontFamily: 'Arial'`, `fontSize: 10`
119
- Label offset: 8px
120
- Tick length: 8px
121
- Orientation: `Orientation.bottom`
122

123
**Usage:**
124

125
```typescript
126
import { AxisBottom } from '@visx/axis';
127
import { scaleBand } from '@visx/scale';
128

129
const categoryScale = scaleBand({
130
  range: [0, 400],
131
  domain: ['A', 'B', 'C', 'D'],
132
  padding: 0.1,
133
});
134

135
<AxisBottom
136
  scale={categoryScale}
137
  top={300}
138
  left={50}
139
  label="Categories"
140
  tickLabelProps={(value) => ({
141
    fill: value === 'C' ? 'red' : 'black',
142
    fontSize: 11,
143
  })}
144
/>
145
```
146

147
## Common Props
148

149
All pre-built axis components accept the same `SharedAxisProps` interface:
150

151
```typescript { .api }
152
interface SharedAxisProps<Scale extends AxisScale> {
153
  // Required
154
  scale: Scale;
155
  
156
  // Position
157
  left?: number;
158
  top?: number;
159
  
160
  // Ticks
161
  numTicks?: number;
162
  tickValues?: ScaleInput<Scale>[];
163
  tickFormat?: TickFormatter<ScaleInput<Scale>>;
164
  tickLength?: number;
165
  hideTicks?: boolean;
166
  hideZero?: boolean;
167
  
168
  // Axis line
169
  hideAxisLine?: boolean;
170
  axisLineClassName?: string;
171
  stroke?: string;
172
  strokeWidth?: number | string;
173
  strokeDasharray?: string;
174
  
175
  // Labels
176
  label?: string;
177
  labelOffset?: number;
178
  labelProps?: Partial<TextProps>;
179
  labelClassName?: string;
180
  
181
  // Styling
182
  axisClassName?: string;
183
  tickClassName?: string;
184
  tickStroke?: string;
185
  tickLabelProps?: TickLabelProps<ScaleInput<Scale>>;
186
  tickLineProps?: Omit<SVGProps<SVGLineElement>, 'to' | 'from' | 'ref'>;
187
  
188
  // Advanced
189
  rangePadding?: number | { start?: number; end?: number };
190
  tickTransform?: string;
191
  tickComponent?: (tickRendererProps: TickRendererProps) => ReactNode;
192
  ticksComponent?: (tickRendererProps: TicksRendererProps<Scale>) => ReactNode;
193
  innerRef?: Ref<SVGGElement>;
194
  children?: (renderProps: AxisRendererProps<Scale>) => ReactNode;
195
}
196
```
197

198
## Scale Integration
199

200
All pre-built axis components work with any D3-compatible scale:
201

202
```typescript
203
// Linear scales
204
import { scaleLinear } from '@visx/scale';
205
const linearScale = scaleLinear({ range: [0, 400], domain: [0, 100] });
206

207
// Band scales  
208
import { scaleBand } from '@visx/scale';
209
const bandScale = scaleBand({ range: [0, 400], domain: ['A', 'B', 'C'] });
210

211
// Time scales
212
import { scaleTime } from '@visx/scale';
213
const timeScale = scaleTime({ 
214
  range: [0, 400], 
215
  domain: [new Date('2023-01-01'), new Date('2023-12-31')] 
216
});
217

218
// Ordinal scales
219
import { scaleOrdinal } from '@visx/scale';
220
const colorScale = scaleOrdinal({ 
221
  range: ['red', 'blue', 'green'], 
222
  domain: ['Type A', 'Type B', 'Type C'] 
223
});
224
```
225

226
## Customization Examples
227

228
### Custom Tick Formatting
229

230
```typescript
231
<AxisBottom
232
  scale={linearScale}
233
  tickFormat={(value) => `$${value.toFixed(2)}`}
234
/>
235
```
236

237
### Dynamic Tick Label Styling
238

239
```typescript
240
<AxisLeft
241
  scale={yScale}
242
  tickLabelProps={(value, index) => ({
243
    fill: value > 50 ? 'red' : 'black',
244
    fontSize: index % 2 === 0 ? 12 : 10,
245
    fontWeight: value === 0 ? 'bold' : 'normal',
246
  })}
247
/>
248
```
249

250
### Custom Tick Values
251

252
```typescript
253
<AxisBottom
254
  scale={linearScale}
255
  tickValues={[0, 25, 50, 75, 100]}
256
  numTicks={undefined} // Ignored when tickValues provided
257
/>
258
```
259

260
### Hide Specific Elements
261

262
```typescript
263
<AxisLeft
264
  scale={yScale}
265
  hideAxisLine={true}
266
  hideTicks={false}
267
  hideZero={true}
268
/>
269
```
270

271
### Using Default Styling Constants
272

273
```typescript
274
import { AxisLeft, leftTickLabelProps } from '@visx/axis';
275

276
// Use default left tick label props as base
277
<AxisLeft
278
  scale={yScale}
279
  tickLabelProps={{
280
    ...leftTickLabelProps,
281
    fontSize: 12,  // Override specific properties
282
    fill: 'blue'
283
  }}
284
/>
285

286
// Or use them directly for custom styling
287
const customTickProps = {
288
  ...leftTickLabelProps,
289
  fontWeight: 'bold'
290
};
291
```