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

Last Reply 2 months ago By dharmendr

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

 

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