[Solved]-HighCharts does not recognize a function of Legend-Highcharts

Unfortunately, I have no idea why Angular throwing that error. Could you attach the content of this.chart.legend object?

However, I suggest you use official Highcharts wrapper for Angular (that can be downloaded here: https://github.com/highcharts/highcharts-angular) because updating chart beyond the Angular framework is not recommended. Then you can just change chart options with changed legend name and change the updateFromInput flag to update the whole chart component. Check the code and demo posted below.

app.module.ts :

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { HighchartsChartModule } from "highcharts-angular";
import { ChartComponent } from "./chart.component";

import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent, ChartComponent],
  imports: [BrowserModule, HighchartsChartModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

chart.component.html :

<div class="boxChart__container">
  <div>
    <highcharts-chart
      id="container"
      [Highcharts]="Highcharts"
      [constructorType]="chartConstructor"
      [options]="chartOptions"
      [callbackFunction]="chartCallback"
      [(update)]="updateFromInput"
      [oneToOne]="true"
      style="width: 100%; height: 400px; display: block;"
    >
    </highcharts-chart>

    <button (click)="update_chart()">Change legend name</button>
  </div>
</div>

chart.component.ts:

import { Component, OnInit } from "@angular/core";
import * as Highcharts from "highcharts";
import * as HighchartsMore from "highcharts/highcharts-more";
import * as HighchartsExporting from "highcharts/modules/exporting";

HighchartsMore(Highcharts);
HighchartsExporting(Highcharts);

@Component({
  selector: "app-chart",
  templateUrl: "./chart.component.html"
})
export class ChartComponent implements OnInit {
  title = "app";
  chart;
  updateFromInput = false;
  Highcharts = Highcharts;
  chartConstructor = "chart";
  chartCallback;
  chartOptions = {
    series: [
      {
        name: "Series name",
        data: [1, 2, 3, 6, 9]
      }
    ],
    exporting: {
      enabled: true
    },
    yAxis: {
      allowDecimals: false,
      title: {
        text: "Data"
      }
    }
  };

  constructor() {
    const self = this;

    this.chartCallback = chart => {
      self.chart = chart;
    };
  }

  ngOnInit() {}

  update_chart() {
    const self = this,
      chart = this.chart;

    self.chartOptions.legend = {
      labelFormatter: function() {
        return `${this.name} - edited`;
      }
    };

    self.updateFromInput = true;
  }
}

Demo:
https://codesandbox.io/s/7y5j93l2rq

Highcharts Angular wrapper:
https://github.com/highcharts/highcharts-angular