Resize chart.js canvas for printing

Question

I'm using the @media print { to customize my print view. The problem with my charts is that their printing size depends on the size of the browser window. So when my browser is big, the canvas will be too big for the page (I'm using responsive charts)

I have tried to redefine the size of the canvas inside @media print { without success.

What are the solutions to get a consistant chart size when I print (without affecting my browser view)?

Answer 1

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;
    }
}

Answer 2

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.