Modify legend symbol of highchart on export not working

Question

I have a line chart and I customized the legend symbol. In chart, the customization by using useHTML and style of the div as the legend symbol is working but I am struggled on exporting customization.

I tried something like this :

exporting:{
    allowHTML : true,
    sourceWidth:1024,
    chartOptions: {
        title: {
            style: {
                fontSize: '14px'
            }
        },
        legend : {
            symbolPadding: 0,
            symbolWidth: 0,
            symbolHeight : 0,
            symbolRadius: 0,
            useHTML : true,
            labelFormatter : function () {
                return '<div>' +
                        '<div class="legend-symbol-bar" style="background-color: ' + this.color +';"> </div>' +
                        "<span> " + this.name + " </span>" +
                        '</div>'
            }
        }
    }
}

But the legend of exporting is kinda not effective.

Here is the js fiddle .

Answer 1

It seems that Highcharts exporting omits the styles defined in CSS file. They work if you assign them via JS though ( load event):

    chartOptions: {
      chart: {
        events: {
          load: function() {
            this.legend.update({
              symbolWidth: 0,
              labelFormatter: function() {
                this.legendSymbol.css({
                  display: 'none'
                });
                return '<div>' +
                  '<div style="width: 18px; height: 12px; display: inline-block; background-color: ' + this.color + ';"> </div>' +
                  "<span> " + this.name + " </span>" +
                  '</div>'
              }
            });
          }
        }
      },
    (...)

Legend symbols can be hidden via JS code too ( css function).

Live demo: http://jsfiddle.net/kkulig/efhyabzs/

---

API references:

• https://api.highcharts.com/class-reference/Highcharts.SVGElement#css
• https://api.highcharts.com/highcharts/chart.events.load