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($">
        {{ legendItem.text }}

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 => {
      // 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;



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

Related Query

More Query from same tag