victory-core - npm Package Compare versions

Comparing version 34.3.8 to 34.3.12

es/index.d.ts

@@ -196,10 +196,17 @@ import * as React from "react";
   angle?: string | number;
+  backgroundComponent?: React.ReactElement;
+  backgroundStyle?: React.CSSProperties | React.CSSProperties[];
+  backgroundPadding?: PaddingProps | PaddingProps[];
   capHeight?: StringOrNumberOrCallback;
+  children?: StringOrNumberOrCallback;
   className?: string;
   datum?: {};
   data?: any[];
+  desc?: string;
+  direction?: string;
   events?: React.DOMAttributes<any>;
-  children?: StringOrNumberOrCallback;
+  inline?: boolean;
+  groupComponent?: React.ReactElement;
   labelPlacement?: LabelOrientationType;
-  lineHeight?: StringOrNumberOrCallback;
+  lineHeight?: StringOrNumberOrCallback | (string | number)[];
   origin?: OriginType;
@@ -211,4 +218,5 @@ polar?: boolean;
   textAnchor?: TextAnchorType | { (): TextAnchorType };
+  title?: string;
+  transform?: string | {} | { (): string | {} };
   verticalAnchor?: VerticalAnchorType | { (): VerticalAnchorType };
-  transform?: string | {} | { (): string | {} };
   x?: number;
@@ -230,2 +238,3 @@ y?: number;
   containerId?: number | string;
+  containerRef?: React.Ref<HTMLElement>;
   desc?: string;
@@ -232,0 +241,0 @@ events?: React.DOMAttributes<any>;

es/victory-label/victory-label.js

@@ -9,5 +9,15 @@ import _isEmpty from "lodash/isEmpty";
 
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
+
+function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
+
+/*eslint no-magic-numbers: ["error", { "ignore": [-0.5, 0.5, 0, 1, 2] }]*/
 import React from "react";
 import PropTypes from "prop-types";
 import VictoryPortal from "../victory-portal/victory-portal";
+import Rect from "../victory-primitives/rect";
 import CustomPropTypes from "../victory-util/prop-types";
@@ -18,2 +28,3 @@ import Helpers from "../victory-util/helpers";
 import Log from "../victory-util/log";
+import TextSize from "../victory-util/textsize";
 import TSpan from "../victory-primitives/tspan";
@@ -76,2 +87,12 @@ import Text from "../victory-primitives/text";
 
