Geek Answers Handbook

The output (column columns) from Chart.js is blurry in Opera browser?

Opera version: 32.0.1948.69 (the output works fine on other major browsers).

Does anyone know how I can fix the blur from Chart.js?

The width of the chart is not relevant here, no matter which tithes that I accept always have a blur level (especially when hovering over a column) that I would like to eliminate.

Image :

enter image description here

Script example : https://jsfiddle.net/eugensunic/1sg79n7x/1/

Script code:

var array= [100, 59, 80, 333, 56, 55, 40] var data = { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [ { label: "My First dataset", fillColor: "rgba(220,220,220,0.5)", strokeColor: "rgba(220,220,220,0.8)", highlightFill: "rgba(220,220,220,0.75)", highlightStroke: "rgba(220,220,220,1)", data: array } ] }; var options = { animation: true }; var ctx = document.getElementById("myChart").getContext("2d"); myNewChart = new Chart(ctx).Bar(data, options);

EDIT: Comparing images between Chrome and Opera. enter image description here

+6
source share
2 answers

You need to add a few lines of CSS properties to optimize the rendering of images for Opera, as described here: https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering and can be seen below.

 canvas#myChart { image-rendering: optimizeSpeed; /* Older versions of FF */ image-rendering: -moz-crisp-edges; /* FF 6.0+ */ image-rendering: -webkit-optimize-contrast; /* Webkit (non standard naming) */ image-rendering: -o-crisp-edges; /* OS X & Windows Opera (12.02+) */ image-rendering: crisp-edges; /* Possible future browsers. */ -ms-interpolation-mode: nearest-neighbor; /* IE (non standard naming) */ }
+2
source

You can try to do it as png like this:

 myLineChart.toBase64Image();

Roughly this would make it static, so that might not be the best answer.

-1
source

More articles:


All Articles