title: generateLegend() Chart.JS V2
body: <p>I´m trying to customize my legend</p>
  
  <p>I´m using the .generateLegend() to get the legend in a html way</p>
  
  <p>this is what the function gave me</p>
  
  <pre><code>console.log(myBarChart.generateLegend());
  
  &lt;ul class="1-legend"&gt;&lt;li&gt;&lt;span style="background-color:#006666"&gt;&lt;/span&gt;SECRETARIA MUNICIPAL DE DESENVOLVIMENTO URBANO &lt;/li&gt;
      &lt;li&gt;&lt;span style="background-color:#339966"&gt;&lt;/span&gt;SECRETARIA MUNICIPAL DE SAUDE&lt;/li&gt;
      &lt;li&gt;&lt;span style="background-color:#3366ff"&gt;&lt;/span&gt;SETOR DE RH&lt;/li&gt;
      &lt;li&gt;&lt;span style="background-color:#66ccff"&gt;&lt;/span&gt;SECRETARIA MUNICIPAL DE CULTURA, TURISMO, ESPORTE E LAZER &lt;/li&gt;
      &lt;li&gt;&lt;span style="background-color:#ffcc66"&gt;&lt;/span&gt;SETOR DE CADASTRO DE IMOVEIS&lt;/li&gt;
      &lt;li&gt;&lt;span style="background-color:#ff6666"&gt;&lt;/span&gt;SECRETARIA MUNICIPAL DE DESENVOLVIMENTO ECONÔMICO, TRABALHO E MEIO AMBIENTE&lt;/li&gt;
  &lt;li&gt;&lt;span style="background-color:#994d00"&gt;&lt;/span&gt;SETOR AGILIZA&lt;/li&gt;&lt;/ul&gt;
  </code></pre>
  
  <p>Even the span style has the background color it shows this way in page:
      <li>SECRETARIA MUNICIPAL DE DESENVOLVIMENTO URBANO </li>
          <li>SECRETARIA MUNICIPAL DE SAUDE</li>
          <li>SETOR DE RH</li>
          <li>SECRETARIA MUNICIPAL DE CULTURA, TURISMO, ESPORTE E LAZER </li>
          <li>SETOR DE CADASTRO DE IMOVEIS</li>
          <li>SECRETARIA MUNICIPAL DE DESENVOLVIMENTO ECONÔMICO, TRABALHO E MEIO AMBIENTE</li>
      <li>SETOR AGILIZA</li></p>
  
  <p>How can i show the color passed in the span style tag in the HTML?</p>
  
  <p>I tried to make this way too but i can´t understand how to get it work (<a href="https://stackoverflow.com/questions/37005297/custom-legend-with-chartjs-v2-0">Custom Legend with ChartJS v2.0)</a></p>
  
  <p>Thx for your time!</p>
  
  <p><strong>UPDATE 1</strong></p>
  
  <p>As @Quince pointed i need to change the '1-legend' that the function gave to me</p>
  
  <p>To remove the 1-legend of class name i used</p>
  
  <pre><code>var s = myBarChart.generateLegend().replace(/\"1-legend"/g, 'legend');
  </code></pre>