score:1

Accepted answer

What you see here is the beauty of TypeScript as it warns you during compile time that one part of your chain could return undefined and therefore lead to an error that aborts your script.

Use a guard clause to show the compiler you checked for undefined values.

if (!Highcharts?.getOptions()?.colors) {
  return;
}

// ... here comes your code
// the compiler will no longer show errors

Or make sure to have a proper default value, like this:

let color = '#615E9B';
if (Highcharts?.getOptions()?.colors) {
  color = Highcharts.getOptions().colors[0];
}

// Your code, but use color variable instead of Highcharts.getOptions().colors[0]

That is also possible inline, but hard to read and to maintain. I would suggest you to stick to few more lines of code that are easy to understand.

score:0

I tried to reproduce your issue and it seems fine: https://stackblitz.com/edit/highcharts-angular-basic-line-vauauu


Related Articles