Axis

Axis renders an axis line, tick marks, and tick labels. It is an absolutely positioned SVG layer, so place it inside a relatively positioned plot container.

Use direction="horizontal" for an x-axis and direction="vertical" for a y-axis. The position prop replaces the old x/y-specific position props: for a horizontal axis it is the y data-space position, and for a vertical axis it is the x data-space position.

Import

import { Axis } from '@putianyi888/vue3-plots'

Example

vue

<template>
    <div class="example-frame" :style="{ height: `${size.height}px`, width: `${size.width}px` }">
        <TransformGroup :domain="domain" :size="size" :padding="padding">
            <Grid :x-ticks="xTicks" :y-ticks="yTicks" stroke-color="#e2e8f0" :stroke-opacity="0.5" />
            <Axis direction="horizontal" :position="25" :ticks="xTicks">
                <template #tick="{ tick }">
                    {{ months[tick] }}
                </template>
            </Axis>
            <Axis direction="vertical" :ticks="yTicks" />
        </TransformGroup>
    </div>
</template>

<script setup lang="ts">
import { Axis, Grid, TransformGroup } from '@putianyi888/vue3-plots'
import type { PlotDomain, PlotPadding, PlotSize } from '@putianyi888/vue3-plots'

const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
const size: PlotSize = { width: 640, height: 240 }
const padding: PlotPadding = { top: 24, right: 24, bottom: 40, left: 48 }
const domain: PlotDomain = { xMin: -0.5, xMax: months.length - 0.5, yMin: 0, yMax: 100 }
const xTicks = months.map((_, index) => index)
const yTicks = [0, 25, 50, 75, 100]
</script>

<style scoped>
.example-frame {
  overflow-x: auto;
  position: relative;
}
</style>

Props

Prop	Type	Default	Description
`domain`	`PlotDomain`		Data-space bounds used to map tick values onto the plot area.
`size`	`PlotSize`		Outer SVG size in pixels.
`padding`	`PlotPadding`		Insets shared with other plot layers.
`ticks`	`number[]`	`[]`	Axis tick values in data-space coordinates.
`position`	`number`		Axis line position in data-space coordinates on the opposite axis.
`offset`	`number`		Tick label center offset from the axis line in pixels.
`textAnchor`	`TextAnchor`	`'middle'`	SVG text-anchor value for tick labels.
`tickSize`	`MaybeArray<number>`	`4`	Tick mark length in pixels.
`strokeOpacity`	`MaybeArray<number>`	`1`	Axis line and tick mark opacity.
`strokeWidth`	`MaybeArray<number>`	`1`	Axis line and tick mark width in pixels.
`direction`	`AxisDirection`	Required	Axis direction. Horizontal maps ticks on x; vertical maps ticks on y.

Slots

Slot	Props	Description
`tick`	`{ tick: number; x: number; y: number; }`	Custom renderer for a tick label.

Notes

Tick labels use formatTick by default.

For horizontal axes, positive tick sizes extend below the axis line and negative tick sizes extend above it. The default label offset is 24.

For vertical axes, positive tick sizes extend to the left of the axis line and negative tick sizes extend to the right. The default label offset is -24.

Axis ​

Import ​

Example ​

Props ​