angular-highcharts

angular-highcharts copied to clipboard

This is a known issue in Highcharts ( https://github.com/highcharts/highcharts/issues/2284 ) When you print the chart won't reflows. As others may stumble upon this I'm writing this simple workaround here.

The workaround seems working only on chrome. We are using it on NWJS which is chromium based.

Just add in app.module.ts the following:

if(window.matchMedia) {
  // chrome & safari (ff supports it but doesn't implement it the way we need)
  var mediaQueryList = window.matchMedia("print");

  mediaQueryList.addListener((mql) => {
      if(mql.matches) {
        // console.log('for printing', Highcharts.charts)
        Highcharts.charts.forEach(chart => {
          chart.reflow();
        });
      } else {
        // console.log('after printing')
      }
  });
}

I hope this is useful for someone preventing hours of googling, reading and trying around... :)

Thanks!. Probably something that i have to debug and fix, but 2 of the items on the chart list are undefined [undefined, undefined, a, a] So i added a validation to the forEach

      ......
      Highcharts.charts.forEach((chart) => {
+       if (!chart?.axes) {
+         return;
+       }
        chart.reflow();
      });
      ....