Blurry column charts

[guilhermemaranhao]

Hi,

We have an issue related to some charts that are being rendered blurry. We’ve made some tests using same bowsers on different machines, and it got ok in one machine and not in the other (In this case, even some properties that were set before haven’t been loaded).

As you can notice, the chart is blurry and the legend is broken. I’ve set the legend property to be displayed in one line, like the picture above.1

Does anybody know why that happen? Does it have anything to do with the label font, like was told in some other posts? And what about the legend issue?

Thank you very much,

Guilherme

[guilhermemaranhao]

Blurry Chart

Chart OK

[9Dan7]

It happens to me when I resize the screen, but you can refresh your page to fix it.

[guilhermemaranhao]

Thank you, Dan. But I don’t think so, as I did not resize the screen. It’s uncertain, because it happens sometimes in one machines but not in another one.

[Manoj Mohan]

Guilherme,

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.

If the issue still persists, kindly share JSFiddle reproducing the issue so that we can look into your code, understand the scenario better and help you out.

—-
Manoj Mohan
Team CanvasJS

[guilhermemaranhao]

Thank you, Manoj. I’ll check it.

[guilhermemaranhao]

Hi Manoj,

Another issue that makes this issue not related to the zoom level, is that the chart legend was displayed in two lines. You can check that accessing the links I’ve posted in the second message. In the current application version, the legend is displayed in one line (I’ve set a property on the chart to make it that way), but it’s being displayed in two lines, as the previous version. Don’t you think it has something to do with cache?

[Manoj Mohan]

Guilherme,

Can you kindly create JSFiddle with sample data and share it with us so that we can look into the code / chart-options being user, understand the scenario better and help you out?

In order to help us in understanding the issue better, please have a reproducible demo of your chart. This one step can assure you a speedy response. Fork out our template JSFiddle and reproduce the chart at your end. Try to keep it to the bare minimum by removing unnecessary code.

From what we have observed, sometimes things get delayed mostly when we are not able to reproduce the issue or not able to understand the exact requirements or the solution that we provide may not work properly due to the variation in chart-options being used by you and us.

Having a JSFiddle helps us in figuring out the issue and many a times we can just edit your code on JSFiddle to fix the issue right-away.

—-
Manoj Mohan
Team CanvasJS

[guilhermemaranhao]

Hi Manoj,

Thank you very much for your return. The browser’s zoom was set higher than 100%. We’ve reset it and everything got ok!

Cheers!

[sabsabdul]

you can do something like this at the bottom of your code

ctx= document.getElementsByClassName(‘canvasjs-chart-canvas’);
ctx.style = “-webkit-tap-highlight-color: transparent;”;

if it doesn’t work place it before chart.render();
I tested it, its work fine

[Elanchezhiyan]

Hi Manoj,
I’m getting the image as like this. Why the violet color is extended which makes odd one!
Image

[Manoj Mohan]

@elanchezhiyan,

Can you kindly create JSFiddle reproducing the issue you are facing and share it with us so that we can look into the code / chart-options being used, understand the scenario better, and help you out?

—-
Manoj Mohan
Team CanvasJS