Chartjs-Is there any way I can customize my chartjs

by

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>

Leave a comment