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

Last Reply 21 days ago By dharmendr

Posted 24 days ago

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

 

Posted 23 days ago Modified on 23 days ago

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


Posted 21 days ago

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