New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
charts appear blur on canvas - make crisp #13504
Comments
Hi! We've received your issue and please be patient to get responded. 🎉 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! 🍵 |
maybe a solution could be rounding of the drawing rectangle dimensions and/or shifting of canvas context to adjust for half pixel? |
Could you please try to check if this issue exists in 5.0? You may use the version 5.0.0-beta.2. |
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 ***@***.***> 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
<#13504 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ABD2QUTGN3ED6G5IUPS4PB3SNC4CRANCNFSM4TCMMHZA>
.
|
Thanks for the check. Just found you had gotten involved in this issue in #8620. It may still take some time to fix it. |
Is there has a version that doesn't has this error? |
After i read First the 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, 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. |
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. |
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. |
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
The text was updated successfully, but these errors were encountered: