diff --git a/packages/treemap/src/TreeMapHtmlNode.tsx b/packages/treemap/src/TreeMapHtmlNode.tsx
index 184b862e75..418d31b30e 100644
--- a/packages/treemap/src/TreeMapHtmlNode.tsx
+++ b/packages/treemap/src/TreeMapHtmlNode.tsx
@@ -2,7 +2,7 @@ import { memo } from 'react'
import { animated } from '@react-spring/web'
import { useTheme } from '@nivo/core'
import { NodeProps } from './types'
-import { htmlNodeTransform, htmlLabelTransform } from './transitions'
+import { htmlNodeTransform, htmlLabelTransform, htmlParentLabelTransform } from './transitions'
const NonMemoizedTreeMapHtmlNode = ({
node,
@@ -94,7 +94,7 @@ const NonMemoizedTreeMapHtmlNode = ({
height: 10,
color: node.parentLabelTextColor,
transformOrigin: 'top left',
- transform: htmlLabelTransform(
+ transform: htmlParentLabelTransform(
animatedProps.parentLabelX,
animatedProps.parentLabelY,
animatedProps.parentLabelRotation
diff --git a/packages/treemap/src/transitions.ts b/packages/treemap/src/transitions.ts
index 5d5077b690..cfa5449620 100644
--- a/packages/treemap/src/transitions.ts
+++ b/packages/treemap/src/transitions.ts
@@ -18,12 +18,15 @@ export const htmlLabelTransform = (
rotation: SpringValue
) => to([x, y, rotation], (x, y, rotation) => `translate(${x}px,${y}px) rotate(${rotation}deg)`)
-// export const htmlParentLabelTransform = () => to()
-
-/*
-parentLabelHtmlTransform: `translate(${
- node.parentLabelX - (node.parentLabelRotation === 0 ? 0 : 5)
-}px,${node.parentLabelY - (node.parentLabelRotation === 0 ? 5 : 0)}px) rotate(${
- node.parentLabelRotation
-}deg)`,
-*/
+export const htmlParentLabelTransform = (
+ x: SpringValue,
+ y: SpringValue,
+ rotation: SpringValue
+) =>
+ to(
+ [x, y, rotation],
+ (x, y, rotation) =>
+ `translate(${x - (rotation === 0 ? 0 : 5)}px,${
+ y - (rotation === 0 ? 5 : 0)
+ }px) rotate(${rotation}deg)`
+ )