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

Question

I have 2 types of charts bar and line. This is my view (in slim):

    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 colours 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 can't change a color of displaying data on line-chart. And when I want to move cursor on the point - I have error:

Uncaught Error: Unable to parse color from object ["rgba(151,187,205,1)","rgba(220,220,220,1)"...] What I did wrong?

Can you try to post a full repro case using this [template](http://jsbin.com/cucoqe/1/edit?html,js,output)? — WispyCloud, Jul 08 '16 at 10:02
Had the same problem when I passed my data array directly. Instead, it should be passed within another array, e.g. data="[[1, 2, 3]]". Can't tell if you have the same issue though, since you didn't include the data definition. — tom, Jul 15 '16 at 08:21

score 42 · Answer 1 · edited Aug 23 '16 at 20:15

42

Please make sure that your data is on double array.

Ex:

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

edited Aug 23 '16 at 20:15

hveiga

6,725
7
54
78

answered Aug 23 '16 at 10:52

Mohammad Ashraful Islam

1,879
15
29

score 12 · Answer 2 · answered Jan 12 '17 at 18:55

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

Solution: If the chart is of type 'line', it does not take an array of colors for background and border, but single 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
                    }
                }
            ]
        }
    }
});

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

2 Answers2