Components
Axes
Configure X and Y axes for cartesian charts
<XAxis> and <YAxis> render axis lines, ticks, and labels for cartesian charts.
Add axes
<BarChart :width="500" :height="300" :data="data">
<XAxis data-key="name" />
<YAxis />
<Bar data-key="value" fill="#8884d8" />
</BarChart>
Hide axis lines
<YAxis :tick-line="false" :axis-line="false" />
Format tick labels
<XAxis data-key="date" :tick-formatter="(value) => new Date(value).toLocaleDateString()" />
Customize tick count
<YAxis :tick-count="3" />
XAxis props
| Prop | Type | Default | Description |
|---|---|---|---|
dataKey | string | number | Function | — | Key from data |
type | 'number' | 'category' | 'category' | Axis type |
hide | boolean | false | Hide the axis |
orientation | 'top' | 'bottom' | 'bottom' | Axis position |
tickLine | boolean | object | true | Show tick lines |
axisLine | boolean | object | true | Show axis line |
tickFormatter | Function | — | Format tick labels |
tickCount | number | — | Number of ticks |
minTickGap | number | 5 | Minimum gap between ticks |
domain | Array | — | Axis domain [min, max] |
YAxis props
| Prop | Type | Default | Description |
|---|---|---|---|
dataKey | string | number | Function | — | Key from data |
type | 'number' | 'category' | 'number' | Axis type |
hide | boolean | false | Hide the axis |
orientation | 'left' | 'right' | 'left' | Axis position |
width | number | 60 | Axis width |
tickLine | boolean | object | true | Show tick lines |
axisLine | boolean | object | true | Show axis line |
tickFormatter | Function | — | Format tick labels |
tickCount | number | — | Number of ticks |
domain | Array | — | Axis domain [min, max] |