Need help fixing blurry chart issue

[gregs]

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’)
context.scale(2,2)
// does chart.render go here??

Source:
https://coderwall.com/p/vmkk6a/how-to-make-the-canvas-not-look-like-crap-on-retina

• This topic was modified 4 years, 8 months ago by gregs.

[Manoj Mohan]

@gregs,

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.

—-
Manoj Mohan
Team CanvasJS