Text

Renders SVG text with advanced features

Renders SVG text with advanced features like automatic line breaking, scaling, and alignment. The Text component is a low-level component used internally by Label and other text-rendering components.

Usage

import { Text } from 'recharts';

<svg width={500} height={300}>
  <Text x={250} y={150} width={200} textAnchor="middle">
    This is a long text that will wrap automatically
  </Text>
</svg>

Props

Content

children · string | number | boolean | null | undefined

The text content to render.

Numbers are converted to strings. Null and undefined render nothing.

Position

x · number · default: "0"

The x-coordinate of the text.

y · number · default: "0"

The y-coordinate of the text.

dx · number

Horizontal offset from the x position.

dy · number

Vertical offset from the y position.

Alignment

textAnchor · 'start' | 'middle' | 'end' | 'inherit' · default: "start"

Horizontal text alignment within the text element.

• start: Text starts at the x coordinate (left-aligned for LTR text)
• middle: Text is centered on the x coordinate
• end: Text ends at the x coordinate (right-aligned for LTR text)
• inherit: Inherits from parent element

verticalAnchor · 'start' | 'middle' | 'end' · default: "end"

Vertical text alignment relative to the y coordinate.

• start: Text baseline starts at y coordinate (text appears below y)
• middle: Text is vertically centered on y coordinate
• end: Text baseline ends at y coordinate (text appears above y)

Line breaking

width · number | string

When specified, text automatically wraps by calculating the width.

Can be a number (pixels) or CSS string value.

breakAll · boolean · default: "false"

Enables character-level breaking instead of word-level breaking.

• false: Text breaks at word boundaries (spaces, tabs)
• true: Text can break between any characters (useful for languages without spaces)

Only effective when width is defined.

maxLines · number

Maximum number of lines to display when text wrapping is enabled.

When text exceeds this limit, it is truncated with an ellipsis (…).

Requirements for ellipsis truncation:

• width must be defined
• scaleToFit must be false
• Text must actually overflow

lineHeight · number | string · default: "1em"

Line height for multi-line text.

Can be a number (pixels) or string with CSS units. Used to calculate spacing between lines.

Scaling

scaleToFit · boolean · default: "false"

When true, scales the text to fit within the specified width.

Important interactions:

• Requires width to be defined
• When enabled, maxLines restrictions are bypassed
• Uses the first line’s width to calculate scale factor

Rotation

angle · number · default: "0"

Text rotation angle in degrees.

Positive values rotate clockwise, negative values rotate counterclockwise.

Styling

style · CSSProperties

CSS styles applied to the text element.

Font-related properties are particularly important for accurate text measurements when using width constraints or scaleToFit.

fill · string · default: "#808080"

The fill color of the text.

stroke · string

The stroke color of the text.

fontSize · number | string

The font size of the text.

fontFamily · string

The font family of the text.

fontWeight · string | number

The font weight of the text.

Other

className · string

CSS class name for the text element.

capHeight · string · default: "0.71em"

The cap height used for vertical alignment calculations.

This is a magic number from d3.

Notes

• Text measurement is performed in the browser, so results may vary slightly across different browsers and operating systems.
• When using scaleToFit, ensure your text is short enough that scaling doesn’t make it unreadable.
• The maxLines prop uses binary search to find the optimal truncation point for performance.
• Text wrapping and scaling features are disabled in server-side rendering (SSR) environments.