Rotated useHTML axis labels produce rotate(... NaN NaN) transforms in v13
Expected behaviour
Axis labels configured with useHTML: true and a numeric rotation should render without invalid SVG transforms or browser console errors.
Actual behaviour
Highcharts initially creates HTML axis labels without coordinates. When rotation is applied, the generated <foreignObject> receives an invalid transform:
translate(0,0) rotate(-45 NaN NaN)Chromium logs an error for every affected label:
Error: <foreignObject> attribute transform: Expected ')',
"translate(0,0) rotate(-45 NaN NaN)".The labels may be corrected during a later render, but the initial errors remain. This breaks test suites that fail on browser console errors.
This appears to be a regression from Highcharts 12.6.0 following the move of useHTML content into SVG <foreignObject> elements.
Live demo with steps to reproduce
Highcharts.chart('container', {
xAxis: {
categories: ['First label', 'Second label'],
labels: {
useHTML: true,
rotation: -45,
formatter() {
return `<div style="white-space: nowrap">${this.value}</div>`;
}
}
},
series: [{
data: [1, 2]
}]
});- Open the browser developer console.
- Render the chart.
- Observe the invalid
<foreignObject>transform errors.
Product version
Highcharts Core 13.0.1.
Affected browser(s)
Chromium, including Playwright Chromium.
Additional investigation
Tick.createLabel calls renderer.text with undefined coordinates:
.text(str, xy?.x, xy?.y, labelOptions.useHTML)Before coordinates are assigned, the HTML renderer uses these values as the rotation origin, producing NaN.
Defaulting the initial coordinates fixes the issue locally:
.text(str, xy?.x ?? 0, xy?.y ?? 0, labelOptions.useHTML)Source: highcharts/highcharts