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

Last Reply 11 months ago By dharmendr

Posted 11 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,
                        pieceLabel: {
                            render: 'value'


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