Axis | Ant Design Charts

Overview

In Ant Design Charts, the Axis component serves as the "ruler" of charts, establishing the mapping relationship between data and visual positions. Through scales, labels, grid lines, and other elements, it helps users intuitively understand data distribution and proportions. It enables you to quickly comprehend the position and numerical values in graphics.

Simply put, axis help us correlate data numbers with positions on the chart, making charts easier to understand.

For example: In a bar chart, the horizontal axis usually represents time, and the vertical axis represents sales. This way, you can see at a glance that "sales were 2 million in March and rose to 3 million in April."

Axis Usage Diagram

Components

Usage

Through the overview content above, I believe you now have a clear understanding of axis. So how exactly do you use them? Next, I'll guide you step by step on how to configure axis.

Configuring axis is like building with blocks - just remember a simple core principle: "Use the axis property, configure by direction, change what needs to be changed where it needs to be changed."

Step 1: Enable Axis (enabled by default)

Ant Design Charts automatically generates axis based on your data types. No configuration is needed to see basic axis.

Enable Axis (enabled by default)

{
    width: 500,
    height: 300,
    data: [
      { id: 1, month: 'March', sales: 200 },
      { id: 3, month: 'April', sales: 300 },
      { id: 4, month: 'May', sales: 400 },
      { id: 5, month: 'June', sales: 500 },
      { id: 6, month: 'July', sales: 600 },
      { id: 7, month: 'August', sales: 700 },
    ],
    xField: 'month',
    yField: 'sales',
    // No axis configuration needed for automatic axis generation
    // axis: {},
    colorField: 'month'
}

Step 2: Configure by Direction

Configure x (horizontal direction) axis

{
    width: 500,
    height: 300,
    data: [
      { id: 1, month: 'March', sales: 200 },
      { id: 3, month: 'April', sales: 300 },
      { id: 4, month: 'May', sales: 400 },
      { id: 5, month: 'June', sales: 500 },
      { id: 6, month: 'July', sales: 600 },
      { id: 7, month: 'August', sales: 700 },
    ],
    xField: 'month',
    yField: 'sales',
    colorField: 'month',
    // Configure axis
    axis: {
      // Configure horizontal axis properties
      x: {
        // Configuration parameters and examples can be found below...
      },
    }
}

Configure y (vertical direction) axis

{
    width: 500,
    height: 300,
    data: [
      { id: 1, month: 'March', sales: 200 },
      { id: 3, month: 'April', sales: 300 },
      { id: 4, month: 'May', sales: 400 },
      { id: 5, month: 'June', sales: 500 },
      { id: 6, month: 'July', sales: 600 },
      { id: 7, month: 'August', sales: 700 },
    ],
    xField: 'month',
    yField: 'sales',
    colorField: 'month',
    // Configure axis
    axis: {
      // Configure vertical axis properties
      y: {
        // Configuration parameters and examples can be found below...
      },
    }
}

Configuration Levels

Axis can be configured at the Mark level. In Ant Design Charts, each mark has its own axis. If the marks correspond to synchronized scales, the axis will be merged.

({
  axis: {
    x: { labelFormatter: '%0' },
    y: { tickCount: 5 },
  },
});

Hide Axis

Hide axis for each channel:

Axis hiding demonstration

Hide x axis:

({
  axis: { x: false }, // Hide x horizontal axis
});

Hide y axis:

({
  axis: { y: false }, // Hide y vertical axis
});

Hide multiple axis

({
  axis: false,
});

Configuration Options

Each axis consists of title, line, tick, label, grid, and breaks.

Property	Description	Type	Default Value
title	Set axis title text and style	title	-
line	Set axis line display and style	line	-
tick	Set axis tick display and style	tick	-
label	Set axis label display and style	label	-
grid	Set axis grid display and style	grid	-
breaks	Set axis breaks display and style	breaks	-
animate	Set axis animation effects	`boolean` \| animate	-
position	Set axis position	`left` \| `right` \| `top` \| `bottom`	`x: bottom` \| `y: left`

Note

Title, line, tick, label, and grid configurations are at the same level, not configured as objects, but through prefix + property approach.

For example, to configure label rotation, it's not configured under a label object, but through the following approach:

({
  axis: {
    x: {
      title: 'X Axis Title',
      labelFontSize: 12,
      labelFormatter: (d) => `2025-${d}`,
      transform: [
        // Rotation
        {
          type: 'rotate',
          optionalAngles: [0, 45, 90], // Try rotating 0°, 45°, 90°
          recoverWhenFailed: true, // Recover to default angle if rotation fails
        },
      ],
    },
  },
});

