Home › forums › Using CanvasJS › Need help fixing blurry chart issue
On my Mac, no chart is blurry. However, on most PC’s I’m working on, the charts look blurry, even at 100%.
I think it has something to do with Window.devicePixelRatio, which is different depending on what device you’re on.
This should help with clearing up the charts, but I’m having some trouble implementing it into canvasjs. Can you assist?
canvas = document.getElementById(‘output’)
var scale = window.devicePixelRatio; // Change to 1 on retina screens to see blurry canvas.
canvas.style.width = “100px”;
canvas.style.height = “100px”;
canvas.width = 100 * scale; // double above width
canvas.height = 100 * scale; // double above height
context = canvas.getContext(‘2d’)
// does chart.render go here??
It seems to be working fine across browsers & devices. Chart elements may look blur on changing the zoom level within the display setting of browser or windows. Resetting zoom level to 100% should work fine in this case. CanvasJS Charts supports retina / HiDPI display since v1.3.
If you are still facing the issue even after resetting the zoom level in the browser and windows, kindly create JSFiddle reproducing the issue and share it with us so that we can look into the issue and resolve it.
You must be logged in to reply to this topic.