0

This is how the donut chart looks with the legend

enter image description here

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

enter image description here

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,
                }
            },


    }
});
Harshil Shah
  • 39
  • 9

1 Answers1

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.

Dobrosława Torańska
  • 36
  • 2
  • Thank you for your answer. When I tried to play around with the height and width of canvas the donus chart looks stretched and pixelated. Thats why I have kept the div as a square. When I increase the width it just looks stretched. – Harshil Shah May 16 '20 at 12:27
  • I tried your suggestion and played with the div height and width. I have not got the desired result but still better than the small donut which was originally shown. Thanks for your help – Harshil Shah May 16 '20 at 12:52
  • No problem. I will try to replicate your code as well, but I will have to assume some attributes, which may not be coherent with your code. It would be helpful if you could write what is the desired size of the doughnut and legend size in px f.e. – Dobrosława Torańska May 16 '20 at 13:17
  • the doughnut size would be 400px by 400px and the legend size is not specfic, it should be visible and on the right side of the donut, like 2 divs placed next to each other when float is left – Harshil Shah May 16 '20 at 13:23