Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Angular 19 : Cannot use 3D charts #398

Open
Sandai64 opened this issue Feb 25, 2025 · 0 comments
Open

Angular 19 : Cannot use 3D charts #398

Sandai64 opened this issue Feb 25, 2025 · 0 comments

Comments

@Sandai64
Copy link

Sandai64 commented Feb 25, 2025

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 ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant