Chartjs Canvas Not Displaying Rgba Colors In Ie, Safari And Firefox

Im using ChartJS to display some data but it's not rendering the canvas element correctly in IE, Firefox and Safari. My guess is that the background color property lacks any of th

Solution 1:

The problem is that you're giving the backgroundColor property an array of Color instead of a single one.

The line chart, with the fill property set to true needs to have only one Color, or else it will break like it does on your chart.

---

So you just need to change from :

backgroundColor: [
    'rgba(33, 145, 81, 0.2)','rgba(33, 145, 81, 0.2)','rgba(33, 145, 81, 0.2)','rgba(33, 145, 81, 0.2)','rgba(33, 145, 81, 0.2)','rgba(33, 145, 81, 0.2)','rgba(33, 145, 81, 0.2)','rgba(33, 145, 81, 0.2)'
],

To :

backgroundColor:'rgba(33, 145, 81, 0.2)',

And it will give you this result whatever browser you are using. (tests were done on IE 11 and Firefox 48)

Solution 2:

In my case, I was using rgb

backgroundColor:'rgb(33, 145, 81, 0.2)',borderColor:'rgb(255, 134, 25, 1)',

Instead of rgba

backgroundColor:'rgba(33, 145, 81, 0.2)',borderColor:'rgba(255, 134, 25, 1)',

Solution 3:

I am having issue with color of single line graph(not multiline). Chrome has fine graph presentation but when checked in IE. It is showing gray color line. Apart from this graph is going beyond background white space provided for chart in IE. As question is related to color of line chart, I am answering for those only.

Change borderColor: section like below, borderColor: [ '#587ce4' ] If you are using Legends. Make below change too to look similar of line color, backgroundColor: [ '#587ce4' ]