Y-Axis

The Y-axis is a vertical axis in Cartesian coordinate charts. It works with the grid component to position and render data along the vertical dimension.

Basic Configuration

The Y-axis supports four axis types: value, category, time, and log. The type determines how data is scaled and displayed.

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value',
    name: 'Sales',
    nameLocation: 'middle',
    nameGap: 50
  },
  series: [{
    data: [120, 200, 150, 80, 70, 110, 130],
    type: 'line'
  }]
}

Axis Types

Value Axis

Numerical axis suitable for continuous data. This is the most common type for Y-axis.

yAxis: {
  type: 'value',
  min: 0,
  max: 100,
  scale: true,
  splitNumber: 5
}

Reference: src/coord/axisCommonTypes.ts:207-217

Category Axis

Ordinal axis for discrete categorical data. Less common for Y-axis but useful for horizontal bar charts.

yAxis: {
  type: 'category',
  data: ['Product A', 'Product B', 'Product C', 'Product D'],
  boundaryGap: true
}

Reference: src/coord/axisCommonTypes.ts:182-206

Time Axis

Temporal axis optimized for time-series data displayed vertically.

yAxis: {
  type: 'time',
  splitNumber: 10,
  axisLabel: {
    formatter: '{HH}:{mm}'
  }
}

Reference: src/coord/axisCommonTypes.ts:223-226

Log Axis

Logarithmic axis for exponential data patterns.

yAxis: {
  type: 'log',
  logBase: 10,
  min: 1,
  max: 1000000
}

Reference: src/coord/axisCommonTypes.ts:218-222

Key Properties

type

'value' | 'category' | 'time' | 'log'

default:"'value'"

Axis type determines the scale and data interpretation.Reference: src/coord/axisCommonTypes.ts:34

position

'left' | 'right'

Position of the Y-axis. Default is 'left'.Reference: src/coord/cartesian/AxisModel.ts:31-36

offset

number

default:"0"

Offset in pixels from the default position. Useful for multiple axes on the same position.Reference: src/coord/cartesian/AxisModel.ts:38

gridIndex

number

default:"0"

Index of the grid component that the axis belongs to.Reference: src/coord/cartesian/AxisModel.ts:34

name

string

Axis name displayed on the chart.Reference: src/coord/axisCommonTypes.ts:44

nameLocation

'start' | 'middle' | 'center' | 'end'

default:"'end'"

Location of the axis name:

'start': place name based on axis.extent[0]
'end': place name based on axis.extent[1]
'middle' or 'center': place name at the center

Reference: src/coord/axisCommonTypes.ts:51

nameGap

number

default:"15"

Gap between axis name and axis line.Reference: src/coord/axisCommonTypes.ts:67

nameRotate

number

Rotation angle of the axis name in degrees.Reference: src/coord/axisCommonTypes.ts:53

inverse

boolean

default:"false"

Whether to inverse the axis direction.Reference: src/coord/axisCommonTypes.ts:42

min

number | 'dataMin' | function

Minimum value of the axis. Can be:

A specific number
'dataMin': use the minimum value in data
A function that returns the min value
null/undefined: auto-calculated

Reference: src/coord/axisCommonTypes.ts:105

max

number | 'dataMax' | function

Maximum value of the axis. Can be:

A specific number
'dataMax': use the maximum value in data
A function that returns the max value
null/undefined: auto-calculated

Reference: src/coord/axisCommonTypes.ts:112

boundaryGap

boolean | [string, string]

For category axis: whether to add gap at both ends (default true). For value/time/log axis: gap value at both ends as [GAP, GAP] where GAP can be absolute pixel or percent.Reference: src/coord/axisCommonTypes.ts:140

splitNumber

number

default:"5"

Number of segments the axis is split into. Only works for value, time, and log axes.Reference: src/coord/axisCommonTypes.ts:145

interval

number

Mandatory interval for axis ticks. Overrides automatic calculation.Reference: src/coord/axisCommonTypes.ts:149

minInterval

number

Minimum interval when auto-calculating tick intervals.Reference: src/coord/axisCommonTypes.ts:153

maxInterval

number

Maximum interval when auto-calculating tick intervals.Reference: src/coord/axisCommonTypes.ts:157

scale

boolean

default:"false"

Only for value axis. If false, axis always includes zero. If true, the axis may not contain zero.Reference: src/coord/axisCommonTypes.ts:216

alignTicks

boolean

default:"false"

Whether to align ticks with the first axis that doesn’t use alignTicks. Ignored if interval is set.Reference: src/coord/axisCommonTypes.ts:165

Axis Label Configuration

axisLabel

object

Configuration for axis labels.Reference: src/coord/axisCommonTypes.ts:89

axisLabel.show

boolean

default:"true"

Whether to show axis labels.

axisLabel.inside

boolean

default:"false"

Whether labels are inside the grid or outside.Reference: src/coord/axisCommonTypes.ts:315

axisLabel.rotate

number

default:"0"

Rotation angle of labels in degrees. Positive values rotate clockwise.Reference: src/coord/axisCommonTypes.ts:316

axisLabel.margin

number

default:"8"

Margin between label and axis line.Reference: src/coord/axisCommonTypes.ts:331

axisLabel.formatter

string | function

Label formatter. Can be a template string or callback function.Reference: src/coord/axisCommonTypes.ts:340

axisLabel.showMinLabel

boolean

Whether to show the minimum label.Reference: src/coord/axisCommonTypes.ts:319

