Display (Show) Legend in Pie Chart using ChartJS in AngularJS

Last Reply one year ago By dharmendr

Posted one year ago

Legend not showing in pie chart using chart.js in angularjs

<script src="http://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
<canvas id="pie" class="chart chart-pie" data="pieDiskData.data" labels="pieDiskData.labels" width="245%" colours="pieDiskData.colours"></canvas>                        
    $scope.dd = null;
    $http.get(apiUrl + "/api/Warehouse/GetDashboardDays")
    .then(function (response) {
        $scope.dd = JSON.parse(response.data);
        $scope.quantity1 = $scope.dd[0].Qty;
        $scope.quantity2 = $scope.dd[1].Qty;
        $scope.quantity3 = $scope.dd[2].Qty;
        $scope.quantity4 = $scope.dd[3].Qty;           
        var diskDataJson = {
            "data": [$scope.quantity1, $scope.quantity2, $scope.quantity3, $scope.quantity4],
            "labels": ["0-30 days", "31-60 days", "61-90 days", "91 days & above"],
            "colours": ['#36a2eb', '#ff6384', '#cc65fe', '#ffce56']
        };
        $scope.pieDiskData = diskDataJson;        
    })

 

Posted one year ago

Hi skp,

Check this example. Now please take its reference and correct your code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>AngulrJS chart.js Pie chart Legend</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.0.3/angular-chart.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', ["chart.js"]);
        app.controller('MyController', function ($scope) {
            $scope.quantity1 = 55;
            $scope.quantity2 = 46;
            $scope.quantity3 = 39;
            $scope.quantity4 = 71;
            var diskDataJson = {
                "data": [$scope.quantity1, $scope.quantity2, $scope.quantity3, $scope.quantity4],
                "labels": ["0-30 days", "31-60 days", "61-90 days", "91 days & above"],
                "colours": ['#36A2EB', '#FF6384', '#CC65FE', '#FFCE56'],
                "options": { legend: { display: true, position: 'right'} }
            };
            $scope.pieDiskData = diskDataJson;
        });
    </script>
</head>
<body>
    <div ng-app="MyApp" ng-controller="MyController">
        <canvas id="pie" class="chart chart-pie" chart-data="pieDiskData.data" chart-labels="pieDiskData.labels"
            chart-colors="pieDiskData.colours" chart-options="pieDiskData.options" width="245%"></canvas>
    </div>
</body>
</html>

Demo