I initialize my Highcharts like this:

export class StreamsComponent implements OnInit {
  @Input() platform: string = "";
  @Input() title: string = "";

  series: any[] = [];

  Highcharts: typeof Highcharts = Highcharts;
  updateFlag: boolean = false;
  chartOptions: Highcharts.Options = {
    title: {
      text: this.title
    },
    chart: {
      zoomType: "x",
    },
    xAxis: {
      type: "datetime",
    },

    yAxis: {
      title: {
        text: "",
      },
    },

    legend: {
      enabled: false,
    },
    credits: {
      enabled: false,
    },

    series: this.series,
  };
...

Later I populate this.series in a service callback with this.updateFlag = true; This all works fine.

But the title isn't set and remains empty.

 ngOnInit(): void {
    console.log(this)
 ...

When I check the object in ngOnInit(), the title has the content like I wanted, but it isnt visible in the Graph. When I just put a random string in, it is visible.

Any ideas?

CodePudding user response：

Since you are initialising chartOptions directly in the component class, the input title will not work.

You need to initialise the chartOptions in ngOnInit lifecycle method. I have made a sample stackblitz to show this.

https://stackblitz.com/edit/highcharts-angular-basic-line-gaekp1?file=src/app/test.component.ts