generateLegend() Chart.JS V2 - dom

Question

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

Answer 1

This can be achieved through some css. First thing though you css class 1-legend is not valid, css class names can not start with a number (good explanation on what is allowed here)
But once that is fixed you can just style the spans how you want to dispaly here is an example
.legend {
list-style: none;
}
.legend li span {
width: 10px;
height: 10px;
display: inline-block;
margin-right: 10px;
border-radius: 10px;
}
<ul class="legend">
<li><span style="background-color:#006666"></span>SECRETARIA MUNICIPAL DE DESENVOLVIMENTO URBANO </li>
<li><span style="background-color:#339966"></span>SECRETARIA MUNICIPAL DE SAUDE</li>
<li><span style="background-color:#3366ff"></span>SETOR DE RH</li>
<li><span style="background-color:#66ccff"></span>SECRETARIA MUNICIPAL DE CULTURA, TURISMO, ESPORTE E LAZER </li>
<li><span style="background-color:#ffcc66"></span>SETOR DE CADASTRO DE IMOVEIS</li>
<li><span style="background-color:#ff6666"></span>SECRETARIA MUNICIPAL DE DESENVOLVIMENTO ECONÔMICO, TRABALHO E MEIO AMBIENTE</li>
<li><span style="background-color:#994d00"></span>SETOR AGILIZA</li>
</ul>

Answer 2

.legend {
margin-top: 30px;
ul {
list-style: none;
padding: 0;
li {
padding-left: 28px;
position: relative;
font-size: 28px;
font-weight: 600;
span {
width: 20px;
height: 20px;
position: absolute;
left: 0px;
top: 3px;
border-radius: 50%;
}
}
}
}
Additionally, you can paste ul into your own structure by:
document.getElementById('name-of-your-element').innerHTML = myBarChart.generateLegend();