Unable to parse color in line chart (angular -chart.js)

Question

I have 2 types of charts and a row. This is my opinion (in subtle):

canvas#line.chart.chart-line( ng-if="stateStats == 'global'" chart-data="data" chart-labels="labels" chart-colours="colours" ) canvas#bar.chart.chart-bar( ng-if="stateStats != 'global' && data.length != 0" chart-data="data" chart-labels="labels" chart-options="optionsBarChart" ) 

My color option:

 $scope.colours = [{ fillColor: "rgba(151,187,205,0.2)", strokeColor: "rgba(151,187,205,1)", pointColor: "rgba(151,187,205,1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(151,187,205,0.8)" }]; 

My problem is that I cannot change the color of the data display in the line-chart line . And when I want to move the cursor to a point - I have an error:

Missed error: it is impossible to parse the color from the object ["rgba (151,187,205,1)", "rgba (220,220,220,1)" ...] What did I do wrong?

Answer 1

Please make sure your data is in a double array.

Example:

 data = [ [10, 20, 30, 20, 10] ]; 

Answer 2

I used chart.js and had the same exception when hovering over a point. When I put my data in a double array, the chart did not show anything.

Solution: If the chart is of type 'line', it does not accept an array of colors for the background and border, but for individual colors. This worked for me:

 var chart = new Chart(chartCanvas, { type : 'line', data : { labels : dates, datasets : [{ label : 'Error', data : errorCounts, backgroundColor : 'rgba(255, 99, 132, 0.2)', borderColor : 'rgba(255,99,132,1)', borderWidth : 1 }, { label : 'Ok', data : okCounts, backgroundColor : 'rgba(75, 202, 72, 0.2)', borderColor : 'rgba(117,239,95,1)', borderWidth : 1 } ] }, options : { responsive : true, scales : { yAxes : [{ ticks : { beginAtZero : true } } ] } } });