highchartslinegraphreact-highcharts

Highcharts image export with HTML labels not working


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


Solution

  • 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