Charts - Axes

#Usage

import { ChartAxisCategory, ChartAxisGroup, ChartSvg, ChartXAxis, ChartYAxis } from '@primeui/vue-chart';

<ChartSvg>
    <!-- series -->
    <ChartXAxis />
    <ChartYAxis />
</ChartSvg>

Axes are opt-in children of the chart root. Add ChartXAxis for horizontal labels and gridlines, ChartYAxis for vertical. Both default to a category axis with auto-calculated ticks. Place multiple ChartYAxis components with unique id values for multi-axis layouts.

#Basic

Add ChartXAxis and ChartYAxis to render axes and gridlines. Both default to a category axis with auto-calculated tick labels and a linear scale.

#Time Axis

Set type="time" on ChartXAxis to enable continuous date and timestamp parsing. Tick labels format themselves based on the visible range: seconds and minutes for short ranges, hours and days for medium ranges, months and years for long ranges. Pass Unix timestamps, JavaScript Date objects, or ISO date strings as category values.

#Linear Axis

Set type="linear" on ChartXAxis to treat category values as continuous numbers rather than discrete labels. Use this for numeric X/Y scatter data where the X axis represents a continuous numeric dimension.

#Logarithmic

Set type="logarithmic" on ChartYAxis to use a log scale. Each tick represents a power of ten. Use this for data spanning multiple orders of magnitude. Also supported on ChartXAxis for horizontal bar charts.

#Axis Title

Set label to display a title alongside the axis.

#Tick Formatting

Set tickFormat to a function (value, index) => string to customize how tick values are displayed. Use this for currency, percentages, units, and abbreviated large numbers. Set tickInterval to force a specific step between ticks instead of the auto-calculated interval.

#Tick Styling

Use tickStyle to customize tick mark and label appearance. Pass an object for uniform styling across all ticks, or a function (value, index) => TickStyle for per-tick styling. The function form allows specific values to be highlighted. Set tickRotation to rotate labels, or use autoRotate to let the chart rotate them when they would otherwise overlap.

#Grid Lines

Set gridLines to false to hide major gridlines. Use gridColor, gridStrokeWidth, gridStyle, and gridOpacity to customize their appearance. Set minorGridLines to show additional grid lines between major ticks. Use alternateGridColor to fill alternating bands between grid lines.

#Domain

Set min and max to fix the axis domain. Set startFromZero to force the axis to always include zero. Use softMin and softMax as soft limits. They extend the domain only when the data doesn't already reach those values, which prevents unwanted whitespace.

#Reversed

Set reversed to flip the axis direction. On ChartYAxis, higher values appear at the bottom, which is the natural direction for depth or ranking data. On ChartXAxis, categories run right to left.

#Hidden Axis

Set visible to false to hide the entire axis including labels, ticks, the axis line, and gridlines. To hide individual parts while keeping the rest, set showLine (axis line), showTicks (tick marks), or showLabels (tick labels) to false.

#Custom Tick Render

Set render to replace default tick labels with custom content. The callback receives the tick value, formatted label, pixel position, and index. In SVG mode return a VNode. In Canvas mode draw to ctx and return null. Use renderTick to replace the tick mark itself independently.

#Axis Grouping

Nest ChartAxisGroup inside ChartXAxis or ChartYAxis to add category group headers below the tick labels. Each group takes a label and lists the categories it spans, given either as a categories prop or as nested ChartAxisCategory children. Nest multiple ChartAxisGroup components for multi-level grouping. Depth increases from outermost to innermost. Use bracket, separator, fill, and tickSeparator to add visual dividers between groups. A range prop, or two numeric ChartAxisCategory children, instead defines a value range group across [from, to]. Axis groups apply to bar, line, scatter, and candlestick series on a category axis.

#Multiple Axes

Add multiple ChartYAxis components with unique id values to create independent Y scales. Bind each dataset to its axis using yAxisId. Set position="right" on the secondary axis to render it on the opposite side.

#Time Zone

Set timezone on a time axis to display tick labels in a specific IANA timezone instead of UTC. Use dateTimeFormats to override how each time unit (second, minute, hour, day, month, year) is formatted.

#Data Grouping

Set grouping on a time axis to aggregate large datasets by time interval. The aggregation runs before the renderer, reducing years of data to a manageable density without rendering thousands of individual points.

#API

#ChartXAxis

Extends BaseAxisProps with position: 'top' | 'bottom' (default 'bottom').

#ChartYAxis

Extends BaseAxisProps with position: 'left' | 'right' (default 'left').

#BaseAxisProps

All props are shared by both ChartXAxis and ChartYAxis unless noted.

#TickStyle

Passed to tickStyle as an object or returned from a per-tick function.

#AxisTickRenderContext

Passed to the render callback for each tick label.

#ChartAxisGroup

Nest inside ChartXAxis or ChartYAxis to add group headers to the category axis.

Declare group membership either with the categories / range props or with nested ChartAxisCategory children. When both are present, the prop wins.

#ChartAxisCategory

Nest inside ChartAxisGroup to declare which categories the group spans. Renders nothing on its own.

#AxisGroupRenderContext

Passed to the render callback on each ChartAxisGroup.

#Related Docs

• Column & Bar
• Line & Area
• Scatter & Bubble
• Candlestick & OHLC
• Combo
• Zoom & Pan