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
time
Next
bin

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 Mark Transform in Ant Design Charts offers a convenient method for transforming data and mark options, mainly used for analyzing data. The core of mark transform, which filters, modifies, aggregates and generates new channel values.

Transform is an array, executed in the order when they are declared. It can be configured at the level of mark:

({
transform: [{ type: 'stackY' }, { type: 'sortX' }],
});
{
"transform": [
[
{
"type": "stackY"
},
{
"type": "sortX"
}
]
]
}

Transform can also configure the level of view:

({
transform: [{ type: 'stackY' }, { type: 'sortX' }],
});
{
"transform": [
[
{
"type": "stackY"
},
{
"type": "sortX"
}
]
]
}

Mark Transform

Mark transform will modify the data bound to each channel, thereby changing the display form of the chart. For example, StackY transform stacks the column data bound to bar graph y and y1 channels:

{
"transform": [
{
"type": "stackY"
}
]
}

View Transform

Transform declared on the view will be passed on to the mark declared in children. Set if it is not transformed, otherwise, it has no effect. For example, the following stacked area chart with transform:

{
"transform": [
{
"type": "stackY"
}
],
"style": {
"fillOpacity": 0.5,
"strokeWidth": 2
},
"tooltip": false
}

Common Transform

There are generally two common transform functions:

  • Prevent overlap
  • Data aggregation

Prevent overlap

One function of transform is to prevent overlap. For example, the bars in the following data bar chart overlap.

At this time, you can declare a DodgeX to draw a grouped bar chart:

{
"transform": [
{
"type": "dodgeX"
}
]
}

This is actually one of the functions of mark transform: Prevent overlap. In addition to DodgeX, there are also transform such as StackY and JitterX that can be used to prevent overlap.

Data aggregation

In addition to preventing overlap, there is also a type of mark transform mainly used for data aggregation: such as Bin and Group. Different from traditional data aggregation, mark aggregation occurs in drawing, not before drawing. This eliminates the need for us to manipulate abstract raw data, but directly manipulate channel values. This greatly improves our efficiency in exploring data.

First, let's draw a scatterplot as follows, showing the correlation between penguin culmen_depth_mm and culmen_length_mm.

At this time, if you want to see the distribution of penguin culmen_depth_mm, you can use bin to binning the data.

{
"style": {
"insetLeft": 1
},
"transform": [
{
"y": "count"
}
]
}

Bin is mainly used to aggregate numerical data, and Group is mainly used for discrete data.

Multiple Transform

We can also declare multiple transform at the same time. For example, in the penguin example above, if we consider one more data dimension: the gender of the penguin, we can declare Bin and StackY transform continuously.

{
"style": {
"insetLeft": 1
}
}