Set legend position - Javascript Chart.js

Javascript examples for Chart.js:Legend

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

Description

Set legend position

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){/*from  www  .ja v  a 2  s. c o  m*/
var ctx = document.getElementById("chartPic").getContext('2d');
var chart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: ["red", "green", "blue"],
        datasets: [{
            label: 'Number of votes',
            data: [1, 1, 1],
            backgroundColor: ['red', 'green', 'blue'],
            borderColor: ['green', 'blue', 'red'],
            borderWidth: 1
        }]
    },
    options: {
        title: {
            display: true,
            text: "chart"
        },
        legend: {
            position: 'bottom'
        }
    }
});
    }

      </script> 
   </head> 
   <body> 
      <canvas id="chartPic"></canvas>  
   </body>
</html>

Related Tutorials