I am integrating DrillDown from Highcharts into my angular 19 application.

Here is the error I get from the browser console: ERROR TypeError: Ye(...) is not a function

Here are the libraries I install:

1. "highcharts": "^12.1.2".
2. "highcharts-angular": "^4.0.1"

What I did on my drilldown-chartponent.ts:

import {Component, OnInit} from '@angular/core';
import * as Highcharts from 'highcharts';
import Drilldown from 'highcharts/modules/drilldown';
import { HighchartsChartModule } from "highcharts-angular";
// Initialize the drilldown module
Drilldown(Highcharts);

@Component({
  selector: 'app-drilldown-chart',
  imports: [HighchartsChartModule],
  templateUrl: './drilldown-chartponent.html',
  styleUrl: './drilldown-chartponent.scss'
})
export class DrilldownChartComponent implements OnInit {

    
    ngOnInit(): void {
        this.loadChart()
    }

  Highcharts: typeof Highcharts = Highcharts;
  chartOptions: Highcharts.Options = {};

    loadChart(): void {
        this.chartOptions = {
            // In here is my chart details
        };
    }
}

And this in my drilldown-chartponent.html:

<highcharts-chart
    [Highcharts]="Highcharts"
    [options]="chartOptions"
    style="width: 100%; height: 400px; display: block;">
</highcharts-chart>

I have try using the Pie and Line charts can it works as expected.

But when I introduce this Drilldown(Highcharts); the page no longer loads.

I am integrating DrillDown from Highcharts into my angular 19 application.

Here is the error I get from the browser console: ERROR TypeError: Ye(...) is not a function

Here are the libraries I install:

1. "highcharts": "^12.1.2".
2. "highcharts-angular": "^4.0.1"

What I did on my drilldown-chartponent.ts:

import {Component, OnInit} from '@angular/core';
import * as Highcharts from 'highcharts';
import Drilldown from 'highcharts/modules/drilldown';
import { HighchartsChartModule } from "highcharts-angular";
// Initialize the drilldown module
Drilldown(Highcharts);

@Component({
  selector: 'app-drilldown-chart',
  imports: [HighchartsChartModule],
  templateUrl: './drilldown-chartponent.html',
  styleUrl: './drilldown-chartponent.scss'
})
export class DrilldownChartComponent implements OnInit {

    
    ngOnInit(): void {
        this.loadChart()
    }

  Highcharts: typeof Highcharts = Highcharts;
  chartOptions: Highcharts.Options = {};

    loadChart(): void {
        this.chartOptions = {
            // In here is my chart details
        };
    }
}

And this in my drilldown-chartponent.html:

<highcharts-chart
    [Highcharts]="Highcharts"
    [options]="chartOptions"
    style="width: 100%; height: 400px; display: block;">
</highcharts-chart>

I have try using the Pie and Line charts can it works as expected.

But when I introduce this Drilldown(Highcharts); the page no longer loads.

• angular
• highcharts

Share Improve this question Follow asked Feb 23 at 9:37 Anana AristotleAnana Aristotle 111 silver badge11 bronze badge

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

From the version 12, HighCharts no longer work with the module factory. Hence you need to do the migration for importing the module(s) as below:

import * as Highcharts from 'highcharts';
import 'highcharts/modules/drilldown';

Demo @ StackBlitz