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

skp

SOLVED CLOSED ACTIVE ANSWERED
User: skp
Posted: on Sep 16, 2019 05:26 AM
Forum: AngularJS
Answer: 1
Views: 9534
Sample Code: Download

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'
                        }
                    }
                }
            }
        };
    })

dharmend...

0 3

Reply
ANSWER
User: dharmendr
Replied: on Sep 16, 2019 07:39 AM
Modified: on Sep 17, 2019 06:47 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></title>
    <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://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" />
    <script type="text/javascript">
        var app = angular.module('MyApp', ["chart.js"]);
        app.controller('MyController', function ($scope) {
            $scope.quantity1 = 55;
            $scope.quantity2 = 46;
            $scope.quantity3 = 39;
            $scope.quantity4 = 71;
            $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": {
                    tooltipEvents: ['mousemove', 'touchstart', 'touchmove'],
                    showTooltips: true,
                    tooltipCaretSize: 0,
                    onAnimationComplete: function () {
                        //this.showTooltip(this.segments, true);
                    },
                    tooltipTemplate: function (item) {
                        return item.label + " value is : " + item.value + "%";
                    }
                }
            };
        });
    </script>
</head>
<body>
    <div ng-app="MyApp" ng-controller="MyController">
        <canvas id="pie33" options="diskDataJson.options" class="chart chart-pie" data="diskDataJson.data"
            labels="diskDataJson.labels" colours="diskDataJson.colours" legend="true"></canvas>
    </div>
</body>
</html>

Demo

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

Company

Explore

Follow us

Contact Us