Label

1 min read

🏷️ Label is a content annotation of the current set of data. It includes symbol, label line, text of values and so on, which can be selected according to different chart types.

🎨 Go to AntV Design | 标签 Label of 墨者学院 to learn more about Design guide.

Properties - LabelCfg

PropertiesTypeDescription
typestringWhen a user uses a custom label type, need to declare the specific type, otherwise you will use the default label type rendering (pie chart label support inner | outer | spiders)
offsetnumberlabel offset
offsetXnumberThe offset distance of the label from the data point in the X direction
offsetYnumberThe offset distance of the label from the data point in the Y direction
contentstring | IGroup | IShape | GeometryLabelContentCallbackText content that is displayed, if not declared, is displayed according to the value of the first field participating in the mapping
styleShapeAttrsLabel text graphic property style
autoRotatestringWhether to rotate automatically, default true
rotatenumberText rotation angle, unit is radian, clockwise rotation
labelLinenull | boolean | LabelLineCfgUsed to set the style property of the text connector. NULL indicates that it is not displayed.
labelEmitbooleanOnly applies to text in polar coordinates, indicating whether the text is radially displayed according to the angle. True means on and false means off
layout'overlap' | 'fixedOverlap' | 'limitInShape'Text layout type, support a variety of layout function combination.
position'top' | 'bottom' | 'middle' | 'left' | 'right'Specifies the position of the current Label relative to the current graphic (💡 Attention: Only works for column plot and bar plot, which geometry is interval)
animateboolean | AnimateOptionAnimation configuration.
formatterFunctionFormat function
autoHidebooleanWhether to hide it automatically, default to false

Types of LabelLineCfg are as follow: (Go ShapeAttrs see more details about ShapeAttrs)

type LabelLineCfg = {
  style?: ShapeAttrs;
}

Example code:

{
  label: {
    style: {
      fill: 'red',
      opacity: 0.6,
      fontSize: 24
    }
  }
}

LabelLayout

通过 label.layout 可以设置标签布局,来进行标签显示策略的处理。

示例:

{
  label: {
    layout: [
      // 适用于柱状图的标签遮挡处理,会对遮挡的标签进行隐藏
      { type: 'interval-hide-overlap' }
    ]
  }
}
详细文档梳理中