Blurry X Axis Labels when Animation Enabled

[mjohnson]

I have encountered an issue where the X axis labels appear blurry on initial render when animation is enabled. Any resizing or re-rendering of the chart removes the blurriness. I’ve created a JSFiddle that demonstrates the issue. The top chart has animation enabled, and consequently a blurry X axis labels. The bottom one has animation disabled.

https://jsfiddle.net/q7c9knxz/1/

The issue occurs in both Chrome and Firefox, although it seems more obvious in Chrome. The width of the window makes a difference in how blurry the label appears, so if it’s not clear from first glance, try adjusting the width of the JSFiddle’s viewing window and running it again.

[Thangaraj Raman]

@mjohnson8thlight-com,

We are unable to reproduce the issue at our end, the chart seems to be proper & not blurry. Can you kindly provide more information like the version of CanvasJS & the browser that you are using so that we can try reproducing with the same environment?

—
Thangaraj Raman
Team CanvasJS

[mjohnson]

I’m using the CanvasJS 3.7.5 on a Windows machine. It appears in blurry for me in both Chrome and Firefox.

I did a little more poking around, and it looks like the default system setting for “Change the size of text, apps, and other items” setting on my PC is 125% (it’s a laptop). If I change it to 100%, the issue goes away. I’ve reproduced this same pattern on another windows machine: at 100% no blurriness, but at 125% the top, animated chart only has blurry labels on the x-axis. The bottom chart is still clear either way.

[Thangaraj Raman]

@mjohnson8thlight-com,

Chart elements may look blurred on changing the zoom level within the display setting of the browser or windows. Resetting the zoom level to 100% should work fine in this case.

—
Thangaraj Raman
Team CanvasJS