TypeError: theme is not a function

[juanqui66]

I have an ionic project with angular, and when refactoring to use the latest versions of ionic, angular 19 standalone and highcharts, it started giving me errors when using functions like theme.

import * as Highcharts from 'highcharts/highcharts';
import theme from 'highcharts/themes/dark-unica';

The call to theme(Highcharts) causes an error of the type:

TypeError: theme is not a function.

My code looks like this:

public initGraphs() {
		if (this.utils.darkMode()) {
			theme(Highcharts);
		}

		this.chartOptions = 
		{
                ...

Is it no longer possible to dynamically initialize dark mode dark-unica? How can

Setup used

Ionic:

Ionic CLI : 7.2.0 (C:\Users\juanc\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 8.5.1
@angular-devkit/build-angular : 19.2.4
@angular-devkit/schematics : 19.2.4
@angular/cli : 19.2.4
@ionic/angular-toolkit : 12.1.1

Capacitor:

Capacitor CLI : 7.1.0
@capacitor/android : not installed
@capacitor/core : 7.1.0
@capacitor/ios : not installed

Utility:

cordova-res : 0.15.4
native-run : 2.0.1

System:

NodeJS : v22.2.0 (C:\Program Files\nodejs\node.exe)
npm : 10.8.2
OS : Windows 10

[kai1992cool]

Stackblitz Replication

[juanqui66]

Stackblitz Replication

In that example you can clearly see the error I mentioned, only with the sunset theme.

In the console, you can see the error:

main.ts:7 Uncaught TypeError: (0 , import_sunset.default) is not a function
    at main.ts:7:1

[hubertkozik]

Hi @juanqui66 and @kai1992cool! This topic is more related to Highcharts itself than to the highcharts-angular integration. You can find a related ticket here: highcharts/highcharts#17635

Now, since Highcharts v12 modules are refactored, there is no module factory, more info in the docs: https://www.highcharts.com/docs/getting-started/version-12 Due to that, you cannot initialize the theme based on some condition. If you would like, the implementation of this mechanism/logic has to be done in Highcharts library.

For now, I would like to encourage to use styled mode to prepare a conditional styling or based on docs: https://www.highcharts.com/docs/chart-design-and-style/themes you can treat themes as a set of pre-defined options and use Highcharts.setOptions with desired styling/theme options.

[juanqui66]

Thank you very much for the info!

[PowerKiKi]

The hypothetical future v5 proposed in #402, would reduce the risk of this kind of error, since usage would be simplified to something like this:

export const appConfig: ApplicationConfig = {
  providers: [
    provideHighcharts({
      modules: () => [import('highcharts/esm/themes/dark-unica')]
    })
  ]
};

[hubertkozik]

Let's close this issue for now. If needed, we can discuss further in topics related to modules.

[PowerKiKi]

@hubertkozik, is there a chance you could help get some movement on #402, that could help reduce those kind of issue ?

[hubertkozik]

@PowerKiKi, sadly, no, as my colleague said, the additional review is needed.