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

样式(Style)

Previous
cartesian3D
Next
overview

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

Style in Ant Design Charts is mainly used to control the visual style of mark and view. Supported styles refer to @antv/g supported styles.

Mark can set its own style or the style of the view:

({
style: {
// own style
stroke: 'black',
strokeWidth: 2,
},
viewStyle: {
// View style
viewFill: 'red',
contentFill: 'yellow',
},
});
{
"style": {
"stroke": "black",
"strokeWidth": 2
}
}

View can set its own style:

({
style: {
viewFill: 'red',
contentFill: 'yellow',
},
});
{
"style": {
"viewFill": "red",
"contentFill": "yellow"
}
}

Mark Style

In addition to mark.encode, the visual properties of the mark can also be set through mark.style. There are two main differences between the two:

  • The channel set by mark.encode will be a bit special, either unique to the mark, such as the src channel of image; or it has some special logic, such as the x channel that affects the generation of the x-direction coordinate axis.
  • mark.encode is more inclined to set up channels related to data, but mark.style prefers to set up channels that have nothing to do with data. Although mark.style also supports callbacks to set up data-driven channels.
{
"axis": {
"y": {
"labelFormatter": ".0%"
}
},
"style": {
"fill": "steelblue"
}
}

View Style

The styles of each area can be set in the form of ${name}${Style}, among them, Style is all styles supported by the rectangle of G, such as fill,stroke,etc. Please note that the first letter should be capitalized to form camel case.

  • view${Style}- Set the style of the view area
  • plot${Style}- Set the style of the drawing area
  • main${Style}- Set the style of the main area
  • content${Style}- Set styles of the content areas

For example, color each area in the picture below:

{
"inset": 10,
"marginTop": 30,
"marginLeft": 40,
"marginBottom": 10,
"marginRight": 20,
"style": {
"viewFill": "#4e79a7",
"plotFill": "#f28e2c",
"mainFill": "#e15759",
"contentFill": "#76b7b2"
},
"children": [
{
"type": "point",
"data": {
"type": "fetch",
"value": "https://assets.antv.antgroup.com/g2/commits.json"
},
"encode": {
"size": "count",
"shape": "point"
},
"transform": [
{
"type": "group",
"size": "sum"
},
{
"type": "sortY"
}
],
"scale": {
"y": {
"type": "point"
}
},
"style": {
"shape": "point",
"fill": "#59a14f"
},
"axis": {
"x": {
"title": "time (hours)",
"tickCount": 24
},
"y": {
"title": "time (day)",
"grid": true
}
},
"legend": false
}
]
}