Skip to main content
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.

Build docs developers (and LLMs) love

Get started for freeTalk to us