Monday, May 20, 2024
Homepage · php
 Popular · Latest · Hot · Upcoming
0
rated 0 times [  6] [ 6]  / answers: 1 / hits: 25336  / 7 Years ago, thu, july 27, 2017, 12:00:00

I am using Chart.js v2.6 to output a pie chart. The data is obtained from MySQL database. The chart renders properly, but I need to add arrows to data values as shown in the screenshot below.



Example pie chart with arrows:



pie



Below is my code to output pie chart using Chart.js:



var chartdata_order_status = {

    labels: status,

    datasets: [{

        label: 'Order status',

        backgroundColor: [#00b0f0,#92d050,#ffc000,#ff6dd9],

        data: count_status

    }]

};



var pieGraph = new Chart(ctx3, {

    type: 'pie',

    data: chartdata_country_orders,

    options: {

        pieceLabel: {

            mode: 'value',

            position: 'outside',

            fontColor: '#000',

            format: function (value) {

                return '$' + value;

            }

        },

        title: {

            display: true,

            text: 'Total Sales by Country - Top 5',

            fontSize: 15,

            fontStyle: 'bold'

        },

        legend: {

            display: true,

            position: 'bottom',

        },

    } 

});


I have not included the PHP code for obtaining data from the MySQLtable.


More From » php
 Answers
46

You can now use Chart.PieceLabel.js and get labels outside the slices.s,



DEMO



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',

        segment: true

      }

    };



});




<script src=https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.js></script>

<script src=https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js></script>

<script src=https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.js></script>

<script src=https://rawgit.com/beaver71/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>

[#56954] Tuesday, July 25, 2017, 7 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
lucianod
Add To Favorites
Follow
Total Points: 667
Total Questions: 106
Total Answers: 92
Location: Jordan
Member since Thu, Aug 5, 2021
3 Years ago
lucianod questions
Tue, Feb 9, 21, 00:00, 3 Years ago
Wed, Feb 3, 21, 00:00, 3 Years ago
Thu, Aug 6, 20, 00:00, 4 Years ago
Sat, Jul 25, 20, 00:00, 4 Years ago
Tue, Oct 30, 18, 00:00, 6 Years ago
View All
;