The CSS transform property positions SVG groups and applies geometric changes such as translation, rotation, or scaling. In chart components, it moves labels, badges, and grid elements without changing their internal coordinates. section 8.7 section 8.6.3
Use the property this way when building responsive visualizations:
- Set child coordinates to simple values such as x={0} and y={0}, then translate the wrapping group to its chart position. section 8.7
- Apply the transform to a group rather than its text child when Safari compatibility matters. section 8.7
- Pair transform with a CSS transition to animate multiple labels or badges simply and efficiently. section 8.7
Moving a chart label
Wrap the label in a group and translate that group: <g className="label" style={{ transform: `translate(${props.x}px, ${props.y}px)` }}><text x={0} y={0}>{props.label}</text></g>. Then define .label { transition: transform 400ms cubic-bezier(0.33, 1, 0.68, 1); } to animate position changes. section 8.7
import "./Label.css";
<g
className="label"
style={{ transform: `translate(${props.x}px, ${props.y}px)` }}
>
<text
x={0}
y={0}
fill={props.color}
textAnchor={props.textAnchor}
alignmentBaseline="middle"
style={{ fontWeight: "bold" }}
>
{props.label}
</text>
</g>
Inspect the complete React and SVG pattern for translating a label group while keeping the text element at local coordinates. section 8.7
