CODEWITHSUNDEEP
chart.js
Pit Digger
Pit Digger

Reputation: 9790

Chartjs legend onclick doesn't strikethrough

As you can see in example below, clicking on a legend is not striking though the legend. What is causing this ?

  const autocolors = window['chartjs-plugin-autocolors'];

        Chart.register(autocolors);

        var options = {
          type: 'line',
          data: {
            labels: ["0", "1", "2", "3", "4", "5"],
            datasets: [{
                label: '# of Votes',
                data: [12, 19, 3, 5, 2, 3]
              },
              {
                label: '# of Points',
                data: [7, 11, 5, 8, 3, 7]
              },
              {
                label: '# of People',
                data: [3, 1, 15, 4, 9, 12]
              }
            ]
          },
          options: {
            plugins: {
              autocolors: {
                 mode: 'dataset'
              },

    legend: {
                onClick: (evt, legendItem, legend) => {
                  //console.log(legendItem);
                  const index = legendItem.datasetIndex;
                  const ci = legend.chart;
                  
                  legend.chart.data.datasets.forEach((d, i) => {
                    ci.hide(i);
                    d.hidden = true;
                  })

                  ci.show(index);
                  legendItem.hidden = false;

                  ci.update();
                },
                labels: {
                  generateLabels: (chart) => {
                    const datasets = chart.data.datasets;

                    legends = [];
                    for(let i=0;i<datasets.length;i++){
                      //console.log(datasets[i].data);
                      let total = datasets[i].data.reduce((total, item) => total + item);
                      //console.log(datasets[i].borderColor);
                      legends.push({text: `${datasets[i].label} (${total.toLocaleString()})`, fillStyle: datasets[i].borderColor, datasetIndex:i});
                    }

                    return legends;
                  }
                }
              }
            }
          }
        }

        var ctx = document.getElementById('chartJSContainer').getContext('2d');
        new Chart(ctx, options);
        <body>
          <canvas id="chartJSContainer" width="600" height="400"></canvas>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.js"></script>
          <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-autocolors"></script>
        </body>

Upvotes: 2

Views: 1884

Answers (1)

LeeLenalee
LeeLenalee

Reputation: 31361

This is because you never set the hidden property in your generateLabels so chart.js does not know which labels to strikethrough since they are never hidden for the legend plugin.

const autocolors = window['chartjs-plugin-autocolors'];

Chart.register(autocolors);

var options = {
  type: 'line',
  data: {
    labels: ["0", "1", "2", "3", "4", "5"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3]
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7]
      },
      {
        label: '# of People',
        data: [3, 1, 15, 4, 9, 12]
      }
    ]
  },
  options: {
    plugins: {
      autocolors: {
        mode: 'dataset'
      },

      legend: {
        onClick: (evt, legendItem, legend) => {
          //console.log(legendItem);
          const index = legendItem.datasetIndex;
          const ci = legend.chart;

          legend.chart.data.datasets.forEach((d, i) => {
            ci.hide(i);
            d.hidden = true;
          })

          ci.show(index);
          legendItem.hidden = false;

          ci.update();
        },
        labels: {
          generateLabels: (chart) => {
            const datasets = chart.data.datasets;

            legends = [];
            for (let i = 0; i < datasets.length; i++) {
              const meta = chart.getDatasetMeta(i)
              let total = datasets[i].data.reduce((total, item) => total + item);
              legends.push({
                text: `${datasets[i].label} (${total.toLocaleString()})`,
                fillStyle: datasets[i].borderColor,
                datasetIndex: i,
                strokeStyle: 'red',
                hidden: !meta.visible
              });
            }

            return legends;
          }
        }
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-autocolors"></script>
</body>

Upvotes: 2

Related Questions