How to set legend position in pie - Javascript Chart.js

Javascript examples for Chart.js:Pie Chart

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

Description

How to set legend position in pie

Demo Code

ResultView the demo in separate window 

<!doctype html>
<html>
   <head> 
      <title>Pie Chart</title> 
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
      <style type="text/css">

body {// w w  w . j  ava 2s .co m
   background-color: #1f1d1d;
   font-family: Roboto, Myriad Pro, Segoe UI;
   width: 800px;
   height: 800px;
}


      </style> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script> 
   </head> 
   <body> 
      <div id="canvas-holder" style="width:30%;background-color: #4f4f4f; height:35%;"> 
         <canvas id="chart-area"></canvas> 
         <p style="text-align:center; color: #fff;font-size: 14px;">
            <i>Browse by Channel</i>
         </p> 
      </div> 
      <script>
    var config = {
        type: 'pie',
        data: {
            labels: ["USSD", "URP", "MyTsel App", "Chatbot"],
            datasets: [{
                backgroundColor: ['rgb(12, 146, 204)',
                    'rgb(255, 67, 0)',
                    'rgb(131, 0, 255)',
                    'rgb(250, 255, 0)'
                ],
                borderColor: ['rgb(12, 146, 204)',
                    'rgb(255, 67, 0)',
                    'rgb(131, 0, 255)',
                    'rgb(250, 255, 0)'
                ],
                data: [73, 17, 3, 7],
            }]
        },
        options: {
            responsive: true,
            legend: {
                position: 'bottom',
                labels: {
                    fontColor: "white",
                    boxWidth: 20,
                    padding: 20
                }
            }
        }
    };
    window.onload = function() {
        var ctx = document.getElementById('chart-area').getContext('2d');
        window.myPie = new Chart(ctx, config);
    };
    
      </script>  
   </body>
</html>

Related Tutorials