> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/recharts/recharts/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

```tsx theme={null}
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

<ParamField path="children" type="string | number | boolean | null | undefined">
  The text content to render.

  Numbers are converted to strings. Null and undefined render nothing.
</ParamField>

### Position

<ParamField path="x" type="number" default="0">
  The x-coordinate of the text.
</ParamField>

<ParamField path="y" type="number" default="0">
  The y-coordinate of the text.
</ParamField>

<ParamField path="dx" type="number">
  Horizontal offset from the x position.
</ParamField>

<ParamField path="dy" type="number">
  Vertical offset from the y position.
</ParamField>

### Alignment

<ParamField path="textAnchor" type="'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
</ParamField>

<ParamField path="verticalAnchor" type="'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)
</ParamField>

### Line breaking

<ParamField path="width" type="number | string">
  When specified, text automatically wraps by calculating the width.

  Can be a number (pixels) or CSS string value.
</ParamField>

<ParamField path="breakAll" type="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.
</ParamField>

<ParamField path="maxLines" type="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
</ParamField>

<ParamField path="lineHeight" type="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.
</ParamField>

### Scaling

<ParamField path="scaleToFit" type="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
</ParamField>

### Rotation

<ParamField path="angle" type="number" default="0">
  Text rotation angle in degrees.

  Positive values rotate clockwise, negative values rotate counterclockwise.
</ParamField>

### Styling

<ParamField path="style" type="CSSProperties">
  CSS styles applied to the text element.

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

<ParamField path="fill" type="string" default="#808080">
  The fill color of the text.
</ParamField>

<ParamField path="stroke" type="string">
  The stroke color of the text.
</ParamField>

<ParamField path="fontSize" type="number | string">
  The font size of the text.
</ParamField>

<ParamField path="fontFamily" type="string">
  The font family of the text.
</ParamField>

<ParamField path="fontWeight" type="string | number">
  The font weight of the text.
</ParamField>

### Other

<ParamField path="className" type="string">
  CSS class name for the text element.
</ParamField>

<ParamField path="capHeight" type="string" default="0.71em">
  The cap height used for vertical alignment calculations.

  This is a magic number from d3.
</ParamField>

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