angular-chart not showing Pie Chart

Question

I am having an issue within my AngularJS application not rendering the Pie Chart from angular-chart, which uses Chart.JS.

I have registered chart.js as a dependency within my angular module as following:

    var app = angular.module("uniSurvey",
                        ["common.services",
                            "ui.router",
                            "chart.js"]);

Then within my view, I have added the Pie Chart canvas following their documentation:

<div ng-repeat="item in resultsDetails.items">
        <canvas id="pie" class="chart chart-pie chart-xs"
                chart-data="resultsDetails.data"
                chart-labels="resultsDetails.label"
                chart-legend="resultsDetails.legend"></canvas>
</div>

And within my controller for that view, I have set the data required by the chart as following:

(function () {
"use strict";
angular
    .module("uniSurvey")
    .controller("ResultsDetailsController", ["$stateParams", "resultResource", ResultsDetailsController]);

function ResultsDetailsController($stateParams, resultResource) {
    var resultsDetails = this;
    resultsDetails.currentSurveyId = $stateParams.id;

    resultsDetails.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"];
    resultsDetails.data = [300, 500, 100];
    resultsDetails.legend = true;

    resultsDetails.items = [];
}

}());

With the current setup, I get the following error:

angular.js:13550 TypeError: Cannot read property 'map' of undefined at v (angular-chart.min.js:323) at d (angular-chart.min.js:191) at angular-chart.min.js:150 at n.$digest (angular.js:17073) at n.$apply (angular.js:17337) at l (angular.js:11572) at H (angular.js:11778) at XMLHttpRequest.u.onload (angular.js:11711)

Any ideas of what steps I may have missed please?

have you included the angular-chart.min.js dependency on your page? — Maverick976
@Maverick976 - Yes I had done that, included my silly mistake as an answer. — Ryan S

Ryan S Ryan S · Accepted Answer · 2016-06-29T21:59:09

Turns out it was a silly mistake, it was "resultsDetails.labels" not "resultsDetails.label". Since it's the first time I'm using angular-chart I thought this is something else, not the most basic of things.

angular-chart not showing Pie Chart

1 Answers