Highcharts image export with HTML labels not working

Question

JS Fiddle: https://jsfiddle.net/xtds1wLh/6/

This is just an example JS Fiddle Here I have specified: useHTML: true in xAxis labels

and have also specified: allowHTML in exporting Render looks good but when exported the css property does not gets applied and Test 1 and Test 2 appear in single line

    exporting: {
        enabled: true,
        allowHTML: true,
        chartOptions: {
            chart: {
                height: 400,
                width: 1000
            },
            xAxis:{
            allowHTML: true,
            }
        }
    }

Export should be same as render

Answer 1

Please note that allowHTML is an experimental setting and not all of its applications may function properly.

However, the problem is related to the fact that the export server doesn't have access to your CSS. As a solution, you can add inline styling. For example:

xAxis: {
  categories: [
    '<span style="display: block;"><span style="display: block;">Test 1</span><span>Test 2</span></span>',
    'Feb', ...
  ],
  labels: {
    autoRotation: false,
    useHTML: true
  }
},

---

Live demo: https://jsfiddle.net/BlackLabel/yh9n47m3/

Useful thread: https://www.highcharts.com/forum/viewtopic.php?t=43159

Docs: https://api.highcharts.com/highcharts/exporting.allowHTML