javascript - Custom Legend ChartJS not showing the text decoration: line through

Question

Many days now I'm in a project and until now I have scored many mini goals on a daily routine. So far, I have implement a chart with ChartJS. This chart has a lot of datasets(over 100) so I forced to build a custom legend for the labels. The result of the legend that I have now is this:

The desirable result that I want is this:

In other words, when I click an object i want to fire up the process as it was the official legend and not the custom that I made.

Now, when I click one object, it works and delete the data from this object and when I click it again it shows up in the chart. The only thing that I want is to put this line when I click and remove it when I click it again.

Here is my code for the custom legend:

legendCallback: function (chart3) {
                                        var legendHTML = [];
                                        legendHTML.push('<ul>');
                                        for (var i = 0; i < chart3.data.datasets.length; i++) {

                                            if (chart3.isDatasetVisible[i]) {
                                                legendHTML.push('<li>');
                                            }
                                            else {
                                                legendHTML.push('<li class="">');
                                            }

                                            legendHTML.push('<span class="chart-color" style="background-color:' + chart3.data.datasets[i].backgroundColor + '"></span>');
                                            legendHTML.push('<li onclick="updateDataset(event, ' + ''' + chart3.legend.legendItems[i].datasetIndex + ''' + ')">' + chart3.data.datasets[i].label + '</span>');
                                            legendHTML.push('</li>');

                                        }
                                        legendHTML.push('</ul>');
                                        return legendHTML.join("");

                                    }

the function for the onClick:

updateDataset = function (e, datasetIndex) {
                                var index = datasetIndex;
                                var ci = e.view.chart3;
                                var meta = ci.getDatasetMeta(index);

                                meta.hidden = meta.hidden === null ? !ci.data.datasets[index].hidden : null;
                                ci.update();
                            };

                            $('li span.chart-color').click(function() {
                                updateDataset($(this).data('index'));
                                $(this).toggleClass('li.hidden');
                            });

the CSS code for the legend:

ul {
  list-style: none;
}

li {
  display: inline-block;
  padding: 0 10px;
  cursor: pointer;
}

li.hidden {
  text-decoration: line-through !important;
}

li span.chart-color {
  border-radius: 5px;
  display: inline-block;
  height: 10px;
  margin-right: 5px;
  width: 10px;

}

#chart3-legend {
  float: left;
  overflow: auto;
}

Answer 1

You try to toggle a class you dont have defined in your style sheet. Classes in CSS start with a dot.

You can also check if the class gets set on the element you intend to set it on. You also might run into issues while trying to use dots in your class name because a dot means that the element has both class names.

So .x.y {styling} means the styling will only be applied to elements that have at least this in there class: class="x y"