Fix the label background position when using dy fns (#2720)

FormidableLabs · Jan 16, 2024 · 8854c16 · 8854c16 · vercel · Jan 16, 2024
1 parent 3073fa0
commit 8854c16
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 1 deletion.
diff --git a/.changeset/moody-mayflies-attack.md b/.changeset/moody-mayflies-attack.md
@@ -0,0 +1,5 @@
+---
+"victory-core": patch
+---
+
+Fix the label background position when using dy fns
diff --git a/packages/victory-core/src/victory-label/victory-label.tsx b/packages/victory-core/src/victory-label/victory-label.tsx
@@ -508,7 +508,7 @@ const getCalculatedProps = <T extends VictoryLabelProps>(props: T) => {
  verticalAnchor,
  dx,
  dy,
- originalDy: props.dy,
+ originalDy: Helpers.evaluateProp(props.dy, props),
  transform,
  x,
  y,

diff --git a/stories/victory-label.stories.js b/stories/victory-label.stories.js
@@ -581,6 +581,38 @@ export const BackgroundStyles = () => {
  />
  }
  />
+ <VictoryScatter
+ {...defaultScatterProps}
+ labelComponent={
+ <VictoryLabel
+ dy={({ datum }) => (datum.y > 0 ? -5 : 8)}
+ verticalAnchor="end"
+ backgroundPadding={{ top: 5, right: 5, bottom: 5, left: 5 }}
+ backgroundStyle={{ fill: "plum", stroke: "#000000" }}
+ text={[
+ "Victory is awesome.",
+ "background styles",
+ "work with dy functions",
+ ]}
+ />
+ }
+ />
+ <VictoryScatter
+ {...defaultScatterProps}
+ labelComponent={
+ <VictoryLabel
+ dx={({ datum }) => (datum.y > 0 ? -5 : 8)}
+ verticalAnchor="end"
+ backgroundPadding={{ top: 5, right: 5, bottom: 5, left: 5 }}
+ backgroundStyle={{ fill: "thistle", stroke: "#000000" }}
+ text={[
+ "Victory is awesome.",
+ "background styles",
+ "work with dx functions",
+ ]}
+ />
+ }
+ />
  </div>
  );
 };