logo

Ant Design Charts

  • Manual
  • Options
  • Examples
  • Productsantv logo arrow
  • 2.0.0
  • Component Overview
  • Common Configuration Statistical Charts
    • Chart composition
    • Component
      • 标题(Title)
      • Axis
      • Legend
      • Scrollbar
      • Slider
      • Tooltip
      • Label
    • Core
      • Color En
      • View
      • Data
        • overview
        • custom
        • ema
        • fetch
        • filter
        • fold
        • inline
        • join
        • kde
        • log
        • map
        • pick
        • rename
        • slice
        • sort
        • sortBy
      • Scale
        • overview
        • band
        • linear
        • log
        • ordinal
        • point
        • pow
        • quantile
        • quantize
        • sqrt
        • threshold
        • time
      • Transform
        • overview
        • bin
        • binX
        • diffY
        • dodgeX
        • flexX
        • group
        • groupColor
        • groupX
        • groupY
        • jitter
        • jitterX
        • jitterY
        • normalizeY
        • pack
        • sample
        • select
        • selectX
        • selectX
        • sortColor
        • sortX
        • sortY
        • stackEnter
        • stackY
        • symmetryY
      • Coordinate
        • overview
        • fisheye
        • parallel
        • polar
        • radial
        • theta
        • transpose
        • cartesian3D
      • 样式(Style)
      • Animate
        • overview
        • fadeIn
        • fadeOut
        • growInX
        • growInY
        • morphing
        • pathIn
        • scaleInX
        • scaleInY
        • scaleOutX
        • scaleOutY
        • waveIn
        • zoomIn
        • zoomOut
      • 状态(State)
      • Interaction
        • Overview
        • brushAxisHighlight
        • brushHighlight
        • brushXHighlight
        • brushYHighlight
        • brushFilter
        • brushXFilter
        • brushYFilter
        • chartIndex
        • elementHighlight
        • elementHighlightByColor
        • elementHighlightByX
        • elementSelect
        • elementSelectByColor
        • elementSelectByX
        • fisheye
        • legendFilter
        • legendHighlight
        • poptip
        • scrollbarFilter
        • sliderFilter
      • Composition
        • overview
        • facetCircle
        • facetRect
        • repeatMatrix
        • spaceFlex
        • spaceLayer
        • timingKeyframe
      • Theme
        • overview
        • Academy
        • classic
        • classicDark
      • event
    • Specal Plot
      • Area
      • Bar
      • CirclePacking
      • DualAxes
      • Gauge
      • Line
      • Rose
      • Sankey
      • Scatter
      • Sunburst
      • Treemap
      • Venn
      • WordCloud
      • Column
      • Pie
      • BidirectionalBar
      • Box
      • Bullet
      • Funnel
      • Heatmap
      • Histogram
      • Liquid
      • Radar
      • Stock
      • Tiny
      • Violin
      • Waterfall
      • RadialBar
  • Relation Graph Components
    • Overview
    • MindMap
    • Fishbone
    • IndentedTree
    • Dendrogram
    • OrganizationChart
    • FlowGraph
    • FlowDirectionGraph
    • NetworkGraph
    • FAQ

overview

Previous
symmetryY
Next
fisheye

Resources

Ant Design
Galacea Effects
Umi-React Application Framework
Dumi-Component doc generator
ahooks-React Hooks Library

Community

Ant Financial Experience Tech
seeconfSEE Conf-Experience Tech Conference

Help

GitHub
StackOverflow

more productsMore Productions

Ant DesignAnt Design-Enterprise UI design language
yuqueYuque-Knowledge creation and Sharing tool
EggEgg-Enterprise-class Node development framework
kitchenKitchen-Sketch Tool set
GalaceanGalacean-互动图形解决方案
xtechLiven Experience technology
© Copyright 2025 Ant Group Co., Ltd..备案号:京ICP备15032932号-38

Loading...

The Coordinate System in Ant Design Charts will perform a series of point transform. In Ant Design Charts, the mark's position channels x and y will be mapped to the range [0,1] through a scale mapping, after that, the coordinate system is used to transform points into canvas coordinates, thereby changing the spatial display of the mark.

The coordinate system be configured at the level of view:

({
coordinate: { type: 'polar' },
});
{
"coordinate": {
"type": "polar"
}
}

It can also be configured at the level of mark:

({
coordinate: { type: 'polar' },
});
{
"coordinate": {
"type": "polar"
}
}

View Coordinate System

Each view can only have one coordinate system. In addition to its own attributes, the coordinate system also contains a series of Coordinate Transform。

({
innerRadius: 0.6, // its own properties
outerRadius: 0.8,
transform: [{ type: 'transpose' }], // Coordinate transform
});

Mark Coordinate System

The coordinate system of the level of mark has bubbling properties. The coordinate system of the level of mark will be merged with the coordinate system of the view, and the coordinate system of the first mark has the highest priority.

{
"coordinate": {
"type": "radial"
}
}

Equivalent to the following situation:

chart.coordinate({ type: 'polar' });
chart.line();
chart.area():

This feature is conducive to encapsulation and coordinate-related composite mark, such as pie charts:

Common Coordinate Systems

The default coordinate system is the Cartesian coordinate system. In addition, there is also a kind of coordinate system that transforms charts to polar coordinate systems and is used to draw a series of "circle" charts. This type of coordinate system is called Radial Coordinate。

Polar

For example, you can use interval mark and polar coordinate transform to draw rose charts.

{
"axis": {
"y": false
},
"coordinate": {
"type": "polar"
}
}

Theta

You can also use interval mark and theta coordinate system to draw pie charts.

{
"transform": [
{
"type": "stackY"
}
],
"coordinate": {
"type": "theta"
}
}

Radial

You can also use interval mark and radial coordinate systems to draw radial charts.

{
"axis": {
"x": {},
"y": false
},
"legend": {
"color": false
}
}

Parallel

In addition to the previous relatively basic coordinate transform, there are also some slightly more complex coordinate transform, such as parallel coordinate system.

null;

Coordinate Transform

The above coordinate system can be used in combination with the coordinate transform.

Transpose

One of the more commonly used transform is transpose, which is mainly used to change the direction of the chart. For example, draw horizontal bar charts.

{
"coordinate": {
"transform": [
{
"type": "transpose"
}
]
}
}

Fisheye

There is also a fisheye coordinate transform, which is used to set the focus of the chart. Here is how to use it.

{
"interaction": "fisheye",
"legend": false,
"style": {
"lineWidth": 1,
"fillOpacity": 0.3
},
"axis": {
"x": {
"labelFormatter": "~s"
}
}
}

3D Coordinate System

At present, we only support cartesian3D coordinate system:

{
"coordinate": {
"type": "cartesian3D"
}
}