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';
if (this.utilidades.darkMode()) {
theme(Highcharts);
}
The call to theme(Highcharts) causes an error of the type:
TypeError: theme is not a function.
Is it no longer possible to dynamically initialize dark mode dark-unica?
Is there a specific theme for charts to use device theme (dark or light) itself?
Similar to previous answer related to the version 12, HighCharts no longer work with the module factory.
Currently, I don't think the repository owner of highcarts-angular (Angular wrapper of highcharts library) implements the option that allow for theme customization for support this change.
But, you can use the JS traditional way to get all the elements with the class: "highcharts-container" and append the class for light/dark theme.
However you should perform the theme customization after the AfterViewInit lifecycle (ensure that the <highcharts-chart> component(s) are rendered).
import 'highcharts/themes/dark-unica';
ngAfterVewInit() {
this.updateHighChartColorMode(this.utilidades.darkMode() ? 'dark' : 'light');
}
updateHighChartColorMode(mode: string) {
const highChartsContainer = document.getElementsByClassName(
'highcharts-container'
);
if (highChartsContainer && highChartsContainer.length > 0) {
for (let i = 0; i < highChartsContainer.length; i++) {
highChartsContainer[
i
].className = `highcharts-container highcharts-${mode}`;
}
}
}