Skip to main content
The angle axis is the angular component of polar coordinate charts. It works with the polar component and radius axis to create circular visualizations like radar charts, polar bar charts, and rose diagrams.

​
Basic Configuration

The angle axis supports the same four types as Cartesian axes: value, category, time, and log. 
option = {
  polar: {},
  angleAxis: {
    type: 'category',
    data: ['North', 'East', 'South', 'West'],
    startAngle: 90,
    clockwise: false
  },
  radiusAxis: {
    type: 'value'
  },
  series: [{
    type: 'bar',
    data: [10, 20, 30, 40],
    coordinateSystem: 'polar'
  }]
}

​
Axis Types

​
Category Axis

Most common for angle axis. Divides the circle into discrete segments. 
angleAxis: {
  type: 'category',
  data: ['Q1', 'Q2', 'Q3', 'Q4'],
  boundaryGap: true,
  startAngle: 0
}
Reference: src/coord/axisCommonTypes.ts:182-206

​
Value Axis

Numerical axis that maps values to angles. 
angleAxis: {
  type: 'value',
  min: 0,
  max: 360,
  startAngle: 90,
  splitNumber: 12
}
Reference: src/coord/axisCommonTypes.ts:207-217

​
Time Axis

Temporal axis for time-based circular visualizations. 
angleAxis: {
  type: 'time',
  startAngle: 0,
  clockwise: true
}
Reference: src/coord/axisCommonTypes.ts:223-226

​
Log Axis

Logarithmic axis for exponential angular scaling. 
angleAxis: {
  type: 'log',
  logBase: 10,
  min: 1,
  max: 1000
}
Reference: src/coord/axisCommonTypes.ts:218-222

​
Key Properties

​
type
'value' | 'category' | 'time' | 'log'
default:"'category'"
Axis type determines the scale and data interpretation.Reference: src/coord/axisCommonTypes.ts:34
​
polarIndex
number
default:"0"
Index of the polar component that the angle axis belongs to.Reference: src/coord/polar/AxisModel.ts:35
​
polarId
string
ID of the polar component that the angle axis belongs to.Reference: src/coord/polar/AxisModel.ts:39
​
startAngle
number
default:"90"
Starting angle in degrees. 0 degrees is at 3 o’clock position, increases counter-clockwise.Reference: src/coord/polar/AxisModel.ts:41
​
endAngle
number
Ending angle in degrees. If not specified, defaults to startAngle + 360.Reference: src/coord/polar/AxisModel.ts:42
​
clockwise
boolean
default:"true"
Whether the angle axis increases clockwise.Reference: src/coord/polar/AxisModel.ts:43
​
name
string
Axis name displayed on the chart.Reference: src/coord/axisCommonTypes.ts:44
​
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.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

​
Axis Label Configuration

​
axisLabel
object
Configuration for axis labels displayed along the angle axis.Reference: src/coord/polar/AxisModel.ts:45
​
axisLabel.show
boolean
default:"true"
Whether to show axis labels.
​
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.rotate
number
Rotation angle of labels in degrees.Reference: src/coord/axisCommonTypes.ts:316
​
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 (the circle or arc).Reference: src/coord/axisCommonTypes.ts:92
​
axisLine.show
boolean | 'auto'
default:"true"
Whether to show the axis line.Reference: src/coord/axisCommonTypes.ts:232
​
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.length
number
default:"5"
Length of axis ticks in pixels.Reference: src/coord/axisCommonTypes.ts:249

​
Split Lines & Areas

​
splitLine
object
Configuration for split lines (radial lines from center).Reference: src/coord/axisCommonTypes.ts:95
​
splitLine.show
boolean
default:"true"
Whether to show split lines.Reference: src/coord/axisCommonTypes.ts:354
​
splitArea
object
Configuration for split areas (pie-slice shaped 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

​
Rose Diagram (Nightingale Chart)

option = {
  polar: {},
  angleAxis: {
    type: 'category',
    data: ['Category A', 'Category B', 'Category C', 'Category D'],
    startAngle: 90,
    axisLabel: {
      rotate: 0
    }
  },
  radiusAxis: {
    type: 'value'
  },
  series: [{
    type: 'bar',
    data: [10, 20, 30, 40],
    coordinateSystem: 'polar',
    barWidth: '100%',
    roundCap: true
  }]
}

​
Clock Face

angleAxis: {
  type: 'value',
  min: 0,
  max: 12,
  startAngle: 90,
  clockwise: true,
  splitNumber: 12,
  axisLabel: {
    formatter: function(value) {
      return value === 0 ? '12' : value;
    }
  },
  axisTick: {
    show: true,
    length: 10
  }
}

​
Circular Time Series

angleAxis: {
  type: 'time',
  startAngle: 0,
  clockwise: false,
  axisLabel: {
    formatter: '{HH}:{mm}'
  },
  splitLine: {
    show: true,
    lineStyle: {
      color: '#999',
      type: 'dashed'
    }
  }
}

​
Half Circle Configuration

angleAxis: {
  type: 'category',
  data: ['A', 'B', 'C', 'D', 'E'],
  startAngle: 180,
  endAngle: 0,
  splitLine: {
    show: true
  },
  splitArea: {
    show: true,
    areaStyle: {
      color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)']
    }
  }
}

​
Implementation Details

The angle axis uses a specialized interval calculation for category type to prevent label overlap. The calculation is based on text height rather than width. Reference: src/coord/polar/AngleAxis.ts:58-117 
// From AngleAxis.ts
calculateCategoryInterval() {
    const axis = this;
    const labelModel = axis.getLabelModel();
    const ordinalScale = axis.scale as OrdinalScale;
    const tickCount = ordinalScale.count();
    
    const tickValue = ordinalExtent[0];
    const unitSpan = axis.dataToCoord(tickValue + 1) - axis.dataToCoord(tickValue);
    const unitH = Math.abs(unitSpan);
    
    // Calculate interval based on text height
    const rect = textContain.getBoundingRect(
        tickValue == null ? '' : tickValue + '',
        labelModel.getFont(),
        'center',
        'top'
    );
    const maxH = Math.max(rect.height, 7);
    let dh = maxH / unitH;
    let interval = Math.max(0, Math.floor(dh));
    
    return interval;
}
  • Radius Axis - Radial component of polar charts
  • Polar - Polar coordinate system
  • X-Axis - Horizontal Cartesian axis
  • Y-Axis - Vertical Cartesian axis

Build docs developers (and LLMs) love

Get started for freeTalk to us