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);

        `