Printing Charts in Internet Explorer Rendered By Angular-nvD3

Question

I am using Bootstrap v3.2.0 for laying out 3 graphs created using Angular-nvD3. I am trying to render the page for printing. I have some modified CSS in the @media print rule. Everything renders properly for printing in Chrome, but the charts do not resize for printing in IE 11. I have tried to trigger a window resize event in JavaScript, it executes but doesn't make any difference.

My div looks like this:

<div class="container">
    <div class="row">
        <div class="col-md-3 col-sm-3 col-xs-3">
            <div ng-controller="BusinessPieChartController">
                <h4>Business Allotment</h4>
                <nvd3 options="options" data="data"></nvd3>
            </div>
            <div ng-controller="LocationTypePieChartController">
                <h4>Location Types</h4>
                <nvd3 options="options" data="data"></nvd3>
            </div>
        </div>
        <div class="col-md-9 col-sm-9 col-xs-9">
            <h4>Growth Over Time</h4>
            <div ng-controller="HistoryLineAreaGraphController">
                <nvd3 options="options" data="data"></nvd3>
            </div>
        </div>
    </div>
</div>

Here is the JavaScript code I tried to no prevail.

var printTriggered = false;

var beforePrint = function () {
    if (printTriggered) {
        return
    }

    printTriggered = true;

    setTimeout(function () {
        printTriggered = false;    
    }, 2000)

    var event
    if (typeof Event === 'function') {
        event = new Event('resize')
    } else {
        event = document.createEvent('Event')
        event.initEvent('resize', true, true)
    }
    window.dispatchEvent(event)
};

if (window.matchMedia) {
    var mediaQueryList = window.matchMedia('print');
    mediaQueryList.addListener(function (mql) {
        if (mql.matches) {
            beforePrint();
        } 
    });
}

window.onbeforeprint = beforePrint;

Here is how my graphs look from print preview in IE 11.

score 0 · Answer 1 · answered Jul 12 '18 at 09:00

I shared this exact problem, although with just one graph. Ended up using duplicate elements for the graph.

First, one graph is rendered with width to match the paper size, and, once that's done, it's hidden, and another graph is shown instead:

<div class="graph-for-print"
     ng-class="{rendered: vm.graphForPrintRendered}">
  <nvd3 options="vm.graphOptions"
        data="vm.graphData"></nvd3>
</div>
<div class="hidden-print"
     ng-if="vm.graphForPrintRendered">
  <nvd3 options="vm.graphOptions"
        data="vm.graphData"></nvd3>
</div>

and the css

.graph-for-print {
  max-width: 680px;
}
@media screen {
  .graph-for-print.rendered {
    overflow: hidden;
    height: 0;
  }
}

vm.graphForPrintRendered is true after a $timeout to ensure all digest cycles are done and the browser has had time to draw the chart.

Not pretty, but works.

Printing Charts in Internet Explorer Rendered By Angular-nvD3

1 Answers1

Linked