Pie chart using chart.js

Question

I was trying to show the data values using the arrow using the chartjs as shown in the the above image. But, I did not find any documentation for it. Please, help!

yes, I am familiar that it is possible with high chart. But, the solution required using the chartjs. @Sajeetharan — Pooja Thapa
– Pooja Thapa, Commented Jan 10, 2018 at 9:27

beaver · Accepted Answer · 2018-01-10 15:44:02Z

1

Using Chart.PieceLabel.js plugin you can obtain not exactly what's expected but something similar: labels outside the slices.

angular.module("app", ["chart.js"]).controller("ChartCtrl", function($scope) {

    $scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
    
    $scope.data = [65, 59, 80, 81, 56, 55, 40];
    
    $scope.options = {
      pieceLabel: {
        render: 'label',
        fontColor: '#000',
        position: 'outside'
      }
    };
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.js"></script>
<script src="https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.js"></script>
<script src="https://rawgit.com/emn178/Chart.PieceLabel.js/master/build/Chart.PieceLabel.min.js"></script>

<div ng-app="app" ng-controller="ChartCtrl">
  <canvas id="pie" class="chart chart-pie"
         chart-data="data" chart-labels="labels" chart-options="options">
  </canvas> 
</div>

Update:

With a fork of Chart.PieceLabel.js plugin labels have also callout arrows.

Check the fiddle updated: https://jsfiddle.net/beaver71/8ytvggcL/

edited Jan 10, 2018 at 15:44

answered Jan 10, 2018 at 10:38

beaver

17.8k2 gold badges43 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pooja Thapa Over a year ago

Thanks! I it would help to a extend but looking forward for the data point with arrow as shown in image.

Pooja Thapa Over a year ago

Hey! Thanks alot! Really appreciate your effort! That is what I exactly needed!

Collectives™ on Stack Overflow

Pie chart using chart.js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related