Menu
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 the used prefixes for the other browser since it works fine in Chrome.
Anyone else had this issue?
Chrome:
Firefox, Safari and IE:
The code:
window.onload = function() {
var ctx = document.getElementById("canvas");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug"],
datasets: [{
label: '# of Value',
data: [12, 19, 3, 5, 2, 3, 10, 29],
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)'
],
borderColor: [
'rgba(33, 145, 81, 1)',
'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)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
};
});
254
The plugin allows you to enhance your chart. For example zoom in or pan on to your chart. But also change the background color. Using setBackgroundColor(color); //updates the background color of the chart .
To create a chart, we need to instantiate the Chart class. To do this, we need to pass in the node, jQuery instance, or 2d context of the canvas of where we want to draw the chart.
Adding Angular chartjs to our application ? Let create first create an angular project to demonstrate an example of how to add a chart library in our angular projects. The above command will install chartjs library in our angular application. We also created different components for each Angular chartjs example.
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.
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)
91
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
