2

I am currently trying to set-up a react-chartjs-2 graph on my React website. The chart appears fine on the website but when I try to print to PDF, it creates many blank pages.

"chart.js": "2.9.4",

"react": "17.0.1",

"react-chartjs-2": "2.11.1"

I have tried to readjust the height / width of the parent div as I am not sure whether it is overspilling onto another page.

Please see below for an example sandbox.

https://codesandbox.io/s/test-print-5btxjh?file=/src/App.js:60-75

J.Lau
  • 21
  • 1

1 Answers1

1

Had a similar issue on chart-js v2.9.4 and Vue v3.5.1. Solved by adding a scoped style -

<style scoped>
* :deep(.chartjs-size-monitor) {
    position: fixed;
}
</style>

which solved the problem by reducing the size to 2 pages from 616 (Chrome 108.0.5359.98).

Alan Wilson
  • 11
  • 3
  • This helped me a lot. `.chartjs-size-monitor` is definitely the culprit. This is how I fixed it: `@media print { .chartjs-size-monitor { display: none !important; }}` – previous_developer Jan 25 '23 at 12:53