JsPDF and chart.js: Increase chart resolution

user_13945801 0
Viewed 1452

I have written some code that displays two chart.js charts on a web page and then alows user to download the charts in pdf using jsPDF. The problem is that the resolution of the charts in pdf depends on the dpi settings of the display. For example, when I create the pdf using my work PC (1080p) the resolution is pretty bad. However, when my colleague uses us Macbook to generate the pdf, the images are very crisp.

How can I make the images independant of the display resolution and always produce high-res images. I am using toDataURL along with addImage to insert images into PDF.

I can also upload the code if needed.

Thanks

chart.js jspdf resolution canvas javascript
2 Answers

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

user_23200070

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?

user_138904230
Related