HighCharts stacked column chart : 'plotOptions.series.stacking' are incompatible types

Question

Trying to create a stacked column chart with HighCharts and Angular, that would look like this example:

but getting the following error :

The types of 'plotOptions.series.stacking' are incompatible between these types.
    Type 'string' is not assignable to type 'OptionsStackingValue | undefined'.

While using the following options :

dashboard.component.ts

  columnChart: any;
  columnUpdateFromInput = false;
  columnHighcharts = Highcharts;
  columnChartConstructor = "chart";
  columnChartCallback: any;
  columnChartOptions = {

    chart: {
      type: 'column'
    },
    title: {
      text: 'Stacked column chart'
    },
    tooltip: {
      split: true,
      valueSuffix: ' pers'
    },
    plotOptions: {
      series: {
        stacking: 'normal'
      }
    },
    exporting: {
      enabled: true
    },
    xAxis: {
      categories: this.columnCategories
    },
    yAxis: {
      min: 0,
      title: {
        text: 'Total doses'
      },
      stackLabels: {
        enabled: true,
        style: {
          fontWeight: 'bold',
          color: 'gray'
        }
      }
    },
    series: this.columnData
  };

dashboard.component.html

<div>
  <highcharts-chart
    id="columnStackedContainer"
    [Highcharts]="columnHighcharts"
    [constructorType]="columnChartConstructor"
    [options]="columnChartOptions"
    [callbackFunction]="columnChartCallback"
    [(update)]="columnUpdateFromInput"
    [oneToOne]="true"
    style="width: 100%; height: 400px; display: block;"
  >
  </highcharts-chart>
</div>

Removing the plotOptions work but column aren't stacked (but displayed side by side) :

What could be possibly wrong ? I'm using the latest HighCharts

Answer 1

Found the solution as follow (omitted unrelated others options):

dashboard.component.ts

plotOptions = {};

columnChartConstructor = "chart";
columnChartOptions = {
    chart: {
      type: 'column'
    },
    plotOptions: this.plotOptions,
    series: this.columnData
};

public ngOnInit(): void {
  this.dataService.getDoseStacked() {
    this.updateDoseStackedData(doseStackedApi);
  }

  setTimeout(() => { // trick for the chart to adapt itself
     window.dispatchEvent(
       new Event('resize')
     );
  }, 300);

}

updateDoseStackedData(doseStackedApi : DoseStackedApi) {
      this.columnChartOptions.plotOptions = {
        column: {
          stacking: 'normal'
        }
      };
      this.columnChart.hideLoading();
      this.columnUpdateFromInput = true;
}

dashboard.component.html

<div>
  <highcharts-chart
    id="columnStackedContainer"
    [constructorType]="columnChartConstructor"
    [options]="columnChartOptions"
  >
  </highcharts-chart>
</div>