[Chartjs]-JsPDF and chart.js: Increase chart resolution

by

0👍

✅

Since you are displaying charts in chart.js on a web page, the addImage data in jsPDF always depends on the resolution of your display.
In your case you generated it on a low resolution PC and a macbook with a Retina display, and since the size of the image data set in addImage is different, the resolution of the PDF will naturally change as well.

My idea is to solve this problem by always keeping the size of the image data set by addImage constant.

I think you can use Window.devicePixelRatio to keep the size of the image data constant while taking into account the resolution of the screen.
https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio …

What do you think?

5👍

As @HandDod wrote, DPI is the solution!

Since a few versions Chart.js has the parameter devicePixelRatio.
By default, the canvas is rendered in the DPI number by monitor, so 96 or Retina – not ideal for a printout, but perfect for the screen.

If you increase this value, more pixels are created. Expand the value so that you can export the chart in print quality as a Base64 image. The value does not affect the display of the chart on the monitor.

In my case, I set the value to 1.5.

options:{
      devicePixelRatio: 1.5
}

Documentation: https://www.chartjs.org/docs/3.0.2/configuration/device-pixel-ratio.html
Works wonderfully …

Leave a comment