ChartsJS Legend not showing in Angular11

Question

I've read every piece of documentation and stack overflow question I could find regarding this topic, but I'm still seeing a strange issue. The issue is that the Legend for ChartsJS (the regular javascript library, not the Angular specific library) is not showing up in my angular component even though the Chart is showing correctly.

I have a line chart that I populate with data in real time via HTTP- as data comes in I add it and display it to the chart. The problem I'm seeing is that the legend never shows up.

Here are the files of interest:

Angular Component:

export class ChartingComponent implements OnInit {
  @ViewChild('myCanvasId', {static: true}) private chartRef: any;

  chart: any;

  ephemeralData: EphemeralData = {
    id: null ,
    dateTime: "",
    heartRate: null,
    spO2: 100,
    respiratory: null,
    pulseRate: null,
    nIBPDia: null,
    nIBPMean: null,
    nIBPSys: null,
    temperature: null,
    endOfTidalCO2: null,
    airwayRespirationRate: null,
    endTidalCO2: null,
    inspiredCO2: null,
    inspiredO2: null,
    inspiredN2O: null,
    endTidalN2O: null,
    inspiredAneshetic: null,
    endTidalAneshetic: null,
    endTidalIsoflurane: null,
    inspiredIsoflurane: null,
    endTidalSevoflurane: null,
    inspiredSevoflurane: null,
    endTidalDesflurane: null,
    inspiredDesflurane: null,
    minimumAlveolarConcentration: null,
    meanAirwayPressure: null,
    positiveEndExpiratoryPressure: null,
    plateauPressure: null,
    maximumAirwayPressure: null,
    minuteVolume: null,
    expiredTidalVolume: null,
    inspiratoryTidalVolume: null,
    inspiratoryTimeExpiratoryTimeRatio: null,
    breateRate: null,
    fractionalConcentrationO2Inspired: null
  };

  constructor(private data: DataService) { }

  ngOnInit(): void {
    this.initChart(this.ephemeralData);
    interval(3000).subscribe(x => {
      this.getLatestEphemeralData();
    })
  }

  private getLatestEphemeralData()
  {
    this.data.ephemeralData().subscribe(
      (res: any) => 
      {
        this.ephemeralData.dateTime = res['dateTime'];
        this.ephemeralData.spO2 = res['spO2'];
        this.ephemeralData.respiratory = res['respiratory'];
        this.ephemeralData.nIBPDia = res['nIBPDia'];
        this.ephemeralData.nIBPMean = res['nIBPMean'];
        this.ephemeralData.nIBPSys = res['nIBPSys'];
        this.ephemeralData.temperature = res['temperature'];
        if (this.chart)
        {
          this.addChartData(this.chart, null, this.ephemeralData);
        }
      }
    )
  }

  private addChartData(chart: Chart, label: any, data: EphemeralData)
  {
      //chart.data.labels?.push(label);
      chart.data.datasets[chart.data.datasets.map(function(e) { return e.label; }).indexOf("spO2")].data.push((data.spO2));
      chart.data.datasets[chart.data.datasets.map(function(e) { return e.label; }).indexOf("respiratory")].data.push((data.respiratory));
      chart.data.datasets[chart.data.datasets.map(function(e) { return e.label; }).indexOf("nIBPDia")].data.push((data.nIBPDia));
      chart.data.datasets[chart.data.datasets.map(function(e) { return e.label; }).indexOf("nIBPMean")].data.push((data.nIBPMean));
      chart.data.datasets[chart.data.datasets.map(function(e) { return e.label; }).indexOf("temperature")].data.push((data.temperature));
    chart.update();
  }

  private initChart(chartData: EphemeralData)
  {
    //if (this.chart) 
      //this.chart = new Chart(null as any, null as any); //find a better way of doing this
    Chart.register(LineController, LineElement, PointElement, LinearScale, CategoryScale);
    this.chart = new Chart(this.chartRef.nativeElement, {
      type: 'line',
      data: {
        labels: ['spO2', 'Respiratory', 'nIBPDia', 'nIBPMean', 'nIBPSys', 'temperature'],
        datasets: [          
          {
            label: 'spO2',
            backgroundColor: 'rgb(255, 99, 132)',
            data: [0],
            borderColor: "#3cba9f",
            fill: true
          },
          {
            label: 'respiratory',
            backgroundColor: 'rgb(255, 99, 132)',
            data: [0],
            borderColor: "#ffcc00",
            fill: true
          },
          {
            label: 'nIBPDia',
            backgroundColor: 'rgb(255, 99, 132)',
            data: [0],
            borderColor: "#ffcc00",
            fill: true
          },
          {
            label: 'nIBPMean',
            backgroundColor: 'rgb(255, 99, 132)',
            data: [0],
            borderColor: "#ffcc00",
            fill: true
          },
          {
            label: 'nIBPSys',
            backgroundColor: 'rgb(255, 99, 132)',
            data: [0],
            borderColor: "#ffcc00",
            fill: true
          },
          {
            label: 'temperature',
            backgroundColor: 'rgb(255, 99, 132)',
            data: [0],
            borderColor: "#ffcc00",
            fill: true
          }
        ]
      },
       options: {
         scales: {
           x: {
             display: false,
             suggestedMin: 0,
             suggestedMax: 240,
           },
           y: {
             display: true,
             suggestedMin: 0,
             suggestedMax: 200
           },
         },
         plugins: {
            legend: {
                display: true,
                position: 'right',
                labels: {
              }
            }
          }
        }
    });
  }
}

HTML contents of the component:

<canvas #myCanvasId>{{ chart }}</canvas>

Answer 1

I think you have missed the registeration of Legend in your initChart method. Can you try importing it and adding it as or refer the sample stackblitz:

Chart.register(LineController, LineElement, PointElement, LinearScale, CategoryScale, Legend);

Also check the documentation to verify if anymore imports are missing or check the alternative as well in the integration section.