How to fix blurry chart problem in js chart?

Question

I am creating a histogram using chart.js. but this chart looks blurry on my screen. Below is the html and js code:

<canvas id="myChart" style="padding-left: 0;padding-right: 0;margin-left: auto; margin-right: auto; display: block;width: 90%;height:350px;"></canvas> 

Js code to create a chart:

 window.onload = function () { var data = { labels: [], datasets: [ { label: "My First dataset", fillColor: "rgba(220,220,220,2)", strokeColor: "rgba(220,220,220,2)", pointColor: "rgba(220,220,220,2)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(220,220,220,2)" }, { label: "My Second dataset", fillColor: "rgba(12, 18, 51, 1)", strokeColor: "rgba(12, 18, 51, 1)", pointColor: "rgba(12, 18, 51, 1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(12, 18, 51, 1)" } ] }; var ctx = jQuery("#myChart")[0].getContext('2d'); var options = { scaleBeginAtZero : true, scaleShowGridLines : true, scaleGridLineColor : "rgba(0,0,0,.05)", scaleGridLineWidth : 1, scaleShowHorizontalLines: true, scaleShowVerticalLines: false, barShowStroke : true, barStrokeWidth : 2, barValueSpacing : 10, barDatasetSpacing : 1, legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>" } var myLineChart = new Chart(ctx).Bar(data, options); <?php foreach($resultGraph as $share){?> myLineChart.addData([<?php echo $share->shCOunt;?>, <?php echo $share->tt;?>], "<?php echo $share->post_date1;?>"); <?php } ?> //myLineChart.addData([30, 50], "January"); } </script> 

Answer 1

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

I looked at my application on a dummy host as http://www.localdomain.com/(by modifies the hosts file) and the problem disappeared. :-)

We hope that this information will help developers reproduce and fix the error!

Answer 2

Try adding 0.5 to your x coordinates. See explanation for this here.