Highcharts redraw not redrawing data

问题:

I've been playing with Highcharts (v3.0.10) for a week on a webpage and can't get my charts redrawn when printing the page. The thing is that I use a dark background color for my charts, but when printing, I'd like to change it to white. For accomplishing that, I need to redraw() my charts after changing the backgroundColor property. The thing is that when I do that, the background color changes on the printing preview, but data is gone, it doesn't get redrawn for some reason.

Before trying to change background colors, I've been doing some reworking with the container div sizes and call reflow() for the charts to adjust to an A4 page, and it worked perfectly when previewing the print page: Containers were the size I wanted them to be and charts reflowed successfuly to their new size.

Problems begin when I wanted the background to turn white and added the redraw() method on the callback triggered when user tries printing the page. Containers still reflow() correctly and background changed to white, but data is missing on the charts.

I've created a sample fiddle which you can review here. It works on Chrome and Firefox (I mean you can reproduce the problem). For previewing this fiddle I provided, just go and try to print the fiddle page with your browser, so the page printing preview window comes up.

Added some screenshots for Firefox printing page preview and data dissappearing on this link.

Also note the Highcharts version I'm using: 3.0.10. It's not the latest but can't get any higher with the current license I own.

---

Some code and stuff

Print handler and code executed when user tries to print:

/** Chrome **/
        if (window.matchMedia) {
            var mediaQueryList = window.matchMedia('print');
            mediaQueryList.addListener(function (mql) {
                if (mql.matches) {
                    resize();
                } else {
                        unresize();
                }
            });
        }
    // Firefox
  if (window.onbeforeprint !== undefined && window.onafterprint !== undefined) {
            window.onbeforeprint = function() {
                resize();
            }
            window.onafterprint = function() {
                unresize();
            }
        }

  var originalBackground = '#333';
  function resize(){
      // Do some transformations to fit an A4 page that 
      //are not the matter of this question
      // ......
      //......
      // Loop through all containers (only two but anyways...)
      // and apply changes
      $('.graph-container').each(function(i,e){
        let chart = $(e).highcharts();
        chart.options.chart.backgroundColor = '#FFFFFF';
        // Create new chart with background color
        $(e).highcharts(chart.options);
        // Force redraw 
        $(e).highcharts().redraw();
    });
  }      
  function unresize(){
    $('.graph-container').each(function(i,e){
            let chart = $(e).highcharts();
      // Revert background to original color #333
      chart.options.chart.backgroundColor = originalBackground;
      $(e).highcharts(chart.options);
      $(e).highcharts().redraw();
    });
  }