Resize charts on print.

I’m submitting a … (check one with “x”)

[ ] bug report => search github for a similar issue or PR before submitting
[X] feature request
[ ] support request => Please do not submit support request here

Current behavior When printing, the charts does not resize to fit paper.

Expected behavior Charts should be resized to fit paper.

Reproduction of the problem Use: https://swimlane.github.io/ngx-charts/#/ngx-charts/bar-vertical and enable “Fit to container”. Then press print. Depending on the size of the window, the graphs might not fit paper or appear partially behind other elements.

What is the motivation / use case for changing the behavior? Support printing (or export to PDF).

[arajay]

Here’s a solution that might help someone. I simply update the value of the [view] input with an arbitrary value that looks good on the page when I trigger the print dialog and then reset it after the dialog is closed.

<ngx-chart [view]="view"></ngx-chart>

 @HostListener('window:beforeprint')
  beforePrint() {
    this.view = [800, 350];
  }

  @HostListener('window:afterprint')
  afterPrint() {
    this.view = null;
  }

[wobkenh]

I think I might be headed in the right direction in terms of a workaround:

In my app.component, I subscribe to beforeprint and afterprint events. Those events are forwarded to a service.

    @HostListener("window:beforeprint", ["$event"])
    async beforePrint($event: any) {
        await this.printResizeService.beforePrint();
    }

    @HostListener("window:afterprint", ["$event"])
    async afterPrint($event: any) {
        await this.printResizeService.afterPrint();
    }

In the service, I resize the divs i wrapped around the charts (they all have the class “roc-chart-box”):

    async beforePrint() {
        console.log("Preparing printing");

        const elements = document.getElementsByClassName("roc-chart-box");
        for (let i = 0; i < elements.length; i++) {
            const element = elements.item(i);
            if (element) {
                const anyElement = element as any;
                const relation = anyElement.clientWidth / window.innerWidth;
                const newWidth = Math.round(800 * relation);
                console.log("New Width: " + newWidth);
                anyElement.style.width = newWidth + "px";
            }
        }
        this.charts.forEach(chart => {
            chart.update();
            chart.animations = false;
        });
        console.log("Waiting for changes to be displayed");
        const promise = new Promise((resolve) => {
            setTimeout(() => resolve(), 1000);
        });
        await promise;
        console.log("Ready to print");
    }

charts is an array of ngx charts (e.g. BarVerticalComponent) which are currently being displayed. Note how I disable animations and call update on each chart so it can resize quickly. To leave the chart a bit of time to resize, I await a promise which waits for 1 second. Also note that when resizing the chart wrapper div, all elements still have their old size - not the size they will have in the printed version.

After the print, I revert the changes:

    afterPrint() {
        console.log("Reverting print changes");
        const elements = document.getElementsByClassName("roc-chart-box");
        for (let i = 0; i < elements.length; i++) {
            const element = elements.item(i);
            if (element) {
                const anyElement = element as any;
                anyElement.style.width = "";
            }
        }
        this.charts.forEach(chart => {
            chart.update();
            chart.animations = true;
        });
    }

Problem with this solution is that charts are resized according to a fixed page width (800px in this case). This is the value that yielded the best results for me in Chrome. However, if I try other browsers or choose landscape mode when printing, the fixed width solution does not work anymore.

I post this in the hope of someone being able to improve this workaround.