Display percentage (%) symbol on each slice of Pie Chart on mouseover using ChartJS in AngularJS

Last Reply 6 months ago By dharmendr

Posted 6 months ago

How to add a symbol in pie chart during mouseover in chart.js using angularjs

I want to add percentage (%) symbol for the pie chart at the end of each slice of data.

"data": [$scope.dd[0].Per, $scope.dd[1].Per, $scope.dd[2].Per, $scope.dd[3].Per]

 

<canvas id="pie" class="chart chart-pie" chart-data="diskDataJson.data" chart-labels="diskDataJson.labels" width="200" chart-colours="diskDataJson.colours" chart-options="diskDataJson.options"></canvas>                  

 

    //pie chart
    $scope.dd = null;
    $http.get(apiUrl + "/api/Warehouse/GetDashboardDays")
    .then(function (response) {
        $scope.dd = JSON.parse(response.data);
        $scope.diskDataJson = {
            "data": [$scope.dd[0].Per, $scope.dd[1].Per, $scope.dd[2].Per, $scope.dd[3].Per],
            "labels": [$scope.dd[0].AgeingDays, $scope.dd[1].AgeingDays, $scope.dd[2].AgeingDays, $scope.dd[3].AgeingDays],
            "colours": ['#36a2eb', '#ff6384', '#cc65fe', '#ffce56'],
            "options": {
                //maintainAspectRatio: false,
                title: {
                    display: true,
                    text: 'Based on Quantity(%)',
                    fontSize: 18,
                    position: 'bottom'
                },
                legend: {
                    display: true, position: 'right',
                    labels: {
                        boxWidth: 15,
                        padding: 27     ,
                        pieceLabel: {
                            mode: 'percentage',
                            render: 'value'
                        }
                    }
                }
            }
        };
    })
This question does not have replies that have been liked.