#25277·highcharts

Rotated useHTML axis labels produce rotate(... NaN NaN) transforms in v13

Author: yuvalotemCreated Aug 30, 2026Updated Sep 16, 2026
LabelsProduct: HighchartsType: Regression

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

javascript
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]
  }]
});
  1. Open the browser developer console.
  2. Render the chart.
  3. 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:

javascript
.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:

javascript
.text(str, xy?.x ?? 0, xy?.y ?? 0, labelOptions.useHTML)