title: ChartJS display legend
body: <p>I'm new in ChartJS and I have some problems with the legend. I have a simple bar chart with just 3 bars like:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;x_panel&quot;&gt;
      &lt;div class=&quot;x_title&quot;&gt;
          &lt;h2&gt;Bar graph&lt;/h2&gt;
          &lt;ul class=&quot;nav navbar-right panel_toolbox&quot; style=&quot;padding-left:5%&quot;&gt;
              &lt;li&gt;
                  &lt;a class=&quot;collapse-link&quot;&gt;&lt;i class=&quot;fa fa-chevron-up&quot;&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a class=&quot;close-link&quot;&gt;&lt;i class=&quot;fa fa-close&quot;&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
          &lt;div class=&quot;clearfix&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;x_content&quot;&gt;
          &lt;canvas id=&quot;mybarChart&quot;&gt;&lt;/canvas&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>for which I'm trying to display the legend bellow the chart like in the attached image <a href="https://i.stack.imgur.com/fsblp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fsblp.png" alt="Example" /></a></p>
  <pre class="lang-js prettyprint-override"><code>var mybarChart = new Chart(ctx, {
      type: 'bar',
      data: {
          labels: [],
          datasets: [{
              label: '# of Votes',
              backgroundColor: &quot;#000080&quot;,
              data: [80]
          }, {
              label: '# of Votes2',
              backgroundColor: &quot;#d3d3d3&quot;,
              data: [90]
          },
          {
              label: '# of Votes3',
              backgroundColor: &quot;#add8e6&quot;,
              data: [45]
          }]
      },
      options: {
          legend: {
              display: true,
              labels: {
                  fontColor: &quot;#000080&quot;,
              }
          },
          scales: {
              yAxes: [{
                  ticks: {
                      beginAtZero: true
                  }
              }]
          }
      }
  });
  </code></pre>
  <p>But my displayed chart is empty :(
  I've also tried displaying the legend by adding another div bellow the canvas and calling it by:</p>
  <pre class="lang-js prettyprint-override"><code>document.getElementById('barlegend').innerHTML = mybarChart.generateLegend();
  </code></pre>
  <p>with the same result :(</p>
  <p>What am I doing wrong?</p>