vue-charts 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>
Domains, tick count, custom ticks, tick intervals, tick labels and hidden axis parts are explained in Axis domain and ticks.
XAxis props
| Prop | Type | Default | Description |
|---|---|---|---|
data-key | string | number | Function | — | Key from data |
type | 'number' | 'category' | 'category' | Axis type |
hide | boolean | false | Hide the axis |
orientation | 'top' | 'bottom' | 'bottom' | Axis position |
tick-line | boolean | object | true | Show tick lines |
axis-line | boolean | object | true | Show axis line |
tick-formatter | Function | — | Format tick labels |
tick-count | number | 5 | Number of ticks |
min-tick-gap | number | 5 | Minimum gap between ticks |
domain | Array | Function | — | Axis domain [min, max] |
YAxis props
| Prop | Type | Default | Description |
|---|---|---|---|
data-key | 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 | 'auto' | 60 | Axis width |
tick-line | boolean | object | true | Show tick lines |
axis-line | boolean | object | true | Show axis line |
tick-formatter | Function | — | Format tick labels |
tick-count | number | 5 | Number of ticks |
domain | Array | Function | — | Axis domain [min, max] |
Shared axis props
AxisProps describes the common props; XAxisProps and YAxisProps add the axis-specific settings.
| Prop | Type | Default | Description |
|---|---|---|---|
tick | boolean | SVGAttributes | true | Show or style tick text; use #tick for custom content |
angle | number | 0 | Tick text rotation in degrees |
label | string | number | LabelProps | — | Axis label |
name | string | — | Axis name used in tooltip data |
stroke | string | var(--v-charts-axis, #666) | Axis and tick-line stroke |
tick-size | number | 6 | Tick-line length in pixels |
scale | ScaleType | custom scale | 'auto' | Scale name or a callable scale with copy, domain and range methods |
padding | object | 'gap' | 'no-gap' | Zero padding | X uses left/right; Y uses top/bottom |
x-axis-id / y-axis-id | string | number | 0 | Associate a series with its axis |
<XAxis data-key="day" :tick="false" :angle="-45" label="Day" />
<YAxis orientation="right" :padding="{ top: 8, bottom: 8 }" />
CartesianAxis
<CartesianAxis> is the low-level axis that XAxis and YAxis draw. It has no scale of its own: you pass the position (x, y, width, height, orientation) and the ticks as { value, coordinate } items. Use it only to draw an axis at a place that the chart does not manage, for example inside a composable overlay; in all other cases use XAxis and YAxis.