[Solved]-How to update the theme of highchart-Highcharts

You need to recreate the chart to apply Highcharts.setOptions theme change. The simplest solution to do that in Angular seems to be conditional rendering of two highcharts-chart components. Example:

HTML:

<div>
  <highcharts-chart 
    [Highcharts]="Highcharts"
    [options]="chartOptions"
    *ngIf="isLightTheme;"
    >
  </highcharts-chart>

  <highcharts-chart 
    [Highcharts]="Highcharts"
    [options]="chartOptions"
    *ngIf="!isLightTheme;"
    >
  </highcharts-chart>

  <button (click)="changeTheme()">Change theme</button>
</div>

Component:

Highcharts.setOptions(theme2);
 
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  Highcharts: typeof Highcharts = Highcharts;
  isLightTheme = true;

  chartOptions: Highcharts.Options = {...};

  changeTheme() {
    Highcharts.setOptions(this.isLightTheme ? theme1 : theme2);
    this.isLightTheme = !this.isLightTheme;
  }
}

Live demo: https://stackblitz.com/edit/highcharts-angular-update-optimal-way-qge3vg?file=src/app/app.component.ts

Docs: https://github.com/highcharts/highcharts-angular#readme