Skip to main content
The radius axis is the radial component of polar coordinate charts. It works with the polar component and angle axis to create circular visualizations, controlling the distance from the center point.

​
Basic Configuration

The radius axis supports the same four types as other axes: value, category, time, and log. 
option = {
  polar: {},
  angleAxis: {
    type: 'category',
    data: ['North', 'East', 'South', 'West']
  },
  radiusAxis: {
    type: 'value',
    min: 0,
    max: 100
  },
  series: [{
    type: 'bar',
    data: [10, 20, 30, 40],
    coordinateSystem: 'polar'
  }]
}

​
Axis Types

​
Value Axis

Most common for radius axis. Maps numerical values to distances from the center. 
radiusAxis: {
  type: 'value',
  min: 0,
  max: 100,
  splitNumber: 5
}
Reference: src/coord/axisCommonTypes.ts:207-217

​
Category Axis

Ordinal axis dividing the radius into discrete bands. 
radiusAxis: {
  type: 'category',
  data: ['Inner', 'Middle', 'Outer'],
  boundaryGap: true
}
Reference: src/coord/axisCommonTypes.ts:182-206

​
Time Axis

Temporal axis for time-based radial visualizations. 
radiusAxis: {
  type: 'time',
  splitNumber: 10
}
Reference: src/coord/axisCommonTypes.ts:223-226

​
Log Axis

Logarithmic axis for exponential radial scaling. 
radiusAxis: {
  type: 'log',
  logBase: 10,
  min: 1,
  max: 10000
}
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
​
polarIndex
number
default:"0"
Index of the polar component that the radius axis belongs to.Reference: src/coord/polar/AxisModel.ts:53
​
polarId
string
ID of the polar component that the radius axis belongs to.Reference: src/coord/polar/AxisModel.ts:57
​
name
string
Axis name displayed on the chart.Reference: src/coord/axisCommonTypes.ts:44
​
min
number | 'dataMin' | function
Minimum value of the axis (innermost radius). 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 (outermost radius). 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
​
inverse
boolean
default:"false"
Whether to inverse the axis direction. When true, larger values are closer to the center.Reference: src/coord/axisCommonTypes.ts:42
​
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 concentric circles. 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

​
Axis Label Configuration

​
axisLabel
object
Configuration for axis labels displayed along the radius axis.Reference: src/coord/axisCommonTypes.ts:89
​
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.showMinLabel
boolean
Whether to show the minimum label (at center).Reference: src/coord/axisCommonTypes.ts:319
​
axisLabel.showMaxLabel
boolean
Whether to show the maximum label (at outer edge).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 (radial 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
​
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
​
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 (concentric circles).Reference: src/coord/axisCommonTypes.ts:95
​
splitLine.show
boolean
default:"true"
Whether to show split lines (the circular grid 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 (concentric ring 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

​
Radar Chart Style

option = {
  polar: {},
  angleAxis: {
    type: 'category',
    data: ['Speed', 'Power', 'Defense', 'Health', 'Agility']
  },
  radiusAxis: {
    type: 'value',
    min: 0,
    max: 100,
    splitNumber: 4,
    axisLabel: {
      show: true,
      formatter: '{value}%'
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: '#999',
        type: 'dashed'
      }
    },
    splitArea: {
      show: true,
      areaStyle: {
        color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)']
      }
    }
  },
  series: [{
    type: 'line',
    data: [80, 70, 60, 85, 90],
    coordinateSystem: 'polar'
  }]
}

​
Logarithmic Radius

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

​
Donut Chart Configuration

radiusAxis: {
  type: 'category',
  data: ['Inner Ring', 'Outer Ring'],
  boundaryGap: true,
  axisLine: {
    show: false
  },
  axisTick: {
    show: false
  },
  axisLabel: {
    show: false
  }
}

​
Inverse Radius (Center is Max)

radiusAxis: {
  type: 'value',
  min: 0,
  max: 100,
  inverse: true,
  axisLabel: {
    formatter: '{value}'
  },
  splitLine: {
    show: true,
    lineStyle: {
      color: '#ddd'
    }
  }
}

​
Category Bands

radiusAxis: {
  type: 'category',
  data: ['Level 1', 'Level 2', 'Level 3', 'Level 4'],
  boundaryGap: true,
  axisLabel: {
    rotate: 45,
    formatter: function(value, index) {
      return value + '\n(' + (index + 1) + ')';
    }
  },
  splitArea: {
    show: true,
    areaStyle: {
      color: ['#f3f3f3', '#e6e6e6', '#d9d9d9', '#cccccc']
    }
  }
}

​
Implementation Details

The radius axis converts data to radius coordinates using the base axis coordinate transformation methods. Reference: src/coord/polar/RadiusAxis.ts:30-48 
// From RadiusAxis.ts
class RadiusAxis extends Axis {
    polar: Polar;
    model: RadiusAxisModel;

    constructor(scale?: Scale, radiusExtent?: [number, number]) {
        super('radius', scale, radiusExtent);
    }

    pointToData(point: number[], clamp?: boolean) {
        return this.polar.pointToData(point, clamp)[this.dim === 'radius' ? 0 : 1];
    }
}

RadiusAxis.prototype.dataToRadius = Axis.prototype.dataToCoord;
RadiusAxis.prototype.radiusToData = Axis.prototype.coordToData;
  • Angle Axis - Angular 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