ApexCharts not showing until I switch to landscape

[SuzuNohara]

I'm implementing ng-apexcharts on my ionic project and following the instructions for my first chart I vreate my first chart and any error is shown on the terminal or the browser console, but the chart is hidden until i switch to lanscape or from landscape to portait or when i change the resolution of the emulator. Compiling the app on android native code, the same error is present.

<ion-content [fullscreen]="true">

  <div id="container">
    something
    <apx-chart [series]="chartOptions.series" [chart]="chartOptions.chart"  [title]="chartOptions.title"></apx-chart>
    something
  </div>
</ion-content>

@ViewChild("chart", { static: false }) chart: ChartComponent;
  public chartOptions: Partial<ChartOptions>;
  chartData = [];
  chartType = "bar";

  public uuid: string;
  public loading: boolean;
  public nombre: string;

  constructor(private route: Router,
    private backend: BackendService,
    private modalController: ModalController,
    private auth: AuthService) {
    this.loading = true;
    let dataArray = [];
    let dataLabel = [0,5,10,15,20,25,30,35];
    this.chartOptions = {
      series: [{
        name: "My-series",
        data: [1,2,2,42,35,23,6,26,2,7,2]
      }],
      chart: {
        height: 500,
        type: this.chartType
      },
      title: {
        text: `My First ${this.chartType} Chart from xlsx file`
      },
      xaxis: {
        type: "datetime",
        categories: dataLabel
      }
    };
  }

[mybugatti]

which version used ? I’m suspecting the 3.31.0 version.

[tom-kotlar]

How did you resolve your issue? I have a similar problem with dynamic data.

[mybugatti]

my setup

"ng-apexcharts": "^1.5.12", "apexcharts": "^3.27.3",

[tom-kotlar]

I have a similar issue with the Angular app:
I am loading data from API.
"apexcharts": "^3.33.1", "ng-apexcharts": "^1.5.12"

[lapisanlangit]

try to set width and height chart in object chartOptions, this is resolve my problem too

` this.chartOptions = {
series: [
{
name: "Desktops",
data: []
}
],
chart: {
height: 300, // => set this property
width:300, //=> set this property
type: "line",
zoom: {
enabled: false
}
}
}

or better solution give sitimeout function to chartOptions

      setTimeout(() => {
                     this.chartOptions = {
                     ......
                     ......
                    }

      }, 1000);

        `

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.