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

42👍

Please make sure that your data is on double array.

Ex:

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

12👍

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
                    }
                }
            ]
        }
    }
});

Leave a comment