Victory
Victory

About Docs Gallery Support GitHub FAQs

#
VictoryLabel

VictoryLabel renders the label components that are used across all of Victory.

##
active

`type: boolean`

The `active` prop specifies whether the label is active or not. The `active` prop is set by `defaultEvents` in components like `VictoryTooltip` and `VictorySelectionContainer`. The `active` prop is used when evaluating functional styles and props.

##
angle

`type: string || number`

The `angle` prop specifies the angle to rotate the text around its anchor point.

##
capHeight

`type: string || number || function`

The `capHeight` prop defines a text metric for the font being used: the expected height of capital letters. This is necessary because of SVG, which (a) positions the bottom of the text at `y`, and (b) has no notion of line height. This prop should be given as a number of ems.

##
className

`type: string`

The `className` prop specifies a class name that will be applied to the rendered text element.

example: `className="myLabel"`

##
data

`type: array[object]`

Victory components can pass a `data` prop to their label component. This can be useful in custom components that need to make use of the entire dataset.

##
datum

`type: object`

Victory components can pass a `datum` prop to their label component. This can be used to calculate functional styles, and determine text. If `x` and `y` are not specified, `datum` will be used to determine label position.

##
desc

`type: string`

The `desc` prop specifies the description of the chart/SVG to assist with accessibility for screen readers. The more descriptive this title is, the more useful it will be for people using screen readers.

##
direction

`type: "rtl" || "ltr" || "inherit"`

The `direction` prop determines which text direction to apply to the rendered `text` element

default: `direction="inherit"`

##
dx

`type: string || number || function`

The `dx` prop defines a horizontal shift from the `x` coordinate.

##
dy

`type: string || number || function`

The `dy` prop defines a vertical shift from the `y` coordinate. This prop is affected by `capHeight`, `lineHeight`, and `verticalAnchor`, and the number of lines of text that make up the label.

##
events

`type: object`

The `events` prop attaches arbitrary event handlers to the label component. This prop should be given as an object of event names and corresponding event handlers. When events are provided via Victory's event system, event handlers will be called with the event, the props of the component it is attached to, and an `eventKey`.

example: `events={{onClick: (evt) => alert("x: " + evt.clientX)}}`

##
height

`type: number`

This prop refers to the height of the `svg` that `VictoryLabel` is rendered within. This prop is passed from parents of `VictoryLabel`, and should not be set manually.

##
id

`type: string || number || function`

The `id` prop specifies a HTML ID that will be applied to the rendered text element.

##
index

`type: string || number`

The `index` prop represents the index of the datum in the data array. This prop should not be set manually.

##
inline

`type: boolean`

When the `text` property contains an array of strings, the `inline` property lets the `<tspan />` elements lay out next to each other. If this property is not specified, the `<tspan />` elements will stack vertically instead.

default: `false`

##
labelPlacement

`type: "parallel" || "perpendicular" || "vertical"`

The `labelPlacement` prop is used to specify the placement of labels relative to the data point they represent. This prop may be given as "vertical", "parallel" or "perpendicular". This props is particularly useful in polar charts, where it may be desireable to position a label either parallel or perpendicular to its corresponding angle. When this prop is not set, perpendicular label placement will be used for polar charts, and vertical label placement will be used for cartesian charts.

##
lineHeight

`type: string || number || function`

The `lineHeight` prop defines how much space a single line of text should take up. Note that SVG has no notion of line-height, so the positioning may differ slightly from what you would expect with CSS, but the result is similar: a roughly equal amount of extra space is distributed above and below the line of text. This prop should be given as a number of ems.

##
origin

`type: { x: number, y: number }`

Victory components will pass an `origin` prop is to define the center point in svg coordinates for polar charts. This prop should not be set manually.

##
polar

`type: boolean`

Victory components can pass a boolean `polar` prop to specify whether a label is part of a polar chart. This prop should not be set manually.

##
renderInPortal

`type: boolean`

The `renderInPortal` prop specifies whether `VictoryLabel` should render text in place or within a `VictoryPortal`. Setting `renderInPortal` to true is equivalent to wrapping `VictoryLabel` in a `VictoryPortal`. This prop is false by default.

##
scale

`type: { x: scale, y: scale }`

Victory components can pass a `scale` prop to their label component. This can be used to calculate the position of label elements from `datum`. This prop should not be set manually.

##
style

`type: object`

The `style` prop defines a set of SVG style properties that will be applied to the rendered `<text/>` element. This prop should be given as an object, or array of objects. When this prop is given as an array of objects, each style object in the array will be applied to the corresponding `<tspan/>` in multi-line labels.

##
text

`type: string || number || function || array`

The `text` prop defines the text `VictoryLabel` will render. The `text` prop may be given as a string, number, a function of `datum`, or an array of any of these. Strings may include newline characters, which `VictoryLabel` will split into separate `<tspan/>` elements. When `text` is given as an array, separate `<tspan/>` elements will be created for each element in the array.

examples: `text={(datum) => "x: " + datum.x}`, `text="Apples\n(green)"`, `text={["first line", "second line"]}`

##
textAnchor

`type: "start" || "middle" || "end" || "inherit"`

The `textAnchor` prop defines how the text is horizontally positioned relative to the given `x` and `y` coordinates. Options are "start", "middle", "end", and "inherit".

##
transform

`type: string || object || function`

The `transform` prop applies a transform to the rendered `<text>` element. This prop may be supplied as a string or an object containing transform definitions.

##
verticalAnchor

`type: "start" || "middle" || "end"`

The `verticalAnchor` prop defines how the text is vertically positioned relative to the given `x` and `y` coordinates. Options are "start", "middle" and "end".

##
width

`type: number`

This props refers to the width of the `svg` that `VictoryLabel` is rendered within. This prop is passed from parents of `VictoryLabel`, and should not be set manually.

##
x

`type: number`

The `x` prop defines the x coordinate to use as a basis for positioning the label element.

##
y

`type: number`

The `y` prop defines the y coordinate to use as a basis for positioning the label element.