Bug reportSep 6, 2026· 0:27· 27 views
Highcharts v13: useHTML:true + rotation on xAxis labels produces rotate(… NaN NaN) transforms
0:27 total
Comments · 0
Be the first to comment.
Bug report— by SceneRecap AI
mediumSVG Rendering / HTML Label Alignment
os: macOSbrowser: Chromium 151.0.7922.34viewport: 1280x720
Repro steps
- 1.Open page loading Highcharts v13 (13.0.2)
- 2.Observe control chart configured with xAxis.labels: { useHTML: false, rotation: -45 } rendering successfully
- 3.Render chart configured with xAxis.labels: { useHTML: true, rotation: -45 }
Expected
Rotated HTML-based xAxis labels calculate valid center coordinates and apply valid SVG transform strings to <foreignObject> elements without errors.
Actual
Highcharts outputs NaN for label transform coordinates, resulting in invalid SVG attributes like 'translate(0,0) rotate(-45 NaN NaN)' and browser console SVG parse errors.
Evidence
visualControl chart renders xAxis labels at -45 degree rotation without layout issues or NaN values (useHTML: false)
consoleConsole error logged: "Error: <foreignObject> attribute transform: Expected ')', \"…0,0) rotate(-45 NaN NaN)\"."
visualDiagnostic overlay shows 24 NaN setAttribute calls during initial render: 'translate(0,0) rotate(-45 NaN NaN)' on the bug reproduction chart
Issue markdown (copy-paste ready)
### Description
In Highcharts v13 (13.0.2), enabling `useHTML: true` alongside `rotation` (e.g. `-45`) on `xAxis.labels` results in invalid SVG transform attributes where rotation coordinates evaluate to `NaN` (`translate(0,0) rotate(-45 NaN NaN)`), triggering SVG parse errors in the browser console.
### Steps to Reproduce
1. Load Highcharts v13 (13.0.2).
2. Create a chart with `xAxis.labels: { useHTML: true, rotation: -45 }`.
3. Observe the rendered SVG markup and browser console.
### Expected Result
Highcharts should compute valid numeric transform origins for rotated HTML labels, applying valid SVG transform attributes to `<foreignObject>` elements.
### Actual Result
Transform attributes receive `NaN` parameters (`rotate(-45 NaN NaN)`), producing 24 NaN `setAttribute` calls during render and browser console error: `Error: <foreignObject> attribute transform: Expected ')', "…0,0) rotate(-45 NaN NaN)"`.
### Control Comparison
The control chart with `useHTML: false` and `rotation: -45` renders properly with 0 NaN intercepts and 0 console errors.
*Recorded with SceneRecap.*Your recordings could explain themselves too.
Free plan · silent recordings welcome · bug reports included.
Try SceneRecap free →