Custom Legend for Ng2-Charts

custom-legend-charts.html

<div style="display: block; width: 80%; margin: auto; padding: 3rem;">
  <canvas
    [chartType]="'line'"
    [legend]="false"
    [datasets]="chartData"
    [options]="chartOptions"
    [labels]="chartLabels"
    baseChart>
  </canvas>
</div>
<div class="legend-list">

  <!--
    Added index to *ngFor
    Passed the current index through the onSelect method
  -->
  <a 
    *ngFor="let data of chartData; let i = index;" 
    (click)="onSelect(i)">

    <span [ngClass]="data.hidden ? 'hidden' : 'showing'">
      {{ data.label }}
    </span>

  </a>
</div>

custom-legend-charts.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { BaseChartDirective } from 'ng2-charts';


@Component({
  selector: 'app-line-chart',
  templateUrl: './line-chart.component.html',
  styleUrls: ['./line-chart.component.css']
})
export class LineChartComponent implements OnInit {
  // Added BaseChartDirective 
  @ViewChild(BaseChartDirective) baseChart: BaseChartDirective;

  // Had to make sure each obj had 'hidden' explicitly in it for some reason
  chartData = [
    {
      data: [40, 38, 20, 64],
      label: 'Women',
      borderWidth: 1,
      hidden: false
    },
    {
      data: [27, 45, 62, 12],
      label: 'Men',
      borderWidth: 1,
      hidden: false
    },
    {
      data: [16, 37, 5, 8],
      label: 'Children',
      borderWidth: 1,
      hidden: false
    },
    {
      data: [60, 22, 35, 33],
      label: 'Cats',
      borderWidth: 1,
      hidden: false
    }
  ]
  chartLabels = [
    'Jan', 'Feb', 'Mar', 'Apr'
  ];
  chartOptions = {
    responsive: true,
    responsiveAnimationDuration: 100,
    scales: {
      xAxes: [{
        ticks: {
          display: false
        }
      }],
      yAxes: [{
        ticks: {
          display: true
        }
      }]
    },
    layout: {
      padding: {
        right: 20
      }
    }
  };
  constructor() { }

  ngOnInit() {
  }

  onSelect(indexItem): void {
    const ci = this.baseChart;
    if (this.chartData[indexItem].hidden === false) { this.chartData[indexItem].hidden = true; } 
    else { this.chartData[indexItem].hidden = false; }
    ci.update();

    /** If every dataset's `hidden` key is `true`, re-assign all `hidden` keys with value of `false` */
    if (this.chartData.every(dataset => dataset.hidden === true)) {
      this.chartData.map(eachDataset => Object.assign(eachDataset, {hidden: false}))
      ci.update();
    }
  }
}