Question

158

Chart.js legend took up too much spaces

rated 0 times [ 165] [ 7] / answers: 1 / hits: 36266 / 7 Years ago, fri, august 11, 2017, 12:00:00

I was having some problem with chart.js legend. The legend with long text took up too much spaces which resulting in the reduce in the size of my pie chart:

Another example is this:

If I got more legend, the doughnut chart will eventually becomes smaller and smaller.

I tried to set maxWidth but to no avail.

var options = {

            layout: {

                padding: {

                  top: 5

                }

            },

            responsive: true,

            maintainAspectRatio: false,

            legend: {

                display: true,

                position: 'right',

                maxWidth: 100,

                onClick: null

            },

            animation: {

                animateScale: true,

                animateRotate: true

            },



        };

Any ideas?

I tried to follow this [solution][3] to create a html legend:

<div class=box-body style=height:350px;>

<div class=float-left>

<div class=float-left style=width:70%>



<canvas id=brandChart style=position: relative; height: 350px;></canvas>

</div>

<div class=float-left style=width:30%>



<div id=js-legend class=chart-legend>

</div>



</div>

</div>

It did restricted the width for legend, but then this lead to another problem which is after I collapsed and expanded the div, the canvas just went missing and I am only left with the legend div.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jennifer

Add To Favorites

Follow

Total Points: 517

Total Questions: 110

Total Answers: 104

Location: New Caledonia

Member since Fri, Sep 11, 2020

4 Years ago

answered 7 Years ago luna · Accepted Answer

First off, set canvas's width and height using it's native attributes (do not use style attribute), like so :

<canvas id=brandChart width=700 height=350></canvas>

^{note: width should be twice the height}

Then, set responsive property to false in your chart options, as such :

options: {

   responsive: false,

   ...

}

ᴅᴇᴍᴏ

var chart = new Chart(brandChart, {

   type: 'doughnut',

   data: {

      labels: ['Etronin Home Appliances Service & trading Pte Ltd', 'Giant'],

      datasets: [{

         data: [30, 70],

         backgroundColor: ['#2196f3', '#4caf50']

      }]

   },

   options: {

      responsive: false,

      legend: {

         display: true,

         position: 'right',

         onClick: null

      },

   }

});

<script src=https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js></script>

<canvas id=brandChart width=700 height=350></canvas>