title: How to fix blurry chart issue in chart js?
body: <p>I am creating a bar chart using chart.js. but this chart look blurry in my screen. Below is my html and js code:</p>
  
  <pre><code>&lt;canvas id="myChart" style="padding-left: 0;padding-right: 0;margin-left: auto; margin-right: auto; display: block;width: 90%;height:350px;"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>Js Code for create chart bar:</p>
  
  <pre><code>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 : "&lt;ul class=\"&lt;%=name.toLowerCase()%&gt;-legend\"&gt;&lt;% for (var i=0; i&lt;datasets.length; i++){%&gt;&lt;li&gt;&lt;span style=\"background-color:&lt;%=datasets[i].fillColor%&gt;\"&gt;&lt;/span&gt;&lt;%if(datasets[i].label){%&gt;&lt;%=datasets[i].label%&gt;&lt;%}%&gt;&lt;/li&gt;&lt;%}%&gt;&lt;/ul&gt;"
  
  }
  var myLineChart = new Chart(ctx).Bar(data, options);
  &lt;?php foreach($resultGraph as $share){?&gt;
  
  myLineChart.addData([&lt;?php echo $share-&gt;shCOunt;?&gt;, &lt;?php echo $share-&gt;tt;?&gt;], "&lt;?php echo $share-&gt;post_date1;?&gt;"); 
  &lt;?php } ?&gt;
  
  //myLineChart.addData([30, 50], "January");
  
  }   
  
  &lt;/script&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/ZPr0h.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/ZPr0h.jpg" alt="enter image description here"></a></p>