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
View
Next
custom

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...

In Ant Design Charts, Data is primarily used to specify the data to be visualized and data transformation (pre-processing). Data can be specified at the view level:

({
data: [
{ genre: 'Sports', sold: 275 },
{ genre: 'Strategy', sold: 115 },
{ genre: 'Action', sold: 120 },
{ genre: 'Shooter', sold: 350 },
{ genre: 'Other', sold: 150 },
],
});

It can also be specified at the mark level:

({
data: [
{ genre: 'Sports', sold: 275 },
{ genre: 'Strategy', sold: 115 },
{ genre: 'Action', sold: 120 },
{ genre: 'Shooter', sold: 350 },
{ genre: 'Other', sold: 150 },
],
});

Connectors and Transforms

A complete data declaration consists of two parts: Connector and Data Transform. Connector is the way to get data, specified by data.type, and data transform is the pre-processing function, specified by data.transform.

({
data: {
// Specify connector value
value: 'https://gw.alipayobjects.com/os/basement_prod/6b4aa721-b039-49b9-99d8-540b3f87d339.json',
transform: [
// specify transforms, multiple can be specified
],
},
});

If the data satisfies the following three conditions:

  • Inline data
  • Is an array
  • No pre-processing function

It can be directly specified as data:

({
data: [
{ genre: 'Sports', sold: 275 },
{ genre: 'Strategy', sold: 115 },
{ genre: 'Action', sold: 120 },
{ genre: 'Shooter', sold: 350 },
{ genre: 'Other', sold: 150 },
],
});

Data in Mark

Each mark has its data, which means we can visualize multiple datasets in one view, such as the following interval chart:

{
"tooltip": false,
"style": {
"fillOpacity": 0.75
},
"scale": {
"color": {
"independent": true,
"range": [
"#FAAD14",
"#30BF78"
]
}
}
}

Data in View

The view can also be data-bound. The data bound to a view is transitive: it will be passed to the marks in view.children. If the mark does not have data, its data will be set; otherwise, there is no effect. This means that for marks that share data, you can bind the data to the view.

Data Updates

Since the data is bound to the mark, updating the data can be a bit complicated. Take the following case as an example:

There are several ways to update the data of the interval in the above example:

  • First method: The most basic way.

  • Second method: Syntactic sugar for the above method.

interval.changeData(newData);
  • Third method: Get the interval object through the query API, then update the data.
chart.getNodesByType('rect')[0].changeData(data);

FAQ

  • How to use third-party libraries to draw statistical regression lines?

With the ability to customize data conversion, we can use external data processing-related libraries. In the example below, we use the third-party library d3-regression to generate a linear statistical regression line:

More examples of statistical regression lines can be found in Data Analysis-regression.