You must be logged in to post your query.
Home › Forums › Chart Support › Blurry X Axis Labels when Animation Enabled
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.
@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
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.
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.
You must be logged in to reply to this topic. Login/Register