score:3

Accepted answer

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>

score:1

.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();

Related Query

More Query from same tag