How to remove legend text strike on hide?

[pbelskiy]

Hello! Thanks for awesome package!

But how to change or remove strike style on legend when hide graph? Because it's unreadable.

[dmityabondar]

@pbelskiy Hello! Yep, the documentation on this is not entirely clear. But you can disable the standard legend and write a custom one.

I found this solution here: https://www.youtube.com/watch?v=DWb-WSKFGic&ab_channel=ChartJS

Simple example:

<div>
  <div id="chart-legend"></div>
  <canvas id="chart"></canvas>
</div>

<script>
  const colors = ['#68B64E', '#fe6600'];

  const config = {
    type: 'line',
    data: {
      ...other_params, // Here your setting
      datasets: [
        {
          data: data1,
          borderColor: colors[0],
          label: "Label 1"
        },
        {
          data: data2,
          borderColor: colors[1],
          label: "Label 2"
        }
      ]
    },
    options: {
      plugins: {
        legend: {
          display: false, // Disable standart legend
        }
      }
    }
  };

  const myChart = new Chart(
    document.getElementById('chart'),
    config
  );

  function createCheckbox() {
    const legend = document.getElementById('chart-legend');

    myChart.data.datasets.forEach((dataset, index) => {
      // Create checkboxes
      const checkbox = document.createElement('input');
      checkbox.type = 'checkbox';
      checkbox.name = dataset.label;
      checkbox.value = index;
      checkbox.id = `dataset${index}`;
      checkbox.classList.add('chart-checkbox');
      checkbox.checked = true;

      // Create labels
      const label = document.createElement('label');
      label.style.color = checkboxColors[index];
      label.appendChild(checkbox);
      label.appendChild(document.createTextNode(dataset.label));
      legend.appendChild(label);
    });
  }

  function handleCheckboxChange(chart, element) {
    const index = element.target.value;
    if (chart.isDatasetVisible(index)) {
      chart.hide(index);
    } else {
      chart.show(index);
    }
  }

  createCheckbox();

  const checkboxes = document.querySelectorAll('.chart-checkbox');
  checkboxes.forEach(checkbox => {
    checkbox.addEventListener('click', (e) => {
      handleCheckboxChange(myChart, e);
    });
  });
</script>