The Chart Is Clipped during Printing

Environment

Product

Progress® Kendo UI® for Angular Charts

Description

When I am printing the Chart using the browser Print option, the generated PDF is clipped and overflows the page.

Cause

The Chart element may overflow the page during printing if the component size is larger than the paper size.

Solution

1. Set the print dimensions of the Chart by using a Media Query and matchMedia method.

css

    @media print {
        kendo-chart {
            width: 200mm;
        }
    }

ts

    private matchPrint: MediaQueryList = window.matchMedia('print');

1. Add listener to the MediaQueryList and before printing, call the resize method of the Chart.

ts

    public ngOnInit(): void {
        this.matchPrint.addEventListener('change', this.resizeChart);
    }

1. Remove the MediaQueryList listener with an ngOnDestroy hook.

ts

    public ngOnDestroy(): void {
        if (this.matchPrint) {
          this.matchPrint.removeEventListener('change', this.resizeChart);
          this.matchPrint = null;
        }
    }

Due to Bug 774398, Firefox does not support the suggested approach.

The following example shows the full implementation of the demonstrated approach.

Change Theme

Theme

Loading ...