title: ChartJS custom legend doughnut separate legend from chart area
body: <p>I'm attempting to separate the <code>Legend</code> from my <code>Chart</code> in a <strong>ChartJS</strong> chart.
  When using the '<em>default</em>' legend, there is no way to control the chart area size and it will get smaller the more items I have in my legend...</p>
  <p>If it is possible to expand the <code>Legend</code> without changing the <code>Chart Area</code> size, I would love to hear about anyone thats done this :)</p>
  <p>The other option which I'm trying, is to create a custom <code>Legend</code> and insert it as innerHTML, and hide the default legend.</p>
  <p>I've tried solutions using the <code>legendCallback</code> such as:</p>
  <p><a href="https://www.py4u.net/discuss/358487" rel="nofollow noreferrer">example 1</a></p>
  <p><a href="https://dev.to/giselamd/creating-a-custom-chart-js-legend-style-50i5" rel="nofollow noreferrer">example 2</a></p>
  <p><a href="https://jsfiddle.net/beaver71/b5hdn9gw/" rel="nofollow noreferrer">example 3</a></p>
  <p>but all of them do no work for me... not sure why, I've done it exactly as they specify.</p>
  <p>I'm thinking it might be the version of <code>ChartJS</code> (I'm using the latest) or some other data issue that is preventing the legend from showing.</p>
  <p><strong>my code:</strong></p>
  <pre><code>var chart1 = document.getElementById('displayVals').getContext('2d');
  var mychart1 = new Chart(chart1, {
      type: 'doughnut',
      data: {
          labels: namelist,
          datasets: [{
              label: 'Doughnut Chart :)',
              data: valuelist,
              backgroundColor: GraphColors,
              borderWidth: 0
          }]
      },
      options: {
          layout: {
              padding: chartPadding
          },
          responsive: true,
          maintainAspectRatio: false,
  
          legend: {
              display: false
          },
          legendCallback: function (chart) {
              var text = [];
              text.push('&lt;ul class=&quot;0-legend&quot;&gt;');
              var ds = chart.data.datasets[0];
              var sum = ds.data.reduce(function add(a, b) { return a + b; }, 0);
              for (var i = 0; i &lt; ds.data.length; i++) {
                  text.push('&lt;li&gt;');
                  var perc = Math.round(100 * ds.data[i] / sum, 0);
                  text.push('&lt;span style=&quot;background-color:' + ds.backgroundColor[i] + '&quot;&gt;' + '&lt;/span&gt;' + chart.data.labels[i] + ' (' + ds.data[i] + ') (' + perc + '%)');
                  text.push('&lt;/li&gt;');
              }
              text.push('&lt;/ul&gt;');
              return text.join(&quot;&quot;);
          },
  
          plugins: {
              title: {
                  display: true,                  
                  text: 'Names',
                  color: titleColor,
                  padding: titlePadding,
                  font: {
                      family: fontFamily,
                      size: fontSize,
                      style: fontStyle
                  }
              }
          }
      }
  })
  
  var myLegendContainer = document.getElementById(&quot;legend1&quot;);
  myLegendContainer.innerHTML = mychart1.generateLegend();
  </code></pre>
  <p><strong>and the html:</strong></p>
  <pre><code>&lt;div class=&quot;container&quot;&gt;
      &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;col-4&quot;&gt;
              &lt;div&gt;
                  &lt;canvas class=&quot;doughnutChart&quot; id=&quot;displayVals&quot;&gt;&lt;/canvas&gt;
              &lt;/div&gt;
              &lt;div id=&quot;legend1&quot;&gt;test&lt;/div&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I can get the word 'test' to display in the , but nothing more...</p>
  <p>Any ideas..?</p>