axisLabel.showMaxLabel

boolean

Whether to show the maximum label.Reference: src/coord/axisCommonTypes.ts:321

axisLabel.hideOverlap

boolean

default:"false"

Whether to hide overlapping labels automatically.Reference: src/coord/axisCommonTypes.ts:335

Axis Line & Ticks

axisLine

object

Configuration for the axis line.Reference: src/coord/axisCommonTypes.ts:92

axisLine.show

boolean | 'auto'

default:"true"

Whether to show the axis line.Reference: src/coord/axisCommonTypes.ts:232

axisLine.onZero

boolean

default:"true"

Whether the axis line aligns with the zero position of the other axis.Reference: src/coord/axisCommonTypes.ts:233

axisTick

object

Configuration for axis ticks.Reference: src/coord/axisCommonTypes.ts:93

axisTick.show

boolean | 'auto'

default:"true"

Whether to show axis ticks.Reference: src/coord/axisCommonTypes.ts:245

axisTick.inside

boolean

default:"false"

Whether ticks are inside the grid or outside.Reference: src/coord/axisCommonTypes.ts:247

axisTick.length

number

default:"5"

Length of axis ticks in pixels.Reference: src/coord/axisCommonTypes.ts:249

minorTick

object

Configuration for minor ticks between major ticks.Reference: src/coord/axisCommonTypes.ts:94

minorTick.show

boolean

default:"false"

Whether to show minor ticks.Reference: src/coord/axisCommonTypes.ts:347

minorTick.splitNumber

number

default:"5"

Number of minor ticks between two major ticks.Reference: src/coord/axisCommonTypes.ts:348

Split Lines & Areas

splitLine

object

Configuration for split lines (grid lines).Reference: src/coord/axisCommonTypes.ts:95

splitLine.show

boolean

default:"true"

Whether to show split lines.Reference: src/coord/axisCommonTypes.ts:354

minorSplitLine

object

Configuration for minor split lines.Reference: src/coord/axisCommonTypes.ts:96

minorSplitLine.show

boolean

default:"false"

Whether to show minor split lines.Reference: src/coord/axisCommonTypes.ts:365

splitArea

object

Configuration for split areas (alternating background areas).Reference: src/coord/axisCommonTypes.ts:97

splitArea.show

boolean

default:"false"

Whether to show split areas.Reference: src/coord/axisCommonTypes.ts:370

Advanced Examples

Multiple Y-Axes

option = {
  xAxis: {
    type: 'category',
    data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
  },
  yAxis: [
    {
      type: 'value',
      name: 'Temperature (°C)',
      position: 'left',
      axisLabel: {
        formatter: '{value} °C'
      }
    },
    {
      type: 'value',
      name: 'Precipitation (mm)',
      position: 'right',
      axisLabel: {
        formatter: '{value} mm'
      }
    }
  ],
  series: [
    {
      name: 'Temperature',
      type: 'line',
      yAxisIndex: 0,
      data: [2, 3, 3.5, 5, 6, 7]
    },
    {
      name: 'Precipitation',
      type: 'bar',
      yAxisIndex: 1,
      data: [26, 59, 90, 264, 287, 340]
    }
  ]
}

Logarithmic Scale

yAxis: {
  type: 'log',
  logBase: 10,
  min: 1,
  max: 100000,
  axisLabel: {
    formatter: function(value) {
      return '10^' + Math.log10(value);
    }
  }
}

Custom Value Range with Padding

yAxis: {
  type: 'value',
  scale: true,
  boundaryGap: ['10%', '10%'],
  splitNumber: 5,
  axisLabel: {
    formatter: function(value) {
      return value.toFixed(2);
    }
  }
}

Horizontal Bar Chart

option = {
  xAxis: {
    type: 'value'
  },
  yAxis: {
    type: 'category',
    data: ['Product A', 'Product B', 'Product C', 'Product D'],
    inverse: true
  },
  series: [{
    type: 'bar',
    data: [120, 200, 150, 80]
  }]
}

X-Axis - Horizontal axis configuration
Grid - Cartesian coordinate system
Angle Axis - Angular axis for polar charts
Radius Axis - Radial axis for polar charts

Coordinate Systems

Axes

Interactive Components

Visual Components

Basic Configuration

Axis Types

Value Axis

Category Axis

Time Axis

Log Axis

Key Properties

Axis Label Configuration

Axis Line & Ticks

Split Lines & Areas

Advanced Examples

Multiple Y-Axes

Logarithmic Scale

Custom Value Range with Padding

Horizontal Bar Chart

Build docs developers (and LLMs) love

Coordinate Systems

Axes

Interactive Components

Visual Components

​Basic Configuration

​Axis Types

​Value Axis

​Category Axis

​Time Axis

​Log Axis

​Key Properties

​Axis Label Configuration

​Axis Line & Ticks

​Split Lines & Areas

​Advanced Examples

​Multiple Y-Axes

​Logarithmic Scale

​Custom Value Range with Padding

​Horizontal Bar Chart

​Related Components

Build docs developers (and LLMs) love

Basic Configuration

Axis Types

Value Axis

Category Axis

Time Axis

Log Axis

Key Properties

Axis Label Configuration

Axis Line & Ticks

Split Lines & Areas

Advanced Examples

Multiple Y-Axes

Logarithmic Scale

Custom Value Range with Padding

Horizontal Bar Chart

Related Components