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

Last Reply 24 days ago By dharmendr

Posted 24 days ago

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 + "%";
                }
            }
        };
    })
You are viewing reply posted by: dharmendr 24 days ago.
Posted 24 days ago

Hi skp,

Check this example. Now please take its reference and correct your code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Tooltip % Pie Chart</title>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <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>
    <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.dd = [{ Per: 55, AgeingDays: '0-30 days' },
                        { Per: 46, AgeingDays: '31-60 days' },
                        { Per: 39, AgeingDays: '61-90 days' },
                        { Per: 71, AgeingDays: '91 days & above'}]
            $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": {
                    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' }
                        }
                    },
                    tooltips: {
                        callbacks: {
                            label: function (tooltipItem, data) {
                                return data.labels[tooltipItem.index] + ' : ' +
                                       data.datasets[0].data[tooltipItem.index] + ' %';
                            }
                        }
                    }
                }
            };
        });
    </script>
    <canvas id="pie" class="chart chart-pie" chart-data="diskDataJson.data" chart-labels="diskDataJson.labels"
        width="200" chart-colors="diskDataJson.colours" chart-options="diskDataJson.options"
        chart-legend="true"></canvas>
</body>
</html>

Demo