Chart.js: Show labels outside pie chart - Javascript Chart.js

Javascript examples for Chart.js:Pie Chart

  1. HOME
  2. Javascript
  3. Chart.js
  4. Pie Chart

Description

Chart.js: Show labels outside pie chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript">
    window.onload=function(){/*from w  w w  .j  a  v a 2 s . c  o  m*/
var randomScalingFactor = function() {
    return Math.round(Math.random() * 100);
};
var ctx = document.getElementById("chart-area").getContext("2d");
var myDoughnut = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: ["January", "February", "March", "April", "May"],
        datasets: [{
            data: [
                250,
                50,
                5,
                4,
                1,
            ],
            backgroundColor: ['#ff3d67', '#ff9f40', '#ffcd56', '#4bc0c0', '#999999'],
            borderColor: 'white',
            borderWidth: 5,
        }]
    },
    showDatapoints: true,
    options: {
        tooltips: {
            enabled: false
        },
        pieceLabel: {
            render: 'label',
            arc: true,
            fontColor: '#000',
            position: 'outside'
        },
        responsive: true,
        legend: {
            position: 'bottom',
        },
        title: {
            display: true,
            text: 'Testing',
            fontSize: 20
        },
        animation: {
            animateScale: true,
            animateRotate: true
        }
    }
});
    }

      </script> 
   </head> 
   <body> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> 
      <script src="https://cdn.rawgit.com/emn178/Chart.PieceLabel.js/master/build/Chart.PieceLabel.min.js"></script> 
      <canvas id="chart-area"></canvas>  
   </body>
</html>

Related Tutorials