Label

Props

• anglenumberoptional

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

  DEFAULT: 0

• childrenReactNodeoptional

  The value of label can be set as children or as the value prop

  FORMAT:

  <Label>foo</Label>

  Examples:

  • Pie Chart in Grid

• classNamestringoptional

• contentFunction | ReactNodeoptional

  If set a React element, the option is the custom react element of rendering label. If set a function, the function will be called to render label content.

  FORMAT:

  <Label content={CustomizedLabel} />
  const renderCustomLabel = (props) => <text {...props}>Custom Label</text>;
  <Label content={renderCustomLabel} />

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

• indexnumberoptional

• labelRefReact.RefObject<SVGTextElement> | nulloptional

• offsetnumber | stringoptional

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

  DEFAULT: 5

• parentViewBoxRequired<CartesianViewBox> | Required<PolarViewBox>optional

• 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:

  • Pie Chart in Grid

• textBreakAllbooleanoptional

  DEFAULT: false

• valuefalse | null | number | string | trueoptional

  The value of label can be set as children or as the value prop

  FORMAT:

  <Label value="foo" />

• viewBoxRequired<CartesianViewBox> | Required<PolarViewBox>optional

  The box of viewing area. Used for positioning. If undefined, viewBox will be calculated based on surrounding context.

• 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