generateLegend() Chart.JS V2
<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>