Legend not showing in pie chart using chartjs in angularjsltscript src34httpcdnjscloudflarecomajaxlibsChartjs260Chartbundleminjs34gtltscriptgtltscript src34httpscdnjscloudflarecomajaxlibsChartjs102Chartjs34gtltscriptgtltcanvas id34pie34 class34chart chartpie34 data34pieDiskDatadata34 labels34pieDiskDatalabels34 width3424534 colours34pieDiskDatacolours34gtltcanvasgt

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

skp

SOLVED CLOSED ACTIVE ANSWERED
User: skp
Posted: on Jul 26, 2019 01:45 AM
Forum: AngularJS
Answer: 1
Views: 7469
Sample Code: Download

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

dharmend...

0 2

Reply
ANSWER
User: dharmendr
Replied: on Jul 26, 2019 03:32 AM
Report

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

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

Company

Explore

Follow us

Contact Us