[Chartjs]-Output (column bars) from Chart.js blurry in Opera browser?

by

3👍

✅

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) */
}

-1👍

You could try rendering it as a png like so:

myLineChart.toBase64Image();

Of coarse this would make it static so It might not be the best answer.

Leave a comment