Search code examples
javascripthtmlcssoperachart.js

Output (column bars) from Chart.js blurry in Opera browser?

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

Does anyone know how could I possibly fix the blurriness from Chart.js?

The width of the chart isn't relevant here, no matter which dimesions I take it always has a level of blurriness (especially when hovering over the column) which I would like to eliminate.

Image:

enter image description here

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

Fiddle 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: Picture comparison between Chrome and Opera. enter image description here

Solution

  • You need to add a few lines of CSS properties to optimize image rendering for Opera as explained here: https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering and 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) */
}