Solution 1 :

The position of the legend can be defines through the options position and align as follows:

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

Please have a look at your amended code below.

const labels_most_forked = ['HTML', 'TypeScript', 'Ruby', 'Others', 'JavaScript'];
const values_most_forked = [13, 7, 5, 1, 1];

var myChart = new Chart('myChart', {
  type: 'pie',
  data: {
    labels: labels_most_forked,
    datasets: [{
      label: '# of Votes',
      data: values_most_forked,
      backgroundColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 1
    }]
  },
  options: {   
    legend: {
      position: 'right',
      align: 'start'
    }
  }
});
canvas {
  max-width: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart"></canvas>

Problem :

So i’m trying to achieve this look for my Chart:
enter image description here

and this is my current chart look like:
enter image description here

here is my script tag:

    var myChart = new Chart(ctx, {
        type: 'pie',
        data: {
            labels: labels_most_forked,
            datasets: [{
                label: '# of Votes',
                data: values_most_forked,
                backgroundColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderColor: [
                    'rgba(255,99,132,1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            layout: {
                padding: {
                    left: 0,
                    right: 50,
                    top: 0,
                    bottom: 0
                },
            }
        }
    });

How can I achieve this look for my chartjs ?
Appreciate every answer.

Comments

Comment posted by nathannewyen

Thank you that solved my problem but what if my label is too long and it make my chart smaller how can I shortcut my label? Example: from this

Comment posted by generateLabels

@nathannewyen: In order to obtain abbreviated legend labels, you’ll probably have to define a

By