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)' ],
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)
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' ]
In my case, I was using
backgroundColor: 'rgb(33, 145, 81, 0.2)', borderColor: 'rgb(255, 134, 25, 1)',
backgroundColor: 'rgba(33, 145, 81, 0.2)', borderColor: 'rgba(255, 134, 25, 1)',
- ChartJS canvas not displaying rgba colors in IE, Safari and Firefox
- ChartJS canvas not displaying colors in edge browser
- Fit outlabels to canvas and use different colors chartjs
- Chartjs custom colors not displaying when dataset is changed
- Chart.js: bar chart first bar and last bar not displaying in full
- chartjs datalabels change font and color of text displaying inside pie chart
- Displaying mixed types of legends (bar and lines) with Chartjs
- Chartjs not rendering chart and no error thrown
- ChartJs Not displaying data
- unable to add background color to the canvas using jspdf and chartjs
- Chart.js 3+, Firefox 68 and Angular: "ReferenceError: "ResizeObserver is not defined"
- ChartJS "half donut" chart not displaying properly
- Setting up min and max in chartjs did not work
- ChartJS shows date, but not time, when displaying labels in time axis
- Chartjs not working with d3 from csv source
- Chartjs and ChartDataLabels does not work in mdb5 pro version 2
- zeroLineColor and zeroLineWidth not working for the x-axis in Chartjs
- ChartJS not displaying time data using Moment.js
- Doughnut Chart not displaying data with Chart Js and Backbone js
- canvas does not display proper width and height chart.js
- Canvas displays initially in Chrome but not in Firefox
- Render chartjs and export image to data not in the DOM
- Chartjs not displaying timed data
- Chart JS - Grid colors and gradient fill not showing
- VueJs and ChartJs - Chart is responsive in width, but not height?
- Chartjs Stacked bar chart not displaying correctly
- generator-angular-fullstack and angular-chart.js not displaying charts
- How to hide/show bars differentiate by a colors and by click on labels, using chartjs bar charts?
- Legend color not working with randomly generated background colors in chartjs pie chart
More Query from same tag
- ChartJs doesn't work on a local downloaded page of Circular Gauge chart example
- ng2-charts does not work When data is between 2 and 5
- Chart.js animation triggered only on hover?
- Convert PHP array to chart.js compatible data
- PrimeNG/Chart.js - max Number of labels to show
- Chart.js v2 hide dataset labels
- Why is chartjs treating these arrays differently?
- chartjs - no smooth rendering on time series plot
- How can I user microseconds in ChartJs?
- How to create range based ticks in chart js? (like in attached image)
- How remove duplicates xAxis labels and show all values on chart
- chartjs push array to label not working
- "Type of import (".../charjs/types/indexsm" has no construct signatures issue on Vue3 and ChartJS?
- Chart Js clickable bar
- Use data from SQL database in .js file with PHP
- Bootstrap > Extend ChartJS canvas horizontally to match overflowing columns
- ChartJS / MomentJS - Unable to remove deprecation warning. Graph not showing in firefox/opera
- Style individual points from one dataset in Chart.js
- ng2-charts doughnut chart with different data per series
- Chart.JS Mixed Chart - Bars Not Showing
- Chart.js with Django - Using REST
- Dotted lines using Chart.js
- How to add Dyamic JSON Dropdown Menu in Angular JS
- ChartJs title not showing
- ChartJS memory usage
- Why chartJs throws length of undefined although everything seems correct
- Angular 4: Different color for bar in bar chart dynamically using ChartJS
- Chart js sum of grouped bars
- How to add OnClick Event on labels in Chart.js v2.0?
- How to display data values on bar graph (chart.js)?