Resize chart.js canvas for printing

The problem is the chart does not fit the new print width dimension. Fortunately we can perform a redraw when print is initiated.

The solution is to render your chart to an image using the canvas.toDataURL() method when printing is invoked, then switch it back to the canvas chart after printing. More on toDataURL().

To detect when to invoke your functions webkit provide the method window.matchMedia('print') (which will be true during print or false again afterwards) while other browsers use window.onbeforeprint and window.onafterprint. More on print methods.

All that is then left to do is ensure the image is responsive using CSS, i.e. scales to 100% width.

If your charts are simple, try using just using css

@media print {
    canvas.chart-canvas {
        min-height: 100%;
        max-width: 100%;
        max-height: 100%;
        height: auto!important;
        width: auto!important;
    }
}