LabelList

Props

• anglenumberoptional

  Text rotation angle in degrees. Positive values rotate clockwise, negative values rotate counterclockwise.

  DEFAULT: 0

• clockWisebooleanoptional

  The parameter to calculate the view box of label in radial charts.

• contentFunction | ReactNodeoptional

  If set a React element, the option is the customized React element of rendering each label. If set to a function, the function is called once for each item

  FORMAT:

  <LabelList content={CustomizedLabel} />

  Examples:

  • Customized content of LabelList in a BarChart
  • Custom Shape Bar Chart
  • Target Price Chart with active Label

• dataKeyFunction | number | stringoptional

  Decides how to extract the value of each label from the data:

  • string: the name of the field in the data object;
  • number: the index of the field in the data;
  • function: a function that receives the data object and returns the value of each label.

  If set, then valueAccessor will be ignored.

  Scatter requires this prop to be set. Other graphical components will show the same value as the dataKey of the component by default.

  Examples:

  • Bar Chart With Min Height
  • Scatter Chart With Labels

• formatterFunctionoptional

  Function to customize how content is serialized before rendering.

  This should return a renderable text - something that the Text component can render. Typically, a string or number. Custom components are not supported here - use the content prop instead.

• idstringoptional

  Unique identifier of this component. Used as an HTML attribute id.

• offsetnumber | stringoptional

  The offset to the specified "position". Direction of the offset depends on the position.

  DEFAULT: 5

• position"bottom" | "center" | "centerBottom" | "centerTop" | "end" | "inside" | "insideBottom" | "insideBottomLeft" | "insideBottomRight" | "insideEnd" | "insideLeft" | "insideRight" | "insideStart" | "insideTop" | "insideTopLeft" | "insideTopRight" | "left" | "middle" | "outside" | "right" | "top" | { x?: string | number | undefined; y?: string | number | undefined; }optional

  The position of label relative to the view box.

  DEFAULT: "middle"

  Examples:

  • Custom Shape Bar Chart
  • Target Price Chart with active Label

• textBreakAllbooleanoptional

  DEFAULT: false

• valueAccessorFunctionoptional

  The accessor function to get the value of each label. Is ignored if dataKey is specified.

• zIndexnumberoptional

  Z-Index of this component and its children. The higher the value, the more on top it will be rendered. Components with higher zIndex will appear in front of components with lower zIndex. If undefined or 0, the content is rendered in the default layer without portals.

  DEFAULT: 2000

  Examples:

  • Z-Index and layers guide