generateLegend() Chart.JS V2

dpanegassi picture dpanegassi · Sep 14, 2016 · Viewed 9.8k times · Source

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

    Quince picture Quince · Sep 14, 2016

    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>