[Chartjs]-Chart.js: change title/legend positon to right

by

4👍

✅

You could set legend­‘s position property to right in your chart options, to place the legend at the right side of the chart …

options: {
   legend: {
      position: 'right'
   },
   ...
}

ᴅᴇᴍᴏ

let ctx = document.getElementById('canvas').getContext('2d');
let chart = new Chart(ctx, {
   type: 'bar',
   data: {
      labels: [1, 2, 3, 4, 5],
      datasets: [{
         label: 'Votes',
         data: [1, 2, 3, 4, 5],
         backgroundColor: 'rgba(255, 0, 0, 0.2)'
      }, {
         label: 'Score',
         data: [1, 2, 3, 4, 5],
         backgroundColor: 'rgba(0, 255, 0, 0.2)'
      }]
   },
   options: {
      legend: {
         position: 'right'
      },
      scales: {
         yAxes: [{
            ticks: {
               beginAtZero: true
            }
         }]
      }
   }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="canvas"></canvas>

Leave a comment