how to customize chartjs

Question

I'm trying to achieve this look for my chartjs:

And here is my chartjs:

Here is my script tag for chartjs:

    var ctx = document.getElementById("myChart");
    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: {
            responsive: true,
            maintainAspectRatio: false,
            legend: {
                position: 'right',
               verticalAlign: 'top',
            }
        },
        tooltips: {
            mode: 'label'
        },
      });

<canvas id="myChart" width="180" height="180"></canvas>

I tried to verticalAlign: 'top' for my labels but it's not working and how to make my chart looks bigger?

after add

responsive: true,
maintainAspectRatio: false,

Answer 1

Your charts are very likely missing the maintainAspectRatio and responsive options along with the width and height settings in the canvas.

These two settings default both to true which makes it look good on mobile but can cause the pie to look extremely small. See for example this: https://jsfiddle.net/adelriosantiago/bzm38s7u/6/

Add the settings,

options: {
  responsive: true,
  maintainAspectRatio: false,
}

Optionally define a width and height in the canvas like <canvas id="myChart" width="400px" height="500px"></canvas>.

You should get a pie that uses most of the space regardless of the size of the container. Like this: https://jsfiddle.net/adelriosantiago/r2h79vto/2/

More info on these settings here: https://www.chartjs.org/docs/latest/general/responsive.html