[Chartjs]-Chart.js custom legend – make legend items clickable to select/deselect data

by

0👍

Jumping off what you’ve already created, add a click event around each HTML generated legend item, and use that click event to hide indiv. datasets, based on matching conditions.

I configured this in Angular, but the logic is similar.

With the below HTML, I am generating a custom legend which displays each of my labels. When a label is clicked, the hideOneDataset fn is called, passing the value of the legendItem clicked.

  <div *ngIf="legendData">
    <ul class="my-legend">
      <li class="legend-item" *ngFor="let legendItem of legendData" (click)="hideOneDataset($event.target.innerText)">
        {{ legendItem.text }}
      </li>
    </ul>
  </div>

Then, I configured the hideOneDataset function to loop through each dataset item and determine if the legendItem from my custom HTML legend === that of the current element’s label. If yes, hide it.


  hideOneDataset(legendItem) {
    // GET each dataset in the chart
    this.chartComponent.chart.data.datasets.forEach(ele => {
      // IF the custom legend item clicked on equals the label of one of our datapoints, hide that data
      if (ele.label === legendItem) {
        ele.hidden = !ele.hidden;
      }
    });

    this.chartComponent.update();

  }

Hope this helps a bit for anyone who stumbles upon this.

Leave a comment