Display percentage (%) symbol on Pie Chart TootTip using ChartJS 2.3 in AngularJS

The above code is working on the below referenced cdn :

<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" />

But, it is not working on the below referenced cdn :

<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>

Therefore, I'm facing a version compatibility issue in displaying % symbol to data in pie chart in version 2.3.0 chartjs and 1.0.3 angular-chart.js using angularjs

<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" chart-legend="true"></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',
                            //position: 'outside' 
                        }
                    }
                },
                tooltipEvents: ['mousemove', 'touchstart', 'touchmove'],
                showTooltips: true,
                tooltipCaretSize: 0,
                onAnimationComplete: function () {
                    //this.showTooltip(this.segments, true);
                },
                tooltipTemplate: function (item) {
                    return item.value + "%";
                }
            }
        };
    })