+var getLineHeight = function (props) {
+  var lineHeight = getHeight(props, "lineHeight");
+
+  if (Array.isArray(lineHeight)) {
+    return _isEmpty(lineHeight) ? [1] : lineHeight;
+  } else {
+    return [lineHeight];
+  }
+};
+
 var getContent = function (text, props) {
@@ -97,16 +118,8 @@ if (text === undefined || text === null) {
 
-var checkLineHeight = function (lineHeight, val, fallbackVal) {
-  if (Array.isArray(lineHeight)) {
-    return _isEmpty(lineHeight) ? fallbackVal : val;
-  }
-
-  return lineHeight;
-};
-
 var getDy = function (props, lineHeight) {
   var style = Array.isArray(props.style) ? props.style[0] : props.style;
-  lineHeight = checkLineHeight(lineHeight, lineHeight[0], 1);
+  lineHeight = lineHeight[0];
   var fontSize = style.fontSize;
   var dy = props.dy ? Helpers.evaluateProp(props.dy, props) : 0;
-  var length = props.text.length;
+  var length = props.inline ? 1 : props.text.length;
   var capHeight = getHeight(props, "capHeight");
@@ -144,48 +157,167 @@ var verticalAnchor = style.verticalAnchor || props.verticalAnchor;
 
-var renderElements = function (props) {
-  var inline = props.inline,
-      className = props.className,
-      title = props.title,
-      events = props.events,
-      direction = props.direction,
-      text = props.text,
-      style = props.style;
-  var lineHeight = getHeight(props, "lineHeight");
-  var textAnchor = props.textAnchor ? Helpers.evaluateProp(props.textAnchor, props) : "start";
-  var dx = props.dx ? Helpers.evaluateProp(props.dx, props) : 0;
-  var dy = getDy(props, lineHeight);
-  var transform = getTransform(props);
-  var x = props.x !== undefined ? props.x : getPosition(props, "x");
-  var y = props.y !== undefined ? props.y : getPosition(props, "y");
-  var textChildren = text.map(function (line, i) {
-    var currentStyle = style[i] || style[0];
-    var lastStyle = style[i - 1] || style[0];
-    var fontSize = (currentStyle.fontSize + lastStyle.fontSize) / 2;
-    var currentLineHeight = checkLineHeight(lineHeight, (lineHeight[i] + (lineHeight[i - 1] || lineHeight[0])) / 2, 1);
-    var tspanProps = {
-      key: "".concat(props.id, "-key-").concat(i),
-      x: !inline ? props.x : undefined,
-      dx: dx,
-      dy: i && !inline ? currentLineHeight * fontSize : undefined,
-      textAnchor: currentStyle.textAnchor || textAnchor,
-      style: currentStyle,
-      children: line
-    };
-    return React.cloneElement(props.tspanComponent, tspanProps);
+var getXCoordinate = function (calculatedProps, labelSizeWidth) {
+  var direction = calculatedProps.direction,
+      textAnchor = calculatedProps.textAnchor,
+      x = calculatedProps.x;
+
+  if (direction === "rtl") {
+    return x - labelSizeWidth;
+  }
+
+  switch (textAnchor) {
+    case "start":
+      return x;
+
+    case "middle":
+      return Math.round(x - labelSizeWidth / 2);
+
+    case "end":
+      return Math.round(x - labelSizeWidth);
+
+    default:
+      return x;
+  }
+};
+
+var getYCoordinate = function (calculatedProps, props, textHeight) {
+  var verticalAnchor = calculatedProps.verticalAnchor,
+      y = calculatedProps.y;
+  var dy = props.dy,
+      inline = props.inline;
+  var offset = y + (dy || 0);
+
+  switch (verticalAnchor) {
+    case "start":
+      return Math.floor(offset);
+
+    case "middle":
+      return Math.floor(offset - textHeight / 2);
+
+    case "end":
+      return inline ? Math.floor(offset) : Math.ceil(offset - textHeight);
+
+    default:
+      return inline ? Math.floor(offset) : Math.floor(offset - textHeight / 2);
+  }
+};
+
+var getBackgroundPadding = function (props) {
+  if (props.backgroundPadding && Array.isArray(props.backgroundPadding)) {
+    return props.backgroundPadding.map(function (backgroundPadding) {
+      return Helpers.getPadding({
+        backgroundPadding: backgroundPadding
+      }, "backgroundPadding");
+    });
+  } else {
+    return Helpers.getPadding(props, "backgroundPadding");
+  }
+};
+
+var getBackgroundPaddingProp = function (i, backgroundPadding) {
+  if (Array.isArray(backgroundPadding)) {
+    return backgroundPadding[i] || backgroundPadding[0];
+  } else {
+    return backgroundPadding;
+  }
+};
+
+var getFullBackground = function (props, calculatedProps, tspanValues) {
+  var backgroundComponent = props.backgroundComponent,
+      backgroundStyle = props.backgroundStyle,
+      inline = props.inline;
+  var dx = calculatedProps.dx,
+      backgroundPadding = calculatedProps.backgroundPadding,
+      transform = calculatedProps.transform;
+  var textSizes = tspanValues.map(function (tspan) {
+    return TextSize.approximateTextSize(tspan.text, tspan.style);
   });
-  return React.cloneElement(props.textComponent, _objectSpread({}, events, {
-    direction: direction,
-    dx: dx,
-    dy: dy,
-    x: x,
-    y: y,
+  var height = inline ? Math.max.apply(Math, _toConsumableArray(textSizes.map(function (size) {
+    return size.height;
+  }))) : textSizes.reduce(function (memo, size, i) {
+    return memo + size.height * tspanValues[i].lineHeight;
+  }, 0);
+  var width = inline ? textSizes.reduce(function (memo, size) {
+    return memo + size.width;
+  }, 0) + (dx || 0) : Math.max.apply(Math, _toConsumableArray(textSizes.map(function (size) {
+    return size.width;
+  }))) + (dx || 0);
+  var xCoordinate = getXCoordinate(calculatedProps, width);
+  var yCoordinate = getYCoordinate(calculatedProps, props, height);
+  var backgroundProps = {
+    key: "background",
+    height: height + backgroundPadding.top + backgroundPadding.bottom,
+    style: backgroundStyle,
     transform: transform,
-    className: className,
-    title: title,
-    desc: Helpers.evaluateProp(props.desc, props),
-    tabIndex: Helpers.evaluateProp(props.tabIndex, props),
-    id: props.id
-  }), textChildren);
+    width: width + backgroundPadding.left + backgroundPadding.right,
+    x: xCoordinate,
+    y: yCoordinate
+  };
+  return React.cloneElement(backgroundComponent, _defaults({}, backgroundComponent.props, backgroundProps));
 };
 
+var getChildBackgrounds = function (props, calculatedProps, tspanValues) {
+  var backgroundStyle = props.backgroundStyle,
+      backgroundComponent = props.backgroundComponent,
+      inline = props.inline,
+      y = props.y;
+  var dy = calculatedProps.dy,
+      backgroundPadding = calculatedProps.backgroundPadding,
+      transform = calculatedProps.transform;
+  var textElements = tspanValues.map(function (current, i) {
+    var previous = tspanValues[i - 1] || tspanValues[0];
+    var labelSize = TextSize.approximateTextSize(current.text, current.style);
+    var totalLineHeight = current.fontSize * current.lineHeight;
+    var textHeight = Math.ceil(totalLineHeight);
+    var prevPaddingProp = getBackgroundPaddingProp(i - 1, backgroundPadding);
+    var childDy = i && !inline ? previous.fontSize * previous.lineHeight + prevPaddingProp.top + prevPaddingProp.bottom : dy - totalLineHeight * 0.5 - (current.fontSize - current.capHeight);
+    return {
+      textHeight: textHeight,
+      labelSize: labelSize,
+      y: y,
+      fontSize: current.fontSize,
+      dy: childDy
+    };
+  });
+  return textElements.map(function (textElement, i) {
+    var xCoordinate = getXCoordinate(calculatedProps, textElement.labelSize.width);
+    var yCoordinate = textElements.slice(0, i + 1).reduce(function (prev, curr) {
+      return prev + curr.dy;
+    }, y);
+    var padding = getBackgroundPaddingProp(i, backgroundPadding);
+    var backgroundProps = {
+      key: "tspan-background-".concat(i),
+      height: textElement.textHeight + padding.top + padding.bottom,
+      style: backgroundStyle[i] || backgroundStyle[0],
+      width: textElement.labelSize.width + padding.left + padding.right,
+      transform: transform,
+      x: xCoordinate,
+      y: yCoordinate
+    };
+    return React.cloneElement(backgroundComponent, _defaults({}, backgroundComponent.props, backgroundProps));
+  });
+};
+
+var getBackgroundElement = function (props, calculatedProps, tspanValues) {
+  return Array.isArray(props.backgroundStyle) ? getChildBackgrounds(props, calculatedProps, tspanValues) : getFullBackground(props, calculatedProps, tspanValues);
+};
+
+var calculateSpanDy = function (current, previous) {
+  return -0.5 * previous.fontSize - 0.5 * (previous.fontSize * previous.lineHeight) + previous.fontSize * previous.lineHeight + 0.5 * current.fontSize + 0.5 * current.fontSize * current.lineHeight - (current.fontSize - current.capHeight) * 0.5 + (previous.fontSize - previous.capHeight) * 0.5;
+};
+
+var getTSpanDy = function (tspanValues, props, i) {
+  var inline = props.inline,
+      backgroundStyle = props.backgroundStyle;
+  var current = tspanValues[i];
+  var previous = tspanValues[i - 1] || tspanValues[0];
+
+  if (i && !inline) {
+    return backgroundStyle && Array.isArray(backgroundStyle) && backgroundStyle.length > 1 ? calculateSpanDy(current, previous) + current.backgroundPadding.top + previous.backgroundPadding.bottom : calculateSpanDy(current, previous);
+  } else if (inline) {
+    return i === 0 ? current.backgroundPadding.top : undefined;
+  } else {
+    return current.backgroundPadding.top;
+  }
+};
+
 var evaluateProps = function (props) {
@@ -209,2 +341,72 @@ /* Potential evaluated props are
 
+var getCalculatedProps = function (props) {
+  var lineHeight = getLineHeight(props);
+  var direction = props.direction ? Helpers.evaluateProp(props.direction, props) : "inherit";
+  var textAnchor = props.textAnchor ? Helpers.evaluateProp(props.textAnchor, props) : "start";
+  var verticalAnchor = props.verticalAnchor ? Helpers.evaluateProp(props.verticalAnchor, props) : "middle";
+  var dx = props.dx ? Helpers.evaluateProp(props.dx, props) : 0;
+  var dy = getDy(props, lineHeight);
+  var transform = getTransform(props);
+  var x = props.x !== undefined ? props.x : getPosition(props, "x");
+  var y = props.y !== undefined ? props.y : getPosition(props, "y");
+  var backgroundPadding = getBackgroundPadding(props);
+  return {
+    lineHeight: lineHeight,
+    direction: direction,
+    textAnchor: textAnchor,
+    verticalAnchor: verticalAnchor,
+    dx: dx,
+    dy: dy,
+    backgroundPadding: backgroundPadding,
+    transform: transform,
+    x: x,
+    y: y
+  };
+};
+
+var renderLabel = function (props, calculatedProps, tspanValues) {
+  var inline = props.inline,
+      className = props.className,
+      title = props.title,
+      events = props.events,
+      direction = props.direction,
+      text = props.text;
+  var textAnchor = calculatedProps.textAnchor,
+      dx = calculatedProps.dx,
+      dy = calculatedProps.dy,
+      transform = calculatedProps.transform,
+      x = calculatedProps.x,
+      y = calculatedProps.y;
+
+  var textProps = _objectSpread({
+    key: "text"
+  }, events, {
+    direction: direction,
+    dx: dx,
+    x: x,
+    y: y + dy,
+    transform: transform,
+    className: className,
+    title: title,
+    desc: Helpers.evaluateProp(props.desc, props),
+    tabIndex: Helpers.evaluateProp(props.tabIndex, props),
+    id: props.id
+  });
+
+  var tspans = text.map(function (line, i) {
+    var currentStyle = tspanValues[i].style;
+    var tspanProps = {
+      key: "".concat(props.id, "-key-").concat(i),
+      x: !inline ? props.x : undefined,
+      dx: dx + tspanValues[i].backgroundPadding.left,
+      dy: getTSpanDy(tspanValues, props, i),
+      textAnchor: currentStyle.textAnchor || textAnchor,
+      style: currentStyle,
+      children: line
+    };
+    return React.cloneElement(props.tspanComponent, tspanProps);
+  });
+  return React.cloneElement(props.textComponent, textProps, tspans);
+};
+
 var VictoryLabel = function (props) {
@@ -217,3 +419,31 @@ props = evaluateProps(props);
 
-  var label = renderElements(props);
+  var calculatedProps = getCalculatedProps(props);
+  var _props = props,
+      text = _props.text,
+      style = _props.style,
+      capHeight = _props.capHeight;
+  var backgroundPadding = calculatedProps.backgroundPadding,
+      lineHeight = calculatedProps.lineHeight;
+  var tspanValues = text.map(function (line, i) {
+    var currentStyle = style[i] || style[0];
+    var capHeightPx = TextSize.convertLengthToPixels("".concat(capHeight, "em"), currentStyle.fontSize);
+    var currentLineHeight = lineHeight[i] || lineHeight[0];
+    return {
+      style: currentStyle,
+      fontSize: currentStyle.fontSize || defaultStyles.fontSize,
+      capHeight: capHeightPx,
+      text: line,
+      lineHeight: currentLineHeight,
+      backgroundPadding: getBackgroundPaddingProp(i, backgroundPadding)
+    };
+  });
+  var label = renderLabel(props, calculatedProps, tspanValues);
+
+  if (props.backgroundStyle) {
+    var backgroundElement = getBackgroundElement(props, calculatedProps, tspanValues);
+    var children = [backgroundElement, label];
+    var backgroundWithLabel = React.cloneElement(props.groupComponent, {}, children);
+    return props.renderInPortal ? React.createElement(VictoryPortal, null, backgroundWithLabel) : backgroundWithLabel;
+  }
+
   return props.renderInPortal ? React.createElement(VictoryPortal, null, label) : label;
@@ -228,2 +458,5 @@ };
   angle: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  backgroundComponent: PropTypes.element,
+  backgroundPadding: PropTypes.oneOfType([PropTypes.number, PropTypes.object, PropTypes.array]),
+  backgroundStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
   capHeight: PropTypes.oneOfType([PropTypes.string, CustomPropTypes.nonNegative, PropTypes.func]),
@@ -238,2 +471,3 @@ className: PropTypes.string,
   events: PropTypes.object,
+  groupComponent: PropTypes.element,
   id: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.func]),
@@ -267,2 +501,4 @@ index: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 VictoryLabel.defaultProps = {
+  backgroundComponent: React.createElement(Rect, null),
+  groupComponent: React.createElement("g", null),
   direction: "inherit",
@@ -269,0 +505,0 @@ textComponent: React.createElement(Text, null),

es/victory-util/helpers.js

@@ -110,3 +110,4 @@ import _assign from "lodash/assign";
 function getPadding(props) {
-  var padding = props.padding;
+  var name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "padding";
+  var padding = props[name];
   var paddingVal = typeof padding === "number" ? padding : 0;
@@ -113,0 +114,0 @@ var paddingObj = typeof padding === "object" ? padding : {};

lib/index.d.ts

@@ -196,10 +196,17 @@ import * as React from "react";
   angle?: string | number;
+  backgroundComponent?: React.ReactElement;
+  backgroundStyle?: React.CSSProperties | React.CSSProperties[];
+  backgroundPadding?: PaddingProps | PaddingProps[];
   capHeight?: StringOrNumberOrCallback;
+  children?: StringOrNumberOrCallback;
   className?: string;
   datum?: {};
   data?: any[];
+  desc?: string;
+  direction?: string;
   events?: React.DOMAttributes<any>;
-  children?: StringOrNumberOrCallback;
+  inline?: boolean;
+  groupComponent?: React.ReactElement;
   labelPlacement?: LabelOrientationType;
-  lineHeight?: StringOrNumberOrCallback;
+  lineHeight?: StringOrNumberOrCallback | (string | number)[];
   origin?: OriginType;
@@ -211,4 +218,5 @@ polar?: boolean;
   textAnchor?: TextAnchorType | { (): TextAnchorType };
+  title?: string;
+  transform?: string | {} | { (): string | {} };
   verticalAnchor?: VerticalAnchorType | { (): VerticalAnchorType };
-  transform?: string | {} | { (): string | {} };
   x?: number;
@@ -230,2 +238,3 @@ y?: number;
   containerId?: number | string;
+  containerRef?: React.Ref<HTMLElement>;
   desc?: string;
@@ -232,0 +241,0 @@ events?: React.DOMAttributes<any>;

lib/victory-label/victory-label.js

@@ -20,2 +20,4 @@ "use strict";
 
+var _rect = _interopRequireDefault(require("../victory-primitives/rect"));
+
 var _propTypes2 = _interopRequireDefault(require("../victory-util/prop-types"));
@@ -31,2 +33,4 @@
 
+var _textsize = _interopRequireDefault(require("../victory-util/textsize"));
+
 var _tspan = _interopRequireDefault(require("../victory-primitives/tspan"));
@@ -42,2 +46,10 @@
 
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
+
+function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
+
 var defaultStyles = {
@@ -102,2 +114,12 @@ fill: "#252525",
 
+var getLineHeight = function (props) {
+  var lineHeight = getHeight(props, "lineHeight");
+
+  if (Array.isArray(lineHeight)) {
+    return (0, _isEmpty2.default)(lineHeight) ? [1] : lineHeight;
+  } else {
+    return [lineHeight];
+  }
+};
+
 var getContent = function (text, props) {
@@ -123,16 +145,8 @@ if (text === undefined || text === null) {
 
-var checkLineHeight = function (lineHeight, val, fallbackVal) {
-  if (Array.isArray(lineHeight)) {
-    return (0, _isEmpty2.default)(lineHeight) ? fallbackVal : val;
-  }
-
-  return lineHeight;
-};
-
 var getDy = function (props, lineHeight) {
   var style = Array.isArray(props.style) ? props.style[0] : props.style;
-  lineHeight = checkLineHeight(lineHeight, lineHeight[0], 1);
+  lineHeight = lineHeight[0];
   var fontSize = style.fontSize;
   var dy = props.dy ? _helpers.default.evaluateProp(props.dy, props) : 0;
-  var length = props.text.length;
+  var length = props.inline ? 1 : props.text.length;
   var capHeight = getHeight(props, "capHeight");
@@ -172,48 +186,169 @@ var verticalAnchor = style.verticalAnchor || props.verticalAnchor;
 
-var renderElements = function (props) {
-  var inline = props.inline,
-      className = props.className,
-      title = props.title,
-      events = props.events,
-      direction = props.direction,
-      text = props.text,
-      style = props.style;
-  var lineHeight = getHeight(props, "lineHeight");
-  var textAnchor = props.textAnchor ? _helpers.default.evaluateProp(props.textAnchor, props) : "start";
-  var dx = props.dx ? _helpers.default.evaluateProp(props.dx, props) : 0;
-  var dy = getDy(props, lineHeight);
-  var transform = getTransform(props);
-  var x = props.x !== undefined ? props.x : getPosition(props, "x");
-  var y = props.y !== undefined ? props.y : getPosition(props, "y");
-  var textChildren = text.map(function (line, i) {
-    var currentStyle = style[i] || style[0];
-    var lastStyle = style[i - 1] || style[0];
-    var fontSize = (currentStyle.fontSize + lastStyle.fontSize) / 2;
-    var currentLineHeight = checkLineHeight(lineHeight, (lineHeight[i] + (lineHeight[i - 1] || lineHeight[0])) / 2, 1);
-    var tspanProps = {
-      key: "".concat(props.id, "-key-").concat(i),
-      x: !inline ? props.x : undefined,
-      dx: dx,
-      dy: i && !inline ? currentLineHeight * fontSize : undefined,
-      textAnchor: currentStyle.textAnchor || textAnchor,
-      style: currentStyle,
-      children: line
-    };
-    return _react.default.cloneElement(props.tspanComponent, tspanProps);
+var getXCoordinate = function (calculatedProps, labelSizeWidth) {
+  var direction = calculatedProps.direction,
+      textAnchor = calculatedProps.textAnchor,
+      x = calculatedProps.x;
+
+  if (direction === "rtl") {
+    return x - labelSizeWidth;
+  }
+
+  switch (textAnchor) {
+    case "start":
+      return x;
+
+    case "middle":
+      return Math.round(x - labelSizeWidth / 2);
+
+    case "end":
+      return Math.round(x - labelSizeWidth);
+
+    default:
+      return x;
+  }
+};
+
+var getYCoordinate = function (calculatedProps, props, textHeight) {
+  var verticalAnchor = calculatedProps.verticalAnchor,
+      y = calculatedProps.y;
+  var dy = props.dy,
+      inline = props.inline;
+  var offset = y + (dy || 0);
+
+  switch (verticalAnchor) {
+    case "start":
+      return Math.floor(offset);
+
+    case "middle":
+      return Math.floor(offset - textHeight / 2);
+
+    case "end":
+      return inline ? Math.floor(offset) : Math.ceil(offset - textHeight);
+
+    default:
+      return inline ? Math.floor(offset) : Math.floor(offset - textHeight / 2);
+  }
+};
+
+var getBackgroundPadding = function (props) {
+  if (props.backgroundPadding && Array.isArray(props.backgroundPadding)) {
+    return props.backgroundPadding.map(function (backgroundPadding) {
+      return _helpers.default.getPadding({
+        backgroundPadding: backgroundPadding
+      }, "backgroundPadding");
+    });
+  } else {
+    return _helpers.default.getPadding(props, "backgroundPadding");
+  }
+};
+
+var getBackgroundPaddingProp = function (i, backgroundPadding) {
+  if (Array.isArray(backgroundPadding)) {
+    return backgroundPadding[i] || backgroundPadding[0];
+  } else {
+    return backgroundPadding;
+  }
+};
+
+var getFullBackground = function (props, calculatedProps, tspanValues) {
+  var backgroundComponent = props.backgroundComponent,
+      backgroundStyle = props.backgroundStyle,
+      inline = props.inline;
+  var dx = calculatedProps.dx,
+      backgroundPadding = calculatedProps.backgroundPadding,
+      transform = calculatedProps.transform;
+  var textSizes = tspanValues.map(function (tspan) {
+    return _textsize.default.approximateTextSize(tspan.text, tspan.style);
   });
-  return _react.default.cloneElement(props.textComponent, _objectSpread({}, events, {
-    direction: direction,
-    dx: dx,
-    dy: dy,
-    x: x,
-    y: y,
+  var height = inline ? Math.max.apply(Math, _toConsumableArray(textSizes.map(function (size) {
+    return size.height;
+  }))) : textSizes.reduce(function (memo, size, i) {
+    return memo + size.height * tspanValues[i].lineHeight;
+  }, 0);
+  var width = inline ? textSizes.reduce(function (memo, size) {
+    return memo + size.width;
+  }, 0) + (dx || 0) : Math.max.apply(Math, _toConsumableArray(textSizes.map(function (size) {
+    return size.width;
+  }))) + (dx || 0);
+  var xCoordinate = getXCoordinate(calculatedProps, width);
+  var yCoordinate = getYCoordinate(calculatedProps, props, height);
+  var backgroundProps = {
+    key: "background",
+    height: height + backgroundPadding.top + backgroundPadding.bottom,
+    style: backgroundStyle,
     transform: transform,
-    className: className,
-    title: title,
-    desc: _helpers.default.evaluateProp(props.desc, props),
-    tabIndex: _helpers.default.evaluateProp(props.tabIndex, props),
-    id: props.id
-  }), textChildren);
+    width: width + backgroundPadding.left + backgroundPadding.right,
+    x: xCoordinate,
+    y: yCoordinate
+  };
+  return _react.default.cloneElement(backgroundComponent, (0, _defaults2.default)({}, backgroundComponent.props, backgroundProps));
 };
 
+var getChildBackgrounds = function (props, calculatedProps, tspanValues) {
+  var backgroundStyle = props.backgroundStyle,
+      backgroundComponent = props.backgroundComponent,
+      inline = props.inline,
+      y = props.y;
+  var dy = calculatedProps.dy,
+      backgroundPadding = calculatedProps.backgroundPadding,
+      transform = calculatedProps.transform;
+  var textElements = tspanValues.map(function (current, i) {
+    var previous = tspanValues[i - 1] || tspanValues[0];
+
+    var labelSize = _textsize.default.approximateTextSize(current.text, current.style);
+
+    var totalLineHeight = current.fontSize * current.lineHeight;
+    var textHeight = Math.ceil(totalLineHeight);
+    var prevPaddingProp = getBackgroundPaddingProp(i - 1, backgroundPadding);
+    var childDy = i && !inline ? previous.fontSize * previous.lineHeight + prevPaddingProp.top + prevPaddingProp.bottom : dy - totalLineHeight * 0.5 - (current.fontSize - current.capHeight);
+    return {
+      textHeight: textHeight,
+      labelSize: labelSize,
+      y: y,
+      fontSize: current.fontSize,
+      dy: childDy
+    };
+  });
+  return textElements.map(function (textElement, i) {
+    var xCoordinate = getXCoordinate(calculatedProps, textElement.labelSize.width);
+    var yCoordinate = textElements.slice(0, i + 1).reduce(function (prev, curr) {
+      return prev + curr.dy;
+    }, y);
+    var padding = getBackgroundPaddingProp(i, backgroundPadding);
+    var backgroundProps = {
+      key: "tspan-background-".concat(i),
+      height: textElement.textHeight + padding.top + padding.bottom,
+      style: backgroundStyle[i] || backgroundStyle[0],
+      width: textElement.labelSize.width + padding.left + padding.right,
+      transform: transform,
+      x: xCoordinate,
+      y: yCoordinate
+    };
+    return _react.default.cloneElement(backgroundComponent, (0, _defaults2.default)({}, backgroundComponent.props, backgroundProps));
+  });
+};
+
+var getBackgroundElement = function (props, calculatedProps, tspanValues) {
+  return Array.isArray(props.backgroundStyle) ? getChildBackgrounds(props, calculatedProps, tspanValues) : getFullBackground(props, calculatedProps, tspanValues);
+};
+
+var calculateSpanDy = function (current, previous) {
+  return -0.5 * previous.fontSize - 0.5 * (previous.fontSize * previous.lineHeight) + previous.fontSize * previous.lineHeight + 0.5 * current.fontSize + 0.5 * current.fontSize * current.lineHeight - (current.fontSize - current.capHeight) * 0.5 + (previous.fontSize - previous.capHeight) * 0.5;
+};
+
+var getTSpanDy = function (tspanValues, props, i) {
+  var inline = props.inline,
+      backgroundStyle = props.backgroundStyle;
+  var current = tspanValues[i];
+  var previous = tspanValues[i - 1] || tspanValues[0];
+
+  if (i && !inline) {
+    return backgroundStyle && Array.isArray(backgroundStyle) && backgroundStyle.length > 1 ? calculateSpanDy(current, previous) + current.backgroundPadding.top + previous.backgroundPadding.bottom : calculateSpanDy(current, previous);
+  } else if (inline) {
+    return i === 0 ? current.backgroundPadding.top : undefined;
+  } else {
+    return current.backgroundPadding.top;
+  }
+};
+
 var evaluateProps = function (props) {
@@ -239,2 +374,72 @@ /* Potential evaluated props are
 
+var getCalculatedProps = function (props) {
+  var lineHeight = getLineHeight(props);
+  var direction = props.direction ? _helpers.default.evaluateProp(props.direction, props) : "inherit";
+  var textAnchor = props.textAnchor ? _helpers.default.evaluateProp(props.textAnchor, props) : "start";
+  var verticalAnchor = props.verticalAnchor ? _helpers.default.evaluateProp(props.verticalAnchor, props) : "middle";
+  var dx = props.dx ? _helpers.default.evaluateProp(props.dx, props) : 0;
+  var dy = getDy(props, lineHeight);
+  var transform = getTransform(props);
+  var x = props.x !== undefined ? props.x : getPosition(props, "x");
+  var y = props.y !== undefined ? props.y : getPosition(props, "y");
+  var backgroundPadding = getBackgroundPadding(props);
+  return {
+    lineHeight: lineHeight,
+    direction: direction,
+    textAnchor: textAnchor,
+    verticalAnchor: verticalAnchor,
+    dx: dx,
+    dy: dy,
+    backgroundPadding: backgroundPadding,
+    transform: transform,
+    x: x,
+    y: y
+  };
+};
+
+var renderLabel = function (props, calculatedProps, tspanValues) {
+  var inline = props.inline,
+      className = props.className,
+      title = props.title,
+      events = props.events,
+      direction = props.direction,
+      text = props.text;
+  var textAnchor = calculatedProps.textAnchor,
+      dx = calculatedProps.dx,
+      dy = calculatedProps.dy,
+      transform = calculatedProps.transform,
+      x = calculatedProps.x,
+      y = calculatedProps.y;
+
+  var textProps = _objectSpread({
+    key: "text"
+  }, events, {
+    direction: direction,
+    dx: dx,
+    x: x,
+    y: y + dy,
+    transform: transform,
+    className: className,
+    title: title,
+    desc: _helpers.default.evaluateProp(props.desc, props),
+    tabIndex: _helpers.default.evaluateProp(props.tabIndex, props),
+    id: props.id
+  });
+
+  var tspans = text.map(function (line, i) {
+    var currentStyle = tspanValues[i].style;
+    var tspanProps = {
+      key: "".concat(props.id, "-key-").concat(i),
+      x: !inline ? props.x : undefined,
+      dx: dx + tspanValues[i].backgroundPadding.left,
+      dy: getTSpanDy(tspanValues, props, i),
+      textAnchor: currentStyle.textAnchor || textAnchor,
+      style: currentStyle,
+      children: line
+    };
+    return _react.default.cloneElement(props.tspanComponent, tspanProps);
+  });
+  return _react.default.cloneElement(props.textComponent, textProps, tspans);
+};
+
 var VictoryLabel = function (props) {
@@ -247,3 +452,35 @@ props = evaluateProps(props);
 
-  var label = renderElements(props);
+  var calculatedProps = getCalculatedProps(props);
+  var _props = props,
+      text = _props.text,
+      style = _props.style,
+      capHeight = _props.capHeight;
+  var backgroundPadding = calculatedProps.backgroundPadding,
+      lineHeight = calculatedProps.lineHeight;
+  var tspanValues = text.map(function (line, i) {
+    var currentStyle = style[i] || style[0];
+
+    var capHeightPx = _textsize.default.convertLengthToPixels("".concat(capHeight, "em"), currentStyle.fontSize);
+
+    var currentLineHeight = lineHeight[i] || lineHeight[0];
+    return {
+      style: currentStyle,
+      fontSize: currentStyle.fontSize || defaultStyles.fontSize,
+      capHeight: capHeightPx,
+      text: line,
+      lineHeight: currentLineHeight,
+      backgroundPadding: getBackgroundPaddingProp(i, backgroundPadding)
+    };
+  });
+  var label = renderLabel(props, calculatedProps, tspanValues);
+
+  if (props.backgroundStyle) {
+    var backgroundElement = getBackgroundElement(props, calculatedProps, tspanValues);
+    var children = [backgroundElement, label];
+
+    var backgroundWithLabel = _react.default.cloneElement(props.groupComponent, {}, children);
+
+    return props.renderInPortal ? _react.default.createElement(_victoryPortal.default, null, backgroundWithLabel) : backgroundWithLabel;
+  }
+
   return props.renderInPortal ? _react.default.createElement(_victoryPortal.default, null, label) : label;
@@ -258,2 +495,5 @@ };
   angle: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  backgroundComponent: _propTypes.default.element,
+  backgroundPadding: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.object, _propTypes.default.array]),
+  backgroundStyle: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.array]),
   capHeight: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes2.default.nonNegative, _propTypes.default.func]),
@@ -268,2 +508,3 @@ className: _propTypes.default.string,
   events: _propTypes.default.object,
+  groupComponent: _propTypes.default.element,
   id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string, _propTypes.default.func]),
@@ -297,2 +538,4 @@ index: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
 VictoryLabel.defaultProps = {
+  backgroundComponent: _react.default.createElement(_rect.default, null),
+  groupComponent: _react.default.createElement("g", null),
   direction: "inherit",
@@ -299,0 +542,0 @@ textComponent: _react.default.createElement(_text.default, null),

lib/victory-util/helpers.js

@@ -123,3 +123,4 @@ "use strict";
 function getPadding(props) {
-  var padding = props.padding;
+  var name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "padding";
+  var padding = props[name];
   var paddingVal = typeof padding === "number" ? padding : 0;
@@ -126,0 +127,0 @@ var paddingObj = typeof padding === "object" ? padding : {};

package.json

 {
   "name": "victory-core",
-  "version": "34.3.8",
+  "version": "34.3.12",
   "description": "Victory Core",
@@ -5,0 +5,0 @@ "keywords": [

src/index.d.ts

@@ -196,10 +196,17 @@ import * as React from "react";
   angle?: string | number;
+  backgroundComponent?: React.ReactElement;
+  backgroundStyle?: React.CSSProperties | React.CSSProperties[];
+  backgroundPadding?: PaddingProps | PaddingProps[];
   capHeight?: StringOrNumberOrCallback;
+  children?: StringOrNumberOrCallback;
   className?: string;
   datum?: {};
   data?: any[];
+  desc?: string;
+  direction?: string;
   events?: React.DOMAttributes<any>;
-  children?: StringOrNumberOrCallback;
+  inline?: boolean;
+  groupComponent?: React.ReactElement;
   labelPlacement?: LabelOrientationType;
-  lineHeight?: StringOrNumberOrCallback;
+  lineHeight?: StringOrNumberOrCallback | (string | number)[];
   origin?: OriginType;
@@ -211,4 +218,5 @@ polar?: boolean;
   textAnchor?: TextAnchorType | { (): TextAnchorType };
+  title?: string;
+  transform?: string | {} | { (): string | {} };
   verticalAnchor?: VerticalAnchorType | { (): VerticalAnchorType };
-  transform?: string | {} | { (): string | {} };
   x?: number;
@@ -230,2 +238,3 @@ y?: number;
   containerId?: number | string;
+  containerRef?: React.Ref<HTMLElement>;
   desc?: string;
@@ -232,0 +241,0 @@ events?: React.DOMAttributes<any>;

src/victory-label/victory-label.js

@@ -0,4 +1,6 @@
+/*eslint no-magic-numbers: ["error", { "ignore": [-0.5, 0.5, 0, 1, 2] }]*/
 import React from "react";
 import PropTypes from "prop-types";
 import VictoryPortal from "../victory-portal/victory-portal";
+import Rect from "../victory-primitives/rect";
 import CustomPropTypes from "../victory-util/prop-types";
@@ -9,2 +11,3 @@ import Helpers from "../victory-util/helpers";
 import Log from "../victory-util/log";
+import TextSize from "../victory-util/textsize";
 import TSpan from "../victory-primitives/tspan";
@@ -63,2 +66,11 @@ import Text from "../victory-primitives/text";
 
+const getLineHeight = (props) => {
+  const lineHeight = getHeight(props, "lineHeight");
+  if (Array.isArray(lineHeight)) {
+    return isEmpty(lineHeight) ? [1] : lineHeight;
+  } else {
+    return [lineHeight];
+  }
+};
+
 const getContent = (text, props) => {
@@ -78,15 +90,8 @@ if (text === undefined || text === null) {
 
-const checkLineHeight = (lineHeight, val, fallbackVal) => {
-  if (Array.isArray(lineHeight)) {
-    return isEmpty(lineHeight) ? fallbackVal : val;
-  }
-  return lineHeight;
-};
-
 const getDy = (props, lineHeight) => {
   const style = Array.isArray(props.style) ? props.style[0] : props.style;
-  lineHeight = checkLineHeight(lineHeight, lineHeight[0], 1);
+  lineHeight = lineHeight[0];
   const fontSize = style.fontSize;
   const dy = props.dy ? Helpers.evaluateProp(props.dy, props) : 0;
-  const length = props.text.length;
+  const length = props.inline ? 1 : props.text.length;
   const capHeight = getHeight(props, "capHeight");
@@ -116,52 +121,175 @@ const verticalAnchor = style.verticalAnchor || props.verticalAnchor;
 
-const renderElements = (props) => {
-  const { inline, className, title, events, direction, text, style } = props;
-  const lineHeight = getHeight(props, "lineHeight");
-  const textAnchor = props.textAnchor ? Helpers.evaluateProp(props.textAnchor, props) : "start";
-  const dx = props.dx ? Helpers.evaluateProp(props.dx, props) : 0;
-  const dy = getDy(props, lineHeight);
-  const transform = getTransform(props);
-  const x = props.x !== undefined ? props.x : getPosition(props, "x");
-  const y = props.y !== undefined ? props.y : getPosition(props, "y");
+const getXCoordinate = (calculatedProps, labelSizeWidth) => {
+  const { direction, textAnchor, x } = calculatedProps;
 
-  const textChildren = text.map((line, i) => {
-    const currentStyle = style[i] || style[0];
-    const lastStyle = style[i - 1] || style[0];
-    const fontSize = (currentStyle.fontSize + lastStyle.fontSize) / 2;
-    const currentLineHeight = checkLineHeight(
-      lineHeight,
-      (lineHeight[i] + (lineHeight[i - 1] || lineHeight[0])) / 2,
-      1
+  if (direction === "rtl") {
+    return x - labelSizeWidth;
+  }
+
+  switch (textAnchor) {
+    case "start":
+      return x;
+    case "middle":
+      return Math.round(x - labelSizeWidth / 2);
+    case "end":
+      return Math.round(x - labelSizeWidth);
+    default:
+      return x;
+  }
+};
+
+const getYCoordinate = (calculatedProps, props, textHeight) => {
+  const { verticalAnchor, y } = calculatedProps;
+  const { dy, inline } = props;
+  const offset = y + (dy || 0);
+
+  switch (verticalAnchor) {
+    case "start":
+      return Math.floor(offset);
+    case "middle":
+      return Math.floor(offset - textHeight / 2);
+    case "end":
+      return inline ? Math.floor(offset) : Math.ceil(offset - textHeight);
+    default:
+      return inline ? Math.floor(offset) : Math.floor(offset - textHeight / 2);
+  }
+};
+
+const getBackgroundPadding = (props) => {
+  if (props.backgroundPadding && Array.isArray(props.backgroundPadding)) {
+    return props.backgroundPadding.map((backgroundPadding) =>
+      Helpers.getPadding({ backgroundPadding }, "backgroundPadding")
     );
-    const tspanProps = {
-      key: `${props.id}-key-${i}`,
-      x: !inline ? props.x : undefined,
-      dx,
-      dy: i && !inline ? currentLineHeight * fontSize : undefined,
-      textAnchor: currentStyle.textAnchor || textAnchor,
-      style: currentStyle,
-      children: line
-    };
-    return React.cloneElement(props.tspanComponent, tspanProps);
+  } else {
+    return Helpers.getPadding(props, "backgroundPadding");
+  }
+};
+
+const getBackgroundPaddingProp = (i, backgroundPadding) => {
+  if (Array.isArray(backgroundPadding)) {
+    return backgroundPadding[i] || backgroundPadding[0];
+  } else {
+    return backgroundPadding;
+  }
+};
+
+const getFullBackground = (props, calculatedProps, tspanValues) => {
+  const { backgroundComponent, backgroundStyle, inline } = props;
+  const { dx, backgroundPadding, transform } = calculatedProps;
+  const textSizes = tspanValues.map((tspan) => {
+    return TextSize.approximateTextSize(tspan.text, tspan.style);
   });
+
+  const height = inline
+    ? Math.max(...textSizes.map((size) => size.height))
+    : textSizes.reduce((memo, size, i) => memo + size.height * tspanValues[i].lineHeight, 0);
+
+  const width = inline
+    ? textSizes.reduce((memo, size) => memo + size.width, 0) + (dx || 0)
+    : Math.max(...textSizes.map((size) => size.width)) + (dx || 0);
+
+  const xCoordinate = getXCoordinate(calculatedProps, width);
+  const yCoordinate = getYCoordinate(calculatedProps, props, height);
+
+  const backgroundProps = {
+    key: "background",
+    height: height + backgroundPadding.top + backgroundPadding.bottom,
+    style: backgroundStyle,
+    transform,
+    width: width + backgroundPadding.left + backgroundPadding.right,
+    x: xCoordinate,
+    y: yCoordinate
+  };
+
   return React.cloneElement(
-    props.textComponent,
-    {
-      ...events,
-      direction,
-      dx,
-      dy,
-      x,
+    backgroundComponent,
+    defaults({}, backgroundComponent.props, backgroundProps)
+  );
+};
+
+const getChildBackgrounds = (props, calculatedProps, tspanValues) => {
+  const { backgroundStyle, backgroundComponent, inline, y } = props;
+  const { dy, backgroundPadding, transform } = calculatedProps;
+
+  const textElements = tspanValues.map((current, i) => {
+    const previous = tspanValues[i - 1] || tspanValues[0];
+    const labelSize = TextSize.approximateTextSize(current.text, current.style);
+    const totalLineHeight = current.fontSize * current.lineHeight;
+    const textHeight = Math.ceil(totalLineHeight);
+    const prevPaddingProp = getBackgroundPaddingProp(i - 1, backgroundPadding);
+
+    const childDy =
+      i && !inline
+        ? previous.fontSize * previous.lineHeight + prevPaddingProp.top + prevPaddingProp.bottom
+        : dy - totalLineHeight * 0.5 - (current.fontSize - current.capHeight);
+
+    return {
+      textHeight,
+      labelSize,
       y,
+      fontSize: current.fontSize,
+      dy: childDy
+    };
+  });
+
+  return textElements.map((textElement, i) => {
+    const xCoordinate = getXCoordinate(calculatedProps, textElement.labelSize.width);
+    const yCoordinate = textElements.slice(0, i + 1).reduce((prev, curr) => {
+      return prev + curr.dy;
+    }, y);
+    const padding = getBackgroundPaddingProp(i, backgroundPadding);
+
+    const backgroundProps = {
+      key: `tspan-background-${i}`,
+      height: textElement.textHeight + padding.top + padding.bottom,
+      style: backgroundStyle[i] || backgroundStyle[0],
+      width: textElement.labelSize.width + padding.left + padding.right,
       transform,
-      className,
-      title,
-      desc: Helpers.evaluateProp(props.desc, props),
-      tabIndex: Helpers.evaluateProp(props.tabIndex, props),
-      id: props.id
-    },
-    textChildren
+      x: xCoordinate,
+      y: yCoordinate
+    };
+
+    return React.cloneElement(
+      backgroundComponent,
+      defaults({}, backgroundComponent.props, backgroundProps)
+    );
+  });
+};
+
+const getBackgroundElement = (props, calculatedProps, tspanValues) => {
+  return Array.isArray(props.backgroundStyle)
+    ? getChildBackgrounds(props, calculatedProps, tspanValues)
+    : getFullBackground(props, calculatedProps, tspanValues);
+};
+
+const calculateSpanDy = (current, previous) => {
+  return (
+    -0.5 * previous.fontSize -
+    0.5 * (previous.fontSize * previous.lineHeight) +
+    previous.fontSize * previous.lineHeight +
+    0.5 * current.fontSize +
+    0.5 * current.fontSize * current.lineHeight -
+    (current.fontSize - current.capHeight) * 0.5 +
+    (previous.fontSize - previous.capHeight) * 0.5
   );
 };
 
+const getTSpanDy = (tspanValues, props, i) => {
+  const { inline, backgroundStyle } = props;
+  const current = tspanValues[i];
+  const previous = tspanValues[i - 1] || tspanValues[0];
+
+  if (i && !inline) {
+    return backgroundStyle && Array.isArray(backgroundStyle) && backgroundStyle.length > 1
+      ? calculateSpanDy(current, previous) +
+          current.backgroundPadding.top +
+          previous.backgroundPadding.bottom
+      : calculateSpanDy(current, previous);
+  } else if (inline) {
+    return i === 0 ? current.backgroundPadding.top : undefined;
+  } else {
+    return current.backgroundPadding.top;
+  }
+};
+
 const evaluateProps = (props) => {
@@ -179,8 +307,104 @@ /* Potential evaluated props are
 
+const getCalculatedProps = (props) => {
+  const lineHeight = getLineHeight(props);
+  const direction = props.direction ? Helpers.evaluateProp(props.direction, props) : "inherit";
+  const textAnchor = props.textAnchor ? Helpers.evaluateProp(props.textAnchor, props) : "start";
+  const verticalAnchor = props.verticalAnchor
+    ? Helpers.evaluateProp(props.verticalAnchor, props)
+    : "middle";
+  const dx = props.dx ? Helpers.evaluateProp(props.dx, props) : 0;
+  const dy = getDy(props, lineHeight);
+  const transform = getTransform(props);
+  const x = props.x !== undefined ? props.x : getPosition(props, "x");
+  const y = props.y !== undefined ? props.y : getPosition(props, "y");
+  const backgroundPadding = getBackgroundPadding(props);
+
+  return {
+    lineHeight,
+    direction,
+    textAnchor,
+    verticalAnchor,
+    dx,
+    dy,
+    backgroundPadding,
+    transform,
+    x,
+    y
+  };
+};
+
+const renderLabel = (props, calculatedProps, tspanValues) => {
+  const { inline, className, title, events, direction, text } = props;
+  const { textAnchor, dx, dy, transform, x, y } = calculatedProps;
+
+  const textProps = {
+    key: "text",
+    ...events,
+    direction,
+    dx,
+    x,
+    y: y + dy,
+    transform,
+    className,
+    title,
+    desc: Helpers.evaluateProp(props.desc, props),
+    tabIndex: Helpers.evaluateProp(props.tabIndex, props),
+    id: props.id
+  };
+
+  const tspans = text.map((line, i) => {
+    const currentStyle = tspanValues[i].style;
+    const tspanProps = {
+      key: `${props.id}-key-${i}`,
+      x: !inline ? props.x : undefined,
+      dx: dx + tspanValues[i].backgroundPadding.left,
+      dy: getTSpanDy(tspanValues, props, i),
+      textAnchor: currentStyle.textAnchor || textAnchor,
+      style: currentStyle,
+      children: line
+    };
+    return React.cloneElement(props.tspanComponent, tspanProps);
+  });
+
+  return React.cloneElement(props.textComponent, textProps, tspans);
+};
+
 const VictoryLabel = (props) => {
   props = evaluateProps(props);
+
   if (props.text === null || props.text === undefined) {
     return null;
   }
-  const label = renderElements(props);
+  const calculatedProps = getCalculatedProps(props);
+  const { text, style, capHeight } = props;
+  const { backgroundPadding, lineHeight } = calculatedProps;
+
+  const tspanValues = text.map((line, i) => {
+    const currentStyle = style[i] || style[0];
+    const capHeightPx = TextSize.convertLengthToPixels(`${capHeight}em`, currentStyle.fontSize);
+    const currentLineHeight = lineHeight[i] || lineHeight[0];
+    return {
+      style: currentStyle,
+      fontSize: currentStyle.fontSize || defaultStyles.fontSize,
+      capHeight: capHeightPx,
+      text: line,
+      lineHeight: currentLineHeight,
+      backgroundPadding: getBackgroundPaddingProp(i, backgroundPadding)
+    };
+  });
+
+  const label = renderLabel(props, calculatedProps, tspanValues);
+
+  if (props.backgroundStyle) {
+    const backgroundElement = getBackgroundElement(props, calculatedProps, tspanValues);
+    const children = [backgroundElement, label];
+    const backgroundWithLabel = React.cloneElement(props.groupComponent, {}, children);
+
+    return props.renderInPortal ? (
+      <VictoryPortal>{backgroundWithLabel}</VictoryPortal>
+    ) : (
+      backgroundWithLabel
+    );
+  }
+
   return props.renderInPortal ? <VictoryPortal>{label}</VictoryPortal> : label;
@@ -195,2 +419,5 @@ };
   angle: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  backgroundComponent: PropTypes.element,
+  backgroundPadding: PropTypes.oneOfType([PropTypes.number, PropTypes.object, PropTypes.array]),
+  backgroundStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
   capHeight: PropTypes.oneOfType([PropTypes.string, CustomPropTypes.nonNegative, PropTypes.func]),
@@ -205,2 +432,3 @@ className: PropTypes.string,
   events: PropTypes.object,
+  groupComponent: PropTypes.element,
   id: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.func]),
@@ -246,2 +474,4 @@ index: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 VictoryLabel.defaultProps = {
+  backgroundComponent: <Rect />,
+  groupComponent: <g />,
   direction: "inherit",
@@ -248,0 +478,0 @@ textComponent: <Text />,

src/victory-util/helpers.js

@@ -81,4 +81,4 @@ /* eslint-disable func-style */
 
-function getPadding(props) {
-  const { padding } = props;
+function getPadding(props, name = "padding") {
+  const padding = props[name];
   const paddingVal = typeof padding === "number" ? padding : 0;
@@ -85,0 +85,0 @@ const paddingObj = typeof padding === "object" ? padding : {};

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2085699

increased by0.02%

Lines of code

29135

increased by1.59%

Number of low supply chain risk alerts

177

decreased by-5.85%

Number of medium supply chain risk alerts

355

decreased by-3.79%

No dependency changes