Ngx apexchart doesnt render well on ionic/angular

Capacitor
1

Hi im trying to use a library to show pie graphics. I tried apexcharts wrapper for angular and doesnt work that well. It doenst throw error on console or anything but still doesnt work.

it seems like this

image
image1051×397 33.5 KB

expected result
image

i just copy the sandbox example but I use in home page, not app component. should work

homepage.ts

import { Component, OnInit, ViewChild } from '@angular/core';

import {
  ApexNonAxisChartSeries,
  ApexResponsive,
  ApexChart,
  ChartComponent,
} from 'ng-apexcharts';

export type ChartOptions = {
  series: ApexNonAxisChartSeries;
  chart: ApexChart;
  responsive: ApexResponsive[];
  labels: any;
};
@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
  styleUrls: ['./home.page.scss'],
})
export class HomePage {
  @ViewChild('chart') chart: ChartComponent;
  public chartOptions: Partial<ChartOptions>;

  constructor() {
    this.chartOptions = {
      series: [44, 55, 13, 43, 22],
      chart: {
        width: 380,
        type: 'pie',
      },
      labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'],
      responsive: [
        {
          breakpoint: 480,
          options: {
            chart: {
              width: 200,
            },
            legend: {
              position: 'bottom',
            },
          },
        },
      ],
    };
  }
}

homepage.html

<!--The content below is only a placeholder and can be replaced.-->
<div id="chart">
  <apx-chart
    [series]="chartOptions.series"
    [chart]="chartOptions.chart"
    [labels]="chartOptions.labels"
    [responsive]="chartOptions.responsive"
  ></apx-chart>
</div>

homepage.scss

#chart {
    max-width: 380px;
    margin: 35px auto;
    padding: 0;
}

home.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';

import { HomePageRoutingModule } from './home-routing.module';

import { HomePage } from './home.page';
import { NgApexchartsModule } from 'ng-apexcharts';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    HomePageRoutingModule,
    ReactiveFormsModule,
    NgApexchartsModule,
  ],

  declarations: [HomePage],
})
export class HomePageModule {}

what im doing wrong?

this is the code example, i did the same
https://apexcharts.com/angular-chart-demos/pie-charts/simple-pie/

2

What does the console say? any errors?

3

no bro. just quit, i discard use graph