How to fix blurry chart issue in chart js?

Question

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>

Mustard

Have you seen github.com/chartjs/Chart.js/issues/2814? – Demott

Answer 1

Solution in 2022:

add this in your chartjs options and it works like magic.

devicePixelRatio: 4

Bumble

Absurdly this works. What sorcery is this /s . thanks a lot – Wisniewski

worked in node.js back end too – Cytoplasm

omg thats really straightforward – Whaling

@Whaling I know, right! :D – Bumble

@MithunDas This is really like magic, thank you 👍 – Nonnah

Answer 2

Make sure that you are not adding some CSS to the canvas element. In my case, I found that I am adding border property to the canvas element, which was causing the problem of blur on text and bars.

don't use something like that :

canvas { border: 1px solid #000 }

or with id like in your example :

#myChart { border: 1px solid #000 }

Fiddling

Answer 3

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

Reggi

I am facing this issue on my production too. – Citizen

@ShrutikaPatil how did you fix this? We are having the same problem in production with some subdomains – Darcidarcia

@Darcidarcia I removed the CSS from canvas tag and added it to the upper div – Citizen

Answer 4

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

Aitken

This make more blurry to graph – Mustard

Are your values floating points? if that is the case, you should try rounding them first and then add 0.5. Otherwise, they will always bleed on the edges and therefore look blurry. – Aitken

I am not getting what you are saying. Can you explain me more and tell me where i have to add 0.5 in my code – Mustard

Sure, assuming your x coordinate values come from this $share->shCOunt;, what I was suggesting you could try is the following: <?php echo (int)$share->shCOunt + 0.5; ?>. First make sure your data point is an integer, then add 0.5 to it. – Aitken

@Aitken could you demonstrate in this live testcase please? jsfiddle.net/askhflajsf/xzk6sh1q – Demott

Answer 5

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,
  }

Germiston

Answer 6

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);

Prefrontal

Answer 7

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.

Tomblin

Answer 8

wrapping the canvas is probably the best option.

Nodababus

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Zared