title: Chartjs Bar Chart Legend
body: <p>I am having problems getting a legend to show up on the bar graph that I have created using chartjs.  The documentation talks about a legend template, but I can't seem to find a good example of how to implement this into the graph.  Below is the code I am using to generate the graph.</p>
  
  <pre><code>&lt;div style="width: 100%;"&gt;
    &lt;canvas id="canvas" height="450" width="600"&gt;&lt;/canvas&gt;
  &lt;div id="legendDiv"&gt;&amp;nbsp;&lt;/div&gt;
  &lt;/div&gt;
  &lt;script&gt;
      var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
  
      var barChartData = {
          labels : ["Item 1","Item 2","Item 3","Item 4","Item 5","Item 6","Item 7","Item 8","Item 9","Item 10","Item 11","Item 12","Item 13","Item 14","Item 15","Item 16","Item 17"]
          datasets : [
              {
                  fillColor : "rgba(166,166,166,0.5)",
                  strokeColor : "rgba(166,166,166,0.8)",
                  highlightFill: "rgba(166,166,166,0.75)",
                  highlightStroke: "rgba(166,166,166,1)",
                  data : [10,4,3,4,3,6,4,1,10,3,3,10,2,4,10,3,4]
  
               },
              {
                  fillColor : "rgba(196,64,54,0.5)",
                  strokeColor : "rgba(196,64,54,0.8)",
                  highlightFill : "rgba(196,64,54,0.75)",
                  highlightStroke : "rgba(196,64,54,1)",
                  data : [6,3,2,3,2,3,4,1,8,3,3,6,1,3,8,3,4]
              }
          ]
  
      }
      window.onload = function(){
          var ctx = document.getElementById("canvas").getContext("2d");
          window.myBar = new Chart(ctx).Bar(barChartData, {
          responsive : true
           });
       }
  
       &lt;/script&gt;
   &lt;div&gt;
  </code></pre>