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

skp

SOLVED CLOSED ACTIVE ANSWERED
User: skp
Posted: on Sep 20, 2019 12:46 AM
Forum: AngularJS
Answer: 1
Views: 15578
Sample Code: Download

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 + "%";
                }
            }
        };
    })

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 2

Reply
ANSWER
User: dharmendr
Replied: on Sep 20, 2019 06:23 AM
Report

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

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

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

Company

Explore

Follow us

Contact Us