How to fix blurry chart issue in chart js? How to fix blurry chart issue in chart js? php php

How to fix blurry chart issue in chart js?


Make sure that you don't adding some css to the canvas element.In my case I found that I am adding border property to the canvas element what was causing the problem of blur on text and bars.

dont use something like that :

canvas { border: 1px solid #000 }

or with id like in your example :

#myChart { border: 1px solid #000 }


I faced this today on Chrome latest version, literally wasted 3 hours to chase it.Finally it turned out that issue only occurs only when the browser URL is localhost with some port. e.g. http://localhost:1700/

I browsed my app on a dummy host as http://www.localdomain.com/(by modifying hosts file) and issue is gone. :-)

Hope this info helps the developers to reproduce and fix the bug!!!


Try adding 0.5 to your x coordinate values. See explanation to this here