charts appear blur on canvas - make crisp

[anoosurf]

Version

4.9.0

Steps to reproduce

show any bar chart on different screen resolutions / pixel ratio it shows blur on edges

What is expected?

it should be crisp like highcharts.com or svg borders

What is actually happening?

the dimensions are in float number and not rounded

[echarts-bot[bot]]

Hi! We've received your issue and please be patient to get responded. 🎉 The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that you have posted enough image to demo your request. You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to dev@echarts.apache.org. Please attach the issue link if it's a technical question.

If you are interested in the project, you may also subscribe our mailing list.

Have a nice day! 🍵

[anoosurf]

[anoosurf]

[anoosurf]

maybe a solution could be rounding of the drawing rectangle dimensions and/or shifting of canvas context to adjust for half pixel? please do assist ASAP as this will make the charts even more great to look at :) thanks

[plainheart]

Could you please try to check if this issue exists in 5.0? You may use the version 5.0.0-beta.2.

[anoosurf]

yes i just checked right now .. the issue exists in the latest beat versionof 5.0.0 beta-2 also

i tried a quick fix like this below to make the rectangle sharper .. but it doesn't work everytime :(

rect: function (x, y, w, h) { //edit 22/10/2020 // for columns x = Math.round(x) + 0.5; y = Math.round(y) + 0.5; w = Math.round(w); h = Math.round(h);

        //if (x % 2 !== 0) { // hack  for odd heights
        //    x = Math.round(x) ;
        //}
        //if (y % 2 !== 0) { // hack  for odd heights
        //    y = Math.round(y) ;
        //}

        //if (h % 2 !== 0) { // hack  for odd heights
        //    x = Math.round(x);
        //    y = Math.round(y);
        //}
        if (h >= 15) { // hack  for bars
            x = Math.round(x);
            y = Math.round(y);
        }

        //console.log('x:' + x + ' y:' + y + ' w:' + w + ' h:' + h);

        this._ctx && this._ctx.rect(x, y, w, h);
        this.addData(CMD.R, x, y, w, h);
        return this;
    },

On Thu, Oct 29, 2020 at 6:21 AM Zhongxiang.Wang notifications@github.com wrote:

Could you please try to check if this issue exists in 5.0? You may use the version 5.0.0-beta.2.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/apache/incubator-echarts/issues/13504#issuecomment-718290922, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABD2QUTGN3ED6G5IUPS4PB3SNC4CRANCNFSM4TCMMHZA .

[plainheart]

Thanks for the check. Just found you had gotten involved in this issue in #8620. It may still take some time to fix it.

[TaylorPzreal]

Is there has a version that doesn't has this error? my echarts version is 4.9.0 and has this same error;

[TaylorPzreal]

After i read zrender source code, i found how to trigger this problem in my case;

First the zrender src/config.ts portion code:

let dpr = 1;

// If in browser environment
if (typeof window !== 'undefined') {
    dpr = Math.max(window.devicePixelRatio 
        || ((window.screen as any).deviceXDPI / (window.screen as any).logicalXDPI) 
        || 1, 1);
}

As you can see, zrender use window.devicePixelRatio to set pixel almost any time in today browser if you don't config this, and my case is:

First i displayed my webpage on a low pixel screen(1PX), and then i dragged the browser to mac screen(2PX), so i found this problem.

So it's okay for me. Just for sharing my case.

[rajsite]

I see similar issues in the charts examples if I zoom the browser:

Notice that when I refresh the page the echart reloads and sees the new devicePixelRatio and looks sharp again. I think the issue is that echarts needs a way to allow for monitoring changes to the devicePixelRatio dynamically.

MDN has an example for Monitoring screen resolution or zoom level changes which should help for the browser zoom use-case I show.

[mballav]

I am facing the same issue when trying to produce high-quality PDFs using puppeteer. While other items on the web page look crisp even when zoomed in to 300% or more, the charts look blurry, as you can see below:

Could you please take this enhancement up in the next release? It's really important for us to deliver high-quality reports to our clients.

[KamilAndrzejczukInspeerity]

Any update on that? I face same issue on v5.5.1

[syedwj]

image are blury any one who find out solution