HighCharts Export Hide Scrollbars

Question

How would I go about hiding enabled scrollbars on a HighChart when I use the export the chart via the export library? I have tried to toggle the display of the scrollbars but it seems that when the internal code calls chart.getSVG(), any changes made to the chart outside of the HighCharts library are omitted (e.g., modifying chart elements through code).

Please see a working example here: jsfiddle

HTML

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/offline-exporting.js"></script>

<div id="container"></div>

<button id="toggleScrollbar">
  Toggle Scrollbar
</button>

JavaScript

 $(function() {
  Highcharts.chart('container', {
    exporting: {
      chartOptions: { // specific options for the exported image
        plotOptions: {
          series: {
            dataLabels: {
              enabled: true
            }
          }
        }
      },
      scale: 3,
      fallbackToExportServer: false
    },

    chart: {
      type: 'bar'
    },
    title: {
      text: 'Historic World Population by Region'
    },
    subtitle: {
      text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
    },
    xAxis: {
      categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
      title: {
        text: null
      },
      scrollbar: {
        enabled: true
      }
    },
    yAxis: {
      min: 0,
      title: {
        text: 'Population (millions)',
        align: 'high'
      },
      labels: {
        overflow: 'justify'
      }
    },
    tooltip: {
      valueSuffix: ' millions'
    },
    plotOptions: {
      bar: {
        dataLabels: {
          enabled: true
        }
      }
    },
    legend: {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'top',
      x: -40,
      y: 80,
      floating: true,
      borderWidth: 1,
      backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
      shadow: true
    },
    credits: {
      enabled: false
    },
    series: [{
      name: 'Year 1800',
      data: [107, 31, 635, 203, 2]
    }, {
      name: 'Year 1900',
      data: [133, 156, 947, 408, 6]
    }, {
      name: 'Year 2012',
      data: [1052, 954, 4250, 740, 38]
    }]

  });

  $('#toggleScrollbar').on('click', function() {
    var $scrollbar = $('#container').find('.highcharts-scrollbar');
    $scrollbar.toggle();
  });
});

As you can see, when you export the chart in any format, the scrollbar for the chart is displayed. However, when you toggle the scrollbar using the button below the chart and then export it, the scrollbar is still rendered in the export.

I could not find any info on disabling scrollbars dynamically :(

Note: The scrollbar needs to be enabled for use in my client's environment. This was just a quick example with scrollbar enabled to demonstrate the issue.

Answer 1

You can set additional options for an exported chart in the exporting.chartOptions property - the options will be merged.

exporting: {
  chartOptions: { // specific options for the exported image
    plotOptions: {
      series: {
        dataLabels: {
          enabled: true
        }
      }
    },
    xAxis: {
        scrollbar: {
        enabled: false
      }
    }
  },
  scale: 3,
  fallbackToExportServer: false
},

example: http://jsfiddle.net/gjrqyj2g/13/