CODEWITHSUNDEEP
javascriptcanvaschartschart.jsmicrosoft-edge
Marcin Chmielowski
Marcin Chmielowski

Reputation: 21

Chart.js microsoft edge display issue

I have created a mixed chart using chart.js library, unfortunately when testing the script on Microsoft Edge or Safari the chart does not display properly, lines are barely visible, legend is almost completely hidden unless hovered, axes also has a very poor labels.

Is there a way to fix the issue? Important to mention is that I had the same issue using d3.js. At first I thought it's SVG causing this issue but then chart.js is using canvas instead and the problem stil occurs.

https://vantrilio.github.io/charts/ - my example

Screens to compare

Google Chrome - everything is correct here:

enter image description here

Microsoft edge - legend is gone, axes labeling very thin, line chart is barely visible:

enter image description here

Safari - legend is gone, line chart is barely visible:

enter image description here

Any way to solve the problem?

Upvotes: 1

Views: 1841

Answers (2)

Marcin Chmielowski
Marcin Chmielowski

Reputation: 21

Ok I have fixed the problem, for line chart problem it was enough to switch from RGBA to HEX colors, thin font was fixed just by changing the font family and it's weight - same with the legend. 

scales: {
  xAxes: [{
    stacked: true,
    barPercentage: 0.6,
    fontStyle: 'bold',
    ticks: {
            fontFamily: "Verdana",
            fontStyle: 400
        }
  }],
  yAxes: [{
    stacked: true,
    fontStyle: "bold",
    fontSize: 80,
    ticks: {
            fontFamily: "Verdana",
            fontStyle: 400,

        }
  }]
},

Upvotes: 0

Deepak-MSFT
Deepak-MSFT

Reputation: 11335

It is possible that below reasons cause this issue.

-> IE and Edge does not support globalAlpha for drawImage of SVG graphics.
-> IE 10 canvas doesn't support setLineDash or lineDashOffset.

-> In IE 11 canvas.toDataURL() does not work if the canvas has images with data URI sources.

Reference:

Canvas (basic support)

Chart JS

You need to contact Chart JS for support. This library is developed by them. so they may available with any solution for this.

Upvotes: 1

Related Questions