Display data on each slice of Pie Chart using ChartJS in AngularJS

skp
 
on Jul 26, 2019 05:48 AM
3392 Views

Displaying data on each slice of pie chart in chart.js using angularjs

<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>
<canvas id="pie" class="chart chart-pie" chart-data="diskDataJson.data" chart-labels="diskDataJson.labels" width="238%" chart-colours="diskDataJson.colours" chart-options="diskDataJson.options"></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;        
        $scope.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": {
                title: {
                    display: true,
                    text: 'Based on Quantity',
                    fontSize: 18,                       
                    position: 'top'
                },
                legend: {
                    display: true, position: 'right',
                    labels: {
                        boxWidth: 15,
                        padding:20,
                        pieceLabel: {
                            render: 'value'
                        }
                    }
                }
            }
        };               
    })

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Jul 26, 2019 07:57 AM
on Jul 26, 2019 07:58 AM

Hi skp,

Check the below code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></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://rawgit.com/nnnick/Chart.js/v1.0.2/Chart.min.js"></script>
    <script type="text/javascript" src="https://rawgit.com/jtblin/angular-chart.js/0.8.0/dist/angular-chart.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/jtblin/angular-chart.js/0.8.0/dist/angular-chart.css" />
    <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;
            $scope.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": {
                    tooltipEvents: [],
                    showTooltips: true,
                    tooltipCaretSize: 0,
                    onAnimationComplete: function () {
                        this.showTooltip(this.segments, true);
                    }
                }
            };
        });
    </script>
</head>
<body>
    <div ng-app="MyApp" ng-controller="MyController">
        <canvas id="pie33" options="diskDataJson.options" class="chart chart-pie" data="diskDataJson.data"
            labels="diskDataJson.labels" colours="diskDataJson.colours" legend="true"></canvas>
    </div>
</body>
</html>

Demo

skp
 
on Jul 26, 2019 07:39 PM

The data gets overlapped with the other, so, it looks clumsy. Any other solution?

dharmendr
 
on Jul 29, 2019 03:08 AM

Hi skp,

There is no other option. If there will be more data then data gets overlapped with each other and you cant handle this.

So it is better let the user to hover on it to display the detail line in the below link.

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