'How to fix blurry chart issue in chart js?

I am creating a bar chart using chart.js. but this chart look blurry in my screen. Below is my 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 for create chart bar:

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>

enter image description here

javascriptphpjquerychartsbar-chart


Solution 1:[1]

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 }

Solution 2:[2]

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!!!

Solution 3:[3]

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

Solution 4:[4]

It might be the stroke width.

Please check the dataset you push.

var arraytable = [
    [
        {label: "Sector", type: 'string'},
        {label: "Exposure", type: 'number'},
        {role: 'style', type: 'string'},
    ],
    ['Energy', 0.32, 'color: #005695; stroke-width: 0']
];
var datatable = google.visualization.arrayToDataTable(arraytable);

Solution 5:[5]

I had this problem on the version 3.2.1.

Maybe I have this issue, because I am displaying the charts in a modal window. In my case, I moved the CSS from #myChart to the parent element and now the chart is sharp:

<style>
  .graph-wr {
    height: 600px;
    max-height: 600px;
    max-width: 100%;
    position: relative;
    width: 1650px;
  }
</style>

<div class="graph-wr">
  <canvas id="myChart"></canvas>
</div>

This solved the blurriness for me. I'll still look a little deeper into it. I'll also check out the documentation about the responsiveness, because I see that there are some specific options for it.

Here is also the CodePen example from Chart.js.

Solution 6:[6]

My case was also similar. Bar charts were blurred and the labels looked really bad. So I added below code to options. and it worked like charm!

  options: {
    responsive: true,
    maintainAspectRatio: false,
  }

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Said SOUALHI
Solution 2 user8844402
Solution 3 1cgonza
Solution 4 SequenceDigitale.com
Solution 5
Solution 6 Single-byte

Related Questions