How to increase the size of the donut or pie chart and keep the legend next to it in chart JS?

Question

This is how the donut chart looks with the legend

And when I set legend -> display to false this is how the donut chart looks

I want the donut size to be as big as the second photo along with the legend next to it on the right like the first photo.

Please suggest how to go about this

the code is as follows :

CSS :

#monthly_chart{
            border: 0px solid black;
            height: 300px;
            width: 300px;
            margin-left: auto;
            margin-right: auto;
        }

HTML :

<div id="monthly_chart">
    <canvas id="monthly_chart_content"></canvas>
</div>

Javascript :

var ctx = document.getElementById('monthly_chart_content').getContext('2d');
  var chart = new Chart(ctx, {

    type: 'doughnut',

    data: {
        labels: client_data,
        datasets: [{
            label: 'Grey Inwards',
           backgroundColor: ["#1b3862","#0078c6","#00552c","#2d9a27","#fcfa43","#fbbe00","#fe7d00","#e73300","#cb247f","#8636ca","#d3d3d3","#31343d"],
            data: grey_data,

        }]
    },

    // Configuration options go here
    options: {
        aspectRatio: 1,
        responsive: false,
        maintainAspectRatio: true,
        cutoutPercentage: 70,
        legend: {
            display: true,
            position: 'right',
            labels: {
                boxWidth: 20,
                }
            },


    }
});

Answer 1

Value of display property is going to determined the behaviour of your element. By default the value is set to inline. In chart JS when you set the display value to false it equals like displaying it to none. I would also manipulate with canvas height and width as that can have an effect of grouping your elements. As you have provided snippet of HTML and CSS it is hard to exactly determined your layout problem. I hope this helps.