Home forums Using CanvasJS Need help fixing blurry chart issue

Tagged: 

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #28618

    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 2 months, 3 weeks ago by gregs.
    #28624

    @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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.