score:1

Accepted answer

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


Related Query

More Query from same tag