ASPForums.Net RSS Feedhttp://www.aspforums.net/Handlers/RSS.ashxLatest additions to the content that appears on ASPForums.Net(c) 2019 www.aspforums.com. All rights reserved.Display data on each slice of Pie Chart using ChartJS in AngularJS<p>Hi&nbsp;skp,</p> <p>Check the below code.</p> <p><strong><span style="text-decoration: underline;">HTML</span></strong></p> <div class="demo_block"> <pre class="brush: html">&lt;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://rawgit.com/nnnick/Chart.js/v1.0.2/Chart.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://rawgit.com/jtblin/angular-chart.js/0.8.0/dist/angular-chart.min.js&#34;&gt;&lt;/script&gt; &lt;link rel=&#34;stylesheet&#34; type=&#34;text/css&#34; href=&#34;https://cdn.rawgit.com/jtblin/angular-chart.js/0.8.0/dist/angular-chart.css&#34; /&gt; &lt;script type=&#34;text/javascript&#34;&gt; var app = angular.module(&#39;MyApp&#39;, [&#34;chart.js&#34;]); app.controller(&#39;MyController&#39;, function ($scope) { $scope.quantity1 = 55; $scope.quantity2 = 46; $scope.quantity3 = 39; $scope.quantity4 = 71; $scope.diskDataJson = { &#34;data&#34;: [$scope.quantity1, $scope.quantity2, $scope.quantity3, $scope.quantity4], &#34;labels&#34;: [&#34;0-30 days&#34;, &#34;31-60 days&#34;, &#34;61-90 days&#34;, &#34;91 days &amp; above&#34;], &#34;colours&#34;: [&#39;#36A2EB&#39;, &#39;#FF6384&#39;, &#39;#CC65FE&#39;, &#39;#FFCE56&#39;], &#34;options&#34;: { tooltipEvents: [], showTooltips: true, tooltipCaretSize: 0, onAnimationComplete: function () { this.showTooltip(this.segments, true); } } }; }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div ng-app=&#34;MyApp&#34; ng-controller=&#34;MyController&#34;&gt; &lt;canvas id=&#34;pie33&#34; options=&#34;diskDataJson.options&#34; class=&#34;chart chart-pie&#34; data=&#34;diskDataJson.data&#34; labels=&#34;diskDataJson.labels&#34; colours=&#34;diskDataJson.colours&#34; legend=&#34;true&#34;&gt;&lt;/canvas&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre> </div> <p><a class="demo button orange btn btn-red">Demo</a></p>https://www.aspforums.net:443/Threads/733150/Display-data-on-each-slice-of-Pie-Chart-using-ChartJS-in-AngularJS/https://www.aspforums.net:443/Threads/733150/Display-data-on-each-slice-of-Pie-Chart-using-ChartJS-in-AngularJS/Fri, 26 Jul 2019 07:57:03 GMTDisplay data on each slice of Pie Chart using ChartJS in AngularJS<p>The data gets overlapped with the other, so, it looks clumsy. Any other solution?</p>https://www.aspforums.net:443/Threads/733150/Display-data-on-each-slice-of-Pie-Chart-using-ChartJS-in-AngularJS/https://www.aspforums.net:443/Threads/733150/Display-data-on-each-slice-of-Pie-Chart-using-ChartJS-in-AngularJS/Fri, 26 Jul 2019 19:39:32 GMTDisplay data on each slice of Pie Chart using ChartJS in AngularJS<p>Hi&nbsp;skp,</p> <p>There is no other option. If there will be more data then&nbsp;data gets overlapped with each other and you cant handle this.</p> <p>So it is better let the user to hover on it to display the detail line in the below link.</p> <h1 class="header"><a class="title f16" href="https://www.aspforums.net/Threads/153752/Display-Show-Legend-in-Pie-Chart-using-ChartJS-in-AngularJS/">Display (Show) Legend in Pie Chart using ChartJS in AngularJS</a></h1>https://www.aspforums.net:443/Threads/733150/Display-data-on-each-slice-of-Pie-Chart-using-ChartJS-in-AngularJS/https://www.aspforums.net:443/Threads/733150/Display-data-on-each-slice-of-Pie-Chart-using-ChartJS-in-AngularJS/Mon, 29 Jul 2019 03:08:22 GMT