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

Label

Previous
Tooltip
Next
Color En

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

Label in Ant Design Charts is one of the means to annotate charts. Multiple labels can be added to a mark:

({
labels: [
{
text: 'genre', // Specify the bound field
dy: -15, // Specify style
},
{
text: 'sold', // Specify the bound field
fill: '#fff', // Specify style
dy: 5,
},
],
});
null;

At the level of View, you can declare label transform through labelTransform:

({
labelTransform: [{ type: 'overlapHide' }, { type: 'contrastReverse' }],
});
chart.labelTransform({ type: 'overlapHide' }).labelTransform({ type: 'contrastReverse' });
chart.labelTransform([{ type: 'overlapHide' }, { type: 'contrastReverse' }]);

Mark Label

Each mark can have multiple labels. The configuration of a label is roughly as follows:

({
labels: [
{
text: 'name', // Bound field or a constant string
dy: -2, // @antv/g supported styles
fill: 'red', // @antv/g supported styles
selector: 'last', // Selector
transform: [], // Label transform
},
],
});

Here's a simple example:

{
"labels": [
{
"text": "sold",
"style": {
"fill": "#fff",
"dy": 5
}
},
{
"text": "genre",
"style": {}
}
]
}

Selector

For the mark of a graph corresponding to multiple data items, we can select the mark that needs to be retained through selector. Currently supported values ​​are as follows:

  • first - the first one
  • last - the last one
  • function - custom selector
{
"labels": [
{
"text": "Symbol",
"selector": "last",
"style": {
"fontSize": 10
}
}
],
"axis": {
"y": {
"title": "↑ Change in price (%)"
}
}
}

Label Transform

When the display of labels does not meet expectations, such as overlapping or unclear colors, we can use Label Transform to optimize label display.

It can be found that in the example below, the labels corresponding to times such as 2004 have overlapped.

{
"tooltip": {
"items": [
{
"channel": "y",
"valueFormatter": ".1f"
}
]
},
"labels": [
{
"text": "price",
"fontSize": 10
}
]
}

At this time, we can set the label transform for the corresponding label: overlapDodgeY, which is used to prevent the labels from overlapping in the y direction.

{
"tooltip": {
"items": [
{
"channel": "y",
"valueFormatter": ".1f"
}
]
},
"labels": [
{
"text": "price",
"transform": [
{
"type": "overlapDodgeY"
}
],
"fontSize": 10
}
]
}

View Level Label Transform

Label transform can also be declared at the level of view to process labels for the entire view.

({
labelTransform: [],
});