How to fix blurry chart issue in chart js?

chart js resize
chart js responsive font size
react-chartjs-2 responsive
responsive charts
chart js label color
chart js on mobile
chart.js download
chart js response

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>

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

The text isn't clean/sharp! · Issue #2814 · chartjs/Chart.js · GitHub, Hello, I believe there is some issue with the text in my charts. border property to the canvas element what was causing the problem of blur on  This should help with clearing up the charts, but I’m having some trouble implementing it into canvasjs. Can you assist? canvas = document.getElementById(‘output’) var scale = window.devicePixelRatio; // Change to 1 on retina screens to see blurry canvas. canvas.style.width = “100px”; canvas.style.height = “100px”;

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 }

Charts blurry when printed · Issue #34 · jerairrest/react-chartjs-2 , We're using react-chartjs-2 for a sales reporting application and the users you use a higher resolution canvas might fix the printing issues. Hello, I believe there is some issue with the text in my charts. Ideally, a chart should look this way. But, in my case, the text seems to be blurry and too smooth.It doesn't look sharp/clean at all.

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

Responsive · Chart.js documentation, <canvas style="height:40vh; width:80vw"> : invalid behavior, the canvas is resized but becomes blurry (example). Chart.js provides a few options to enable​  In order to help us in understanding the issue better, please have a reproducible demo of your chart. This one step can assure you a speedy response. Fork out our template JSFiddle and reproduce the chart at your end. Try to keep it to the bare minimum by removing unnecessary code.

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

Doughnut & Pie · Chart.js documentation, <canvas style="height:40vh; width:80vw"> : invalid behavior, the canvas is re size d but becomes blurry (example). Chart.js provides a few options to enable  I am trying Charts js in one of our solutions and i ran into the issues of getting very low resolution image when animation is set to false. Below is the example of the chart i am using. When animation and responsive both set to true, everything works as expected. When they are set to false, the chart rendered as very low resolution image.

Blurry title and x-axis, Pie and doughnut charts are effectively the same class in Chart.js, but have one different default value - their cutoutPercentage . This equates what percentage of​  Hi I am using chart.js version 2.5.0 Chart.js is not working inside the iframe. <canvas></canvas> Error: Failed to create chart: can't acquire context from the given item i am working one page which has master

The text isn't clean/sharp! - Chart.js, I have changed the theme to theme1 and it looks fine. No problem for me to use this theme, but just for you to know the issue with theme2. May 5,  The chart can also be programmatically resized by modifying the container size: chart.canvas.parentNode.style.height = '128px'; chart.canvas.parentNode.style.width = '128px'; Note that in order for the above code to correctly resize the chart height, the maintainAspectRatio option must also be set to false.

Fixing HTML5 2d Canvas Blur - WDstack, I believe there is some issue with the text in my charts. Ideally, a chart should look But, in my case, the text seems to be blurry and too smooth. It doesn't look  Seems that this is really a ChartJS issue people are working around. Have you tried looking into solutions presented in chartjs/Chart.js#1961 and chartjs/Chart.js#99? I hope those will be of help. Personally I didn't get to the rendering to PDF yet, so cannot speak from my experience. Maybe someone else who uses the lib did. Thanks, Goran

Comments
  • Have you seen github.com/chartjs/Chart.js/issues/2814?
  • I am facing this issue on my production too.
  • This make more blurry to graph
  • 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.
  • 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
  • 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.
  • @1cgonza could you demonstrate in this live testcase please? jsfiddle.net/askhflajsf/xzk6sh1q