Angular 19 : Cannot use 3D charts

[Sandai64]

For general tech support, please see www.highcharts.com/support.
Please report only issues about highcharts-angular wrapper or content of this repository.
For general issues with Highcharts and TypeScript the correct repository to report such issues is main Highcharts repository.

Describe the bug

I cannot import Highcharts-3d into my component.
Browser error reads :

Uncaught TypeError: highcharts_highcharts_3d__WEBPACK_IMPORTED_MODULE_2___default() is not a function

Expected behavior

It should work according to the answer in issue #350

Sample code

@Component({
  selector: 'app-XXX',
  imports: [
    HighchartsChartModule
  ],
  templateUrl: './appXXX.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppXXX
{
  Highcharts = Highcharts;

  constructor() {}

  // -----------------------------------------------
  // State
  // -----------------------------------------------

  chartOptions: Highcharts.Options = {
    chart: {
        styledMode: true,
        options3d: {
            enabled: true,
            alpha: 45,
            beta: 0
        }
    },
    title: { text: '' },
    plotOptions: {
      pie: {
        depth: 45,
      }
    },
    accessibility: {
      enabled: false,
    },
    series: [{
      type: 'pie',
      allowPointSelect: true,
      keys: ['name', 'y', 'selected', 'sliced'],
      data: [
          ['A', 27.16, true, true],
          ['S', 23.72],
          ['X', 11.92],
          ['U', 6.86],
          ['O', 6.12],
          ['V', 5.48],
          ['R', 3.89],
          ['H', 3.49],
          ['M', 2.38],
          ['I', 1.59],
          ['O', 7.39]
      ],
      showInLegend: true
    }]
  };
}

Setup used

• NodeJS version 20 LTS
• Angular version 19.1.8
• TypeScript version 5.7.3

Are you guys able to render a 3D pie chart in Angular 19 ?

[MarkusBarstad]

@Sandai64 Thank you for the feedback! What happens on your end when you try to render it? Any errors in the console?

In your chartOptions you have styledMode set to true. This means that you must supply your own colors. You can read about styledMode here: https://www.highcharts.com/docs/chart-design-and-style/style-by-css

If I turn off styledMode, this 3D chart works for me: https://stackblitz.com/edit/stackblitz-starters-usnlj3ur?file=src%2Fmain.ts

Hope that helps!