Displaying data on each slice of pie chart in chartjs using angularjsltscript type34textjavascript34 src34httpscdnjscloudflarecomajaxlibsangularjs178angularminjs34gtltscriptgtltscript type34textjavascript34 src34httpscdnjscloudflarecomajaxlibsChartjs230Chartminjs34gtltscriptgtltscript type34textjavascript34 src34httpscdnjscloudflarecomajaxlibsangularchartjs103angularchartminjs34gtl

Hi skpCheck the below codeHTMLlthtml xmlns34httpwwww3org1999xhtml34gtltheadgt lttitlegtlttitlegt ltscript type34textjavascript34 src34httpscdnjscloudflarecomajaxlibsangularjs178angularminjs34gtltscriptgt ltscript type34textjavascript34 src34httpsrawgitcomnnnickChartjsv102Chartminjs34gtltscriptgt ltscript type34textjavascript34 src34httpsrawgitcomjtblinangularchartjs080distangularchartminjs34gtltscriptgt ltlink rel34stylesheet34 type34textcss34 href34httpscdnrawgitcomjtblinangularchartjs080distangularchartcss34 gt ltscript type34textjavascript34gt var app angularmodule39MyApp39 34chartjs34 appcontroller39MyController39 function scope scopequantity1 55 scopequantity2 46 scopeq

Hi skpThere is no other option If there will be more data then data gets overlapped with each other and you cant handle thisSo it is better let the user to hover on it to display the detail line in the below linkDisplay Show Legend in Pie Chart using ChartJS in AngularJS

Display data on each slice of Pie Chart using ChartJS in AngularJS

skp

SOLVED CLOSED ACTIVE ANSWERED
User: skp
Posted: on Jul 26, 2019 05:48 AM
Forum: AngularJS
Answer: 2
Views: 5053

Displaying data on each slice of pie chart in chart.js using angularjs

<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>
<canvas id="pie" class="chart chart-pie" chart-data="diskDataJson.data" chart-labels="diskDataJson.labels" width="238%" chart-colours="diskDataJson.colours" chart-options="diskDataJson.options"></canvas>

$scope.dd = null;
    $http.get(apiUrl + "/api/Warehouse/GetDashboardDays")
    .then(function (response) {
        $scope.dd = JSON.parse(response.data);
        $scope.quantity1 = $scope.dd[0].Qty;
        $scope.quantity2 = $scope.dd[1].Qty;
        $scope.quantity3 = $scope.dd[2].Qty;
        $scope.quantity4 = $scope.dd[3].Qty;        
        $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": {
                title: {
                    display: true,
                    text: 'Based on Quantity',
                    fontSize: 18,                       
                    position: 'top'
                },
                legend: {
                    display: true, position: 'right',
                    labels: {
                        boxWidth: 15,
                        padding:20,
                        pieceLabel: {
                            render: 'value'
                        }
                    }
                }
            }
        };               
    })

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

dharmend...

0 2

Reply
ANSWER
User: dharmendr
Replied: on Jul 26, 2019 07:57 AM
Modified: on Jul 26, 2019 07:58 AM
Report

Hi skp,

Check the below 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: [],
                    showTooltips: true,
                    tooltipCaretSize: 0,
                    onAnimationComplete: function () {
                        this.showTooltip(this.segments, true);
                    }
                }
            };
        });
    </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

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

Display data on each slice of Pie Chart using ChartJS in AngularJS

Company

Explore

Follow us

Contact Us