title

Property	Description	Type	Default Value
title	Turn off title or set title content	`false`\|`string` \| `number` \| DisplayObject	-
titleSpacing	Distance from title to axis	`number` \| `(datum, index, data) => number`	10
titlePosition	Title position relative to axis	`'top'`\|`'bottom'`\|`'left'`\|`'right'`	`'lb'`
titleFontSize	Title font size	`number` \| `(datum, index, data) => number`	-
titleFontWeight	Title font weight	`number` \| `(datum, index, data) => number`	-
titleFontFamily	Title font family	`string` \| `(datum, index, data) => string`	-
titleFill	Title text fill color	`string` \| `(datum, index, data) => string`	-
titleOpacity	Title text overall opacity	`number` \| `(datum, index, data) => number`	1

line

Property	Description	Type	Default Value
line	Whether to show axis line	`boolean`	false
arrow	Whether to show arrow	`boolean`	true
lineLineWidth	Axis line stroke width	`number` \| `(datum, index, data) => number`	-
lineStroke	Axis line stroke color	`string` \| `(datum, index, data) => string`	-
lineOpacity	Axis line overall opacity	`number` \| `(datum, index, data) => number`	1

tick

Property	Description	Type	Default Value
tick	Whether to show ticks	`boolean`	true
tickCount	Set recommended number of ticks to generate	`number`	-
tickLength	Tick length	`number`\|`(datum, index, data)=>number`	15
tickStroke	Tick stroke color	`string` \| `(datum, index, data, Vector)=>string`	-

label

Property	Description	Type	Default Value
label	Whether to show tick labels	`boolean`	-
labelFontSize	Label font size	`number` \| `(datum, index, data)=>number`	-
labelFormatter	Label formatting, accepts function or d3-format supported string	`string` \| `(datum, index, array) => string`	-
labelAlign	Label alignment: 'horizontal', 'parallel', 'perpendicular'	`'horizontal'` \| `'parallel'` \| `'perpendicular'`	`parallel`
labelFill	Label text fill color	`string` \| `(datum, index, data)=>string`	-

grid

Property	Description	Type	Default Value
grid	Whether to show grid lines	`boolean`	false
gridStroke	Grid line stroke color	`string` \| `(datum, index, data)=> string`	-
gridLineWidth	Grid line stroke width	`number` \| `(datum, index, data)=> number`	-
gridLineDash	Grid line stroke dash configuration	`[number,number]` \| `(datum, index, data)=> [number,number]`	-

breaks

Configure axis breaks for discontinuous data ranges.

{
  breaks: [
    {
      start: 5000,
      end: 50000,
      gap: '3%',
    }
  ]
}

animate

Property	Description	Type	Default Value	Required
animate	Whether to enable animation	`boolean` \| `EffectTiming`	-

Example

import { Column } from '@ant-design/plots';
import React from 'react';
import { createRoot } from 'react-dom/client';

const Demo = () => {
  const config = {
    marginTop: 40,
    data: [
      { id: 1, label: 'X Axis Label 1', value: 200 },
      { id: 2, label: 'X Axis Label 2', value: 300 },
      { id: 3, label: 'X Axis Label 3', value: 400 },
      { id: 4, label: 'X Axis Label 4', value: 500 },
      { id: 5, label: 'X Axis Label 5', value: 600 },
      { id: 6, label: 'X Axis Label 6', value: 700 },
    ],
    xField: 'label',
    yField: 'value',
    axis: {
      x: {
        position: 'bottom',
        title: 'X Axis Title',
        titleFontWeight: 500,
        grid: true,
        gridLineWidth: 2,
        line: true,
        lineLineWidth: 5,
        lineStroke: '#f50',
        tick: true,
        tickLineWidth: 5,
        tickLength: 10,
        tickStroke: '#3366ff',
        label: true,
        labelFontSize: 12,
        labelFill: '#009900',
        labelFontWeight: 500,
      },
      y: {
        position: 'left',
        title: 'Y Axis Title',
        titleFontWeight: 500,
        grid: true,
        gridLineWidth: 2,
        line: true,
        lineLineWidth: 5,
        lineStroke: '#f50',
        tick: true,
        tickLineWidth: 5,
        tickLength: 10,
        tickStroke: '#3366ff',
        label: true,
        labelFontSize: 12,
        labelFill: '#009900',
        labelFontWeight: 500,
      },
    }
  };
  return <Column {...config} />;
};

createRoot(document.getElementById('container')).render(<Demo />);

For more examples, see the Chart Examples - Axis page.