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

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.

type: string || number

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

<VictoryScatter
  domain={[-10, 10]}
  data={[{ x: 0, y: 0 }]}
  labels="This is a label"
  labelComponent={
    <VictoryLabel angle={-45} textAnchor="end"/>
  }
/>

type: element

The backgroundComponent prop takes a component instance which will be used to create backgrounds for labels. The new element created from the passed backgroundComponent will be supplied with the following properties: x, y, height, width, style, and transform. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If backgroundComponent is omitted, a default Rect component will be created with props described above. backgroundComponent is only rendered when a backgroundStyle prop is added to VictoryLabel.

examples: backgroundComponent={<Rect height={50}/>}

default: <Rect/>

type: number || array || { top: number, bottom: number, left: number, right: number }

The backgroundPadding prop adds padding around background elements. This prop may be given as a number or an object with values for "top", "bottom", "left", and "right". In the case of multi-line, multi-background labels, this prop may be given as an array.

<VictoryScatter
  domain={[-10, 10]}
  data={[{ x: 0, y: 0 }]}
  labels={() => ["This is a", "multi-line", "label"]}
  labelComponent={
    <VictoryLabel
      dy={-20}
      textAnchor="start"
      backgroundPadding={[
      	3,
      	{ left: 20, right: 20 },
        { left: 20}
      ]}
      backgroundStyle={[
        { fill: "red", opacity: 0.2 },
        { fill: "green", opacity: 0.2 },
        { fill: "blue", opacity: 0.2 }
      ]}
    />
  }
/>

type: object || array

The backgroundStyle prop defines a set of SVG style properties that will be applied to the rendered background element(s). This prop should be given as an object, or array of objects. When this prop is given as an array of objects and there are multi-line labels, multiple background elements will be rendered, and styled individually. When this prop is given as an object, a single background element will be rendered for the entire label.

<VictoryScatter
  domain={[-10, 10]}
  data={[{ x: 0, y: 0 }]}
  labels={() => ["This is a", "multi-line", "label"]}
  labelComponent={
    <VictoryLabel
      backgroundStyle={{ fill: "pink" }}
      backgroundPadding={3}
    />
  }
/>

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.

type: string

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

example: className="myLabel"

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.

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.

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.

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

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

default: direction="inherit"

type: string || number || function

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

<VictoryScatter
  domain={[-10, 10]}
  data={[{ x: 0, y: 0 }]}
  labels={() => ["This is a", "multi-line", "label"]}
  style={{ labels: { padding: 0 } }}
  labelComponent={
    <VictoryLabel
      dx={20}
      textAnchor="start"
      verticalAnchor="middle"
    />
  }
/>

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.

<VictoryScatter
  domain={[-10, 10]}
  data={[{ x: 0, y: 0 }]}
  labels={() => ["This is a", "multi-line", "label"]}
  style={{ labels: { padding: 0 } }}
  labelComponent={
    <VictoryLabel
      dy={20}
      textAnchor="end"
      verticalAnchor="start"
    />
  }
/>

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)}}

type: element

The groupComponent prop takes a component instance which will be used to create group elements when VictoryLabel renders both labels and backgrounds.

default: <g/>

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.

type: string || number || function

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

type: string || number

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

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

<VictoryScatter
  domain={[-10, 10]}
  data={[{ x: 0, y: 0 }]}
  labels={() => ["This is a", "multi-line", "label"]}
  labelComponent={
    <VictoryLabel
      inline
      style={[
        { fill: "red" },
        { fill: "green" },
        { fill: "blue" }
      ]}
    />
  }
/>

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

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

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.

<VictoryScatter
  domain={[-10, 10]}
  data={[{ x: 0, y: 0 }]}
  labels={() => ["This is a", "multi-line", "label"]}
  labelComponent={
    <VictoryLabel
      lineHeight={[1, 1, 3]}
      style={[
        { fill: "red" },
        { fill: "green" },
        { fill: "blue" }
      ]}
    />
  }
/>

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.

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.

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.

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.

type: object || array

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. When this prop is given as an array with fewer elements than there are <tspan/> elements, the first element of the style array will be applied to extra lines.

<VictoryScatter
  domain={[-10, 10]}
  data={[{ x: 0, y: 0 }]}
  labels={() => ["This is a", "multi-line", "label"]}
  labelComponent={
    <VictoryLabel
      style={[
        { fill: "red", fontSize: 25 },
        { fill: "green", fontFamily: "monospace" }
      ]}
    />
  }
/>

type: number || function

The tabIndex prop specifies the tabIndex that will be applied to the rendered label. This prop may be given as a number or as a function that returns a number.

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"]}

<VictoryScatter
  domain={[-10, 10]}
  data={[{ x: 0, y: 0 }]}
  labels={true}
  labelComponent={
    <VictoryLabel
      text={({ datum }) => [`x: ${datum.x}`, `y: ${datum.y}`]}
    />
  }
/>

type: element

The textComponent prop takes a component instance which will be used to create text elements when VictoryLabel renders labels.

default: <Text />

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

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". This prop may also be given as a function that returns one of these options.

<VictoryScatter
  domain={[-10, 10]}
  data={[{ x: 0, y: 0 }]}
  labels={() => ["This is a", "multi-line", "label"]}
  labelComponent={
    <VictoryLabel
      textAnchor={({ text }) => text.length > 1 ? "start" : "middle"}
    />
  }
/>

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.

<VictoryScatter
  domain={[-10, 10]}
  data={[{ x: 0, y: 0 }]}
  labels={() => ["This is a", "multi-line", "label"]}
  labelComponent={
    <VictoryLabel
      transform="skewX(30)"
    />
  }
/>

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". This prop may also be given as a function that returns one of these options.

<VictoryScatter
  domain={[-10, 10]}
  data={[{ x: 0, y: 0 }]}
  labels={() => ["This is a", "multi-line", "label"]}
  labelComponent={
    <VictoryLabel
      verticalAnchor={({ text }) => text.length > 1 ? "start" : "middle"}
    />
  }
/>

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.

type: number

The x prop defines the x coordinate to use as a basis for positioning the label element. Please note that this prop should be given in terms of svg coordinates, not data coordinates. To add a label annotation to a chart that is fixed to a specific data coordinate, please use the scale prop that VictoryChart provides to its children to transform data coordinates into svg coordinates.

  const DataLabel = props => {
    const x = props.scale.x(props.x);
    const y = props.scale.y(props.y);
    return <VictoryLabel {...props} x={x} y={y}/>
  };

  const MyChart = () => {
    return (
      <VictoryChart domain={ [0, 10]}>
        <VictoryLine />
        <VictoryScatter data={[{ x: 5, y: 5 }]} />
        <DataLabel
          x={5}
          y={5}
          dy={10}
          text="a custom data coordinate label"
        />
        <VictoryLabel
          x={55}
          y={50}
          text="an svg coordinate label"
        />
      </VictoryChart>
    );
  };


render(<MyChart/>);

type: number

The y prop defines the y coordinate to use as a basis for positioning the label element. Please note that this prop should be given in terms of svg coordinates, not data coordinates.