CODEWITHSUNDEEP
reactjsreact-chartjs-2
J.Lau
J.Lau

Reputation: 21

react-chartjs-2 graph resulting in hundreds of pages when printing to PDF

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

Upvotes: 2

Views: 614

Answers (1)

Alan Wilson
Alan Wilson

Reputation: 11

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).

Upvotes: 1

Related Questions