Custom Bar Legend, how to read in generateLabels() the getDatavisibility correctly on toggle

[Udemology]

I am trying to create a custom bar legend which basically shows for each bar (data Index) a legend item instead of the dataset. Similar to the legend of the Pie/Doughnut Chart. Everything works except the strike-through effect.

I struggle to with getDatavisibility to create the strike-throught effect. I am not able to make it read properly. By default is creates a strike-through effect onload. And when clicking on the first bar it will remove strike-through on all. But when I click on the other legendItems it does not read the visibility.

Most likely I am missing something obvious. But currently struggle to see it.

See Fiddle: https://jsfiddle.net/6b7wpfxr/

See code below

        plugins: {
          legend: {
            onClick: (evt, legendItem, legend) => {
              const index = legend.chart.data.labels.indexOf(legendItem.text);
              legend.chart.toggleDataVisibility(index); // creates bar toggle
              legend.chart.getDataVisibility(index) // strikethought
              legend.chart.update();
            },
            labels: {
              generateLabels: (chart) => {
                console.log(chart.getDataVisibility(0))
                return chart.data.labels.map((label, index) => 
                  ({
                    text: label,
                    fillStyle: chart.data.datasets[0].backgroundColor[index],
                    strokeStyle: chart.data.datasets[0].borderColor[index],
                    hidden: chart.getDataVisibility(index), // *****this does not work, this code seems to be my issue*****
                    fontColor: '#666'
                  })
                )
              }
            }
          }
        },

[Udemology]

Sorry, I already figured it out. Solution was an if statement to revert the value from false to true. Cannot believe I missed that. -_- .