Chart primitives

Layouts & specialized

Interactions

SVG utilities

Data utilities

Umbrella package

@vx/vx

@vx/text

The @vx/text provides a better SVG <Text> component with the following features

Word-wrapping (when width prop is defined)
Vertical alignment (verticalAnchor prop)
Rotation (angle prop)
Scale-to-fit text (scaleToFit prop)

Example

Simple demo to show off a useful feature. Since svg <text> itself does not support verticalAnchor, normally text rendered at 0,0 would be outside the viewport and thus not visible. By using <Text> with the verticalAnchor="start" prop, the text will now be visible as you'd expect.

import React from 'react';
import { render } from 'react-dom';
import { Text } from '@vx/text';

const App = () => (
  <svg>
    <Text verticalAnchor="start">Hello world</Text>
  </svg>
);

render(<App />, document.getElementById('root'));

Installation

npm install --save @vx/text

Examples

Flexible SVG Text

Text

<Text.Text />

Components

<Text />

APIs

#<Text />

# Text.anglenumber | undefinedoptional

Rotational angle of the text.

# Text.capHeightstring | number | undefinedoptional

Cap height of the text.

Default 0.71em

# Text.childrenReactNodeoptional

String (or number coercible to one) to be styled and positioned.

# Text.classNamestring | undefinedoptional

className to apply to the SVGText element.

# Text.dxstring | number | undefinedoptional

dx offset of the text.

Default 0

# Text.dystring | number | undefinedoptional

dy offset of the text.

Default 0

# Text.fillstring | undefinedoptional

Fill color of text.

# Text.fontFamilystring | undefinedoptional

Font family of text.

# Text.fontSizestring | number | undefinedoptional

Font size of text.

# Text.innerRef((instance: SVGSVGElement | null) => void) | RefObject<SVGSVGElement> | null | undefinedoptional

Ref passed to the Text SVG element.

# Text.lineHeightstring | number | undefinedoptional

Desired "line height" of the text, implemented as y offsets.

Default 1em

# Text.scaleToFitboolean | undefinedoptional

Whether to scale the fontSize to accommodate the specified width.

Default false

# Text.styleCSSProperties | undefinedoptional

Styles to be applied to the text (and used in computation of its size).

# Text.textAnchor"end" | "inherit" | "start" | "middle" | undefinedoptional

Horizontal text anchor.

Default start

# Text.verticalAnchor"end" | "start" | "middle" | undefinedoptional

Vertical text anchor.

Default end

# Text.widthnumber | undefinedoptional

Maximum width to occupy (approximate as words are not split).

# Text.xstring | number | undefinedoptional

x position of the text.

Default 0

# Text.ystring | number | undefinedoptional

y position of the text.

Default 0