title: Chart.js legend took up too much spaces
body: <p>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:</p>
  
  <p>Another example is this:</p>
  
  <p>If I got more legend, the doughnut chart will eventually becomes smaller and smaller.</p>
  
  <p>I tried to set maxWidth but to no avail.</p>
  
  <pre><code>var options = {
              layout: {
                  padding: {
                    top: 5
                  }
              },
              responsive: true,
              maintainAspectRatio: false,
              legend: {
                  display: true,
                  position: 'right',
                  maxWidth: 100,
                  onClick: null
              },
              animation: {
                  animateScale: true,
                  animateRotate: true
              },
  
          };
  </code></pre>
  
  <p>Any ideas?</p>
  
  <p>I tried to follow this [solution][3] to create a html legend:</p>
  
  <pre><code>&lt;div class="box-body" style="height:350px;"&gt;
  &lt;div class="float-left"&gt;
  &lt;div class="float-left" style="width:70%"&gt;
  
  &lt;canvas id="brandChart" style="position: relative; height: 350px;"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  &lt;div class="float-left" style="width:30%"&gt;
  
  &lt;div id="js-legend" class="chart-legend"&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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.</p>