CODEWITHSUNDEEP
angularhighcharts
Anana Aristotle
Anana Aristotle

Reputation: 1

I am having an issue integrating DrillDown from Highcharts with Angular 19

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-chart.component.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-chart.component.html',
  styleUrl: './drilldown-chart.component.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-chart.component.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.

Upvotes: 0

Views: 26

Answers (1)

Yong Shun
Yong Shun

Reputation: 51420

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

Upvotes: 1

Related Questions