title: How to add legend for a bar chart with different colors in dc.js?
body: <p>Below is the code snippet for a barchart with colored bars:</p>
  <pre><code>    var Dim2 = ndx.dimension(function(d){return [d.SNo, d.something ]});
      var Group2 = Dim2.group().reduceSum(function(d){ return d.someId; });
          
      var someColors = d3.scale.ordinal().domain([&quot;a1&quot;,&quot;a2&quot;,&quot;a3&quot;,&quot;a4&quot;,&quot;a5&quot;,&quot;a6&quot;,&quot;a7&quot;,&quot;a8&quot;])
  .range([&quot;#2980B9&quot;,&quot;#00FFFF&quot;,&quot;#008000&quot;,&quot;#FFC300&quot;,&quot;#FF5733&quot;,&quot;#D1AEF1&quot;,&quot;#C0C0C0&quot;,&quot;#000000&quot;]);
          
           barChart2
                      .height(250)
                      .width(1000)
                      .brushOn(false)
                      .mouseZoomable(true)
                      .x(d3.scale.linear().domain([600,800]))
                      .elasticY(false)
                      .dimension(Dim2)
                      .group(Group2)
                      .keyAccessor(function(d){ return d.key[0]; })
                      .valueAccessor(function(d){return d.value; })
                      .colors(someColors)
                      .colorAccessor(function(d){return d.key[1]; });
  </code></pre>
  <p>How do I add a legend to this chart?</p>
  <p><img src="https://i.stack.imgur.com/SHeRc.png" alt="BarChart:" /></p>