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
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