angular.min.js:117 TypeError: Cannot read property 'length' of undefined

[blogui91]

I'm trying to replicate doughnut example, but i am getting this error

angular.min.js:117TypeError: Cannot read property 'length' of undefined at defaults.doughnut.legend.labels.generateLabels (Chart.js:2587) at Chart.Legend.Chart.Element.extend.buildLabels (Chart.js:6123) at Chart.Legend.Chart.Element.extend.update (Chart.js:6071) at getMinimumBoxSize (Chart.js:5773) at Object.helpers.each (Chart.js:4611) at Object.Chart.layoutService.update (Chart.js:5766) at helpers.extend.updateLayout (Chart.js:3859) at initialize (Chart.js:3733) at new Chart.Controller (Chart.js:3714) at new Chart (Chart.js:5587)

As in example i have <!-- View --> <section ng-controller="MyController"> <canvas tc-chartjs-doughnut chart-options="options" chart-data="data" auto-legend></canvas> </section>

` //Controller
app.controller('MyController', ['$scope', function($scope) { // Chart.js Data $scope.data = [{ value: 300, color: '#F7464A', highlight: '#FF5A5E', label: 'Red' }, { value: 50, color: '#46BFBD', highlight: '#5AD3D1', label: 'Green' }, { value: 100, color: '#FDB45C', highlight: '#FFC870', label: 'Yellow' }];

        // Chart.js Options
        $scope.options = {

            // Sets the chart to be responsive
            responsive: true,

            //Boolean - Whether we should show a stroke on each segment
            segmentShowStroke: true,

            //String - The colour of each segment stroke
            segmentStrokeColor: '#fff',

            //Number - The width of each segment stroke
            segmentStrokeWidth: 2,

            //Number - The percentage of the chart that we cut out of the middle
            percentageInnerCutout: 50, // This is 0 for Pie charts

            //Number - Amount of animation steps
            animationSteps: 100,

            //String - Animation easing effect
            animationEasing: 'easeOutBounce',

            //Boolean - Whether we animate the rotation of the Doughnut
            animateRotate: true,

            //Boolean - Whether we animate scaling the Doughnut from the centre
            animateScale: false,

            //String - A legend template
            //legendTemplate: '<ul class="tc-chart-js-legend"><% for (var i=0; i<segments.length; i++){%><li><span style="background-color:<%=segments[i].fillColor%>"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>'

        };

    }
]);

which could be the error??

Thanks in advance! `

[equero]

Same error for me.

[joris-lambrechts]

Which version are you using? Note that the Chart.js datastructure is changed a bit in version 2.

[blogui91]

I installed the package via bower it downloaded the version 2.* by default, I think It should work and I just copy & paste the code, I tried to use other version lower than 2. * version but I still get errors, I will embed them

[joris-lambrechts]

If you are using version 2, the data structure and options are not correct. See https://github.com/carlcraig/tc-angular-chartjs/blob/master/demo/js/doughnut.js

[blogui91]

Ohh so sorry, i just noticed, but i think the documentation in the page should be updated or at least to warn us of using that structure to avoid this kind of issues. Thank you bro!

[joris-lambrechts]

No problem, I assumed that these pages were already up to date. @carlcraig Could you update these?

[hackerunet]

This is pretty annoying the code is totally out of date, Also doesn't work with lately angular versions before 2, this should be in DEPRECATED state.