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

Last Reply 26 days ago By dharmendr

Posted 27 days 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;        
    })

 

You are viewing reply posted by: dharmendr 26 days ago.
Posted 26 days 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