score:5

Accepted answer

so, i got it right following this post

here is the code of the post

var weightchartoptions = {
        responsive: true,
        legendcallback: function(chart) {
            console.log(chart);
            var legendhtml = [];
            legendhtml.push('<table>');
            legendhtml.push('<tr>');
            for (var i=0; i<chart.data.datasets.length; i++) {
                legendhtml.push('<td><div class="chart-legend" style="background-color:' + chart.data.datasets[i].backgroundcolor + '"></div></td>');                    
                if (chart.data.datasets[i].label) {
                    legendhtml.push('<td class="chart-legend-label-text" onclick="updatedataset(event, ' + '\'' + chart.legend.legenditems[i].datasetindex + '\'' + ')">' + chart.data.datasets[i].label + '</td>');
                }                                                                              
            }                                                                                  
            legendhtml.push('</tr>');                                                          
            legendhtml.push('</table>');                                                       
            return legendhtml.join("");                                                        
        },                                                                                     
        legend: {                                                                              
            display: false                                                                     
        }                                                                                      
    };                                                                                         

    // show/hide chart by click legend
    updatedataset = function(e, datasetindex) {
        var index = datasetindex;
        var ci = e.view.weightchart;
        var meta = ci.getdatasetmeta(index);

        // see controller.isdatasetvisible comment
        meta.hidden = meta.hidden === null? !ci.data.datasets[index].hidden : null;

        // we hid a dataset ... rerender the chart
        ci.update();
    };

    var ctx = document.getelementbyid("weightchart").getcontext("2d");
    window.weightchart = new chart(ctx, {
        type: 'line',
        data: weightchartdata, 
        options: weightchartoptions
    });
    document.getelementbyid("weightchartlegend").innerhtml = weightchart.generatelegend();
};

the secret here is the legendcallback in line 3

in this example he uses line chart, in my case i used bars

so i changed the table tags for list tags for me worked better this way

he emphasizes to put "window" before the variable who gets the "= new chart"

window.weightchart = new chart(ctx, {.....

then with a little of css you can get a nice legend with a hide/show option


Related Query

More Query from same tag