JsPDF and chart.js: Increase chart resolution

Question

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

Answer 1

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