Printing pages with large charts

When browser prints a page, it resizes and refloats the whole DOM to fit the page. This ensures that all content fits into the print format, say, A4 or Letter.

Chart containers are resized as well, but since browser rendering is an async operation, they do not re-render before the page goes to print.

We can use the following CSS that ensures the chart is resized to fit within its respective containers without any distortions to width/height ratio:

@media print {
  #chartdiv div {
     max-width: 100%;
  }

  #chartdiv canvas {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    overflow: hidden;
  }
}