chartJS generateLegend()

Question

I'm new in using chart JS, I am trying to customize the legends. I try the example that I found but when I try to make my own it shows this error.

I want to display the legends in separate like in this.

here's my code.

var myLegendContainer = document.getElemenById('legend');
var graphTarget = $("#line-chartcanvas");
                    graphTarget.attr('height',80);
                        barGraphQty = new Chart(graphTarget, {
                        type: 'bar',
                        data: chartdata,
                        options: {
                            legend: {
                            display: false
                            },
                        }
                    });
                    
                    myLegendContainer.innerHTML = barGraphQty.generateLegend();
                    
                });

HTML code

<div class="col-md-4">
            <div class="box">
                <div class="box-header with-border">
                    <h3 class="box-title">Legends</h3>
    
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                        <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                    </div>
                
                </div>
                <div class="box-body">
                    <div id="legend"></div>   
                </div>
            </div>
        </div>

CSS

[class$="-legend"] {
  list-style: none;
  cursor: pointer;
  padding-left: 0;
}

[class$="-legend"] li {
  display: block;
  padding: 0 5px;
}

[class$="-legend"] li.hidden {
 display:block !important;
  text-decoration: line-through !important;
}

[class$="-legend"] li span {
  border-radius: 5px;
  display: inline-block;
  height: 10px;
  margin-right: 10px;
  width: 10

please help me.

uminder · Answer 1 · 2020-08-09T08:56:13.717

Without seeing your code, it's almost impossible to tell why exactly this TypeError occurs. From the posted image, I deduct however that the use of generatelabels is not the ideal choice to achieve what you need.

What you really need is generating custom HTML legend using legendCallback together with some CSS.

Please take a look at the following posts to see how this could be done:

chartJS generateLegend()

1 Answers1