Css – Apexcharts not shown the Model

Im using my Angular-15 and Bootstrap-5 papplication for the Apexchart

The problem is with open the Model and chart not showing,
If I refresh page and browser zoom out 90% or Zoom in 100% and then chart is is showing. but after refresh chart is again not showing.
Any solution for this?

so when is model outside every chart is working and showing correctly

Thanks

here the code

.html

<div #croSellWiseModal="bs-modal" aria-hidden="true" bsModal class="modal  fade" id="croSellWiseModal" tabindex="-1">
  <div class="modal-dialog  modal-dialog modal-xl modal-dialog-centered">
    <div class="modal-content border-0 p-0">
      <!--<div class="modal-header p-4 pb-0">
       &lt;!&ndash; <h5 class="modal-title" >Cross-Selling


        </h5>&ndash;&gt;

        <button (click)="croSellWiseModal.hide()" class="btn-close"
                type="button"></button>
      </div>-->

      <div class="modal-body p-0 ">

            <div class="" style="height: auto;">

              <div class="row">
                <div class="col-md-3" >
                  <div class="card h-100 border-0 shadow-none" style="background:#FFF2F6;">
                    <div class="card-body">
                      <div class="d-flex justify-content-center">
                        <p class="lg-q-link ">Cross-Selling
                          </p>

                      </div>
                      <div class="d-flex justify-content-center"> <p class="lg-q-link ">
                        Overall Score</p></div>


                      <div class="d-flex justify-content-center">
                        <ng-container >
                        <div class="apex-charts-ds">
                          <apx-chart
                            [series]="chartOptionsSell.series"
                            [chart]="chartOptionsSell.chart"
                            [plotOptions]="chartOptionsSell.plotOptions"
                            [responsive]="chartOptionsSell.responsive"
                            [colors]="['#F83E77']"

                          ></apx-chart>
                        </div>
                        </ng-container>
                      </div>

                      <div class="d-flex justify-content-center">
                        <p class=" lg-sub-ti   ">Total Contracts</p>



                      </div>

                      <div class="d-flex justify-content-center">


                        <p class=" counter-value-ss"><span class="counter-value-ss"
                        >151</span></p>

                      </div>



                      <div class="border-top mt-1"></div>


                      <div class="d-flex justify-content-center mt-2">

                        <p class=" lg-sub-ti-b   ">Exclusive Contracts</p>


                      </div>



                      <div class="d-flex justify-content-center">



                        <p class=" counter-value-ss-b"><span class="counter-value-ss-b"
                        >91</span></p>
                      </div>



                      </div>
                  </div>


                </div>        <div class="col-md-5">
                <div class="card h-100 border-0 shadow-none" >
                  <div class="card-body">
                <div class="d-flex justify-content-start">
                  <p class="lg-q-link ">Cross-Selling
                  </p>

                </div>
                <div class="d-flex justify-content-start"> <p class="lg-q-link ">
                Leader Board</p></div>

                <div class="mt-5">
              
                </div>      </div>      </div>
              </div>
                <div class="col-md-4">
                </div>
              </div>

        </div>
      </div>
    </div>
    <!--end modal-content-->
  </div>

</div>

.ts

  @ViewChild('chartSell') chartSell!: ChartComponent;
  public chartOptionsSell: ChartOptions;
  public chartDataLoaded: boolean = false;


    //chartOptionsSell
    this.chartOptionsSell = {
      series: [60],
      chart: {
        type: 'radialBar',
        height: 210, // Adjust the height to make the chart smaller
      },
      plotOptions: {
        radialBar: {
          hollow: {
            size: '50%', // Adjust the size of the hollow portion
          },
          track: {
            background: '#FBD3DF', // Lighter red color for the remaining portion
          },
          dataLabels: {
            show: true,
            name: {
              show: false,
            },
            value: {
              color: '#0B5ED7',
              fontWeight: 600,
              fontSize: '20px',
              show: true,
              formatter: (val: any) => {
                return `${val}%`; // Customize the label format
              },
              offsetY: 5, // Adjust the vertical alignment
            },
            total: {
              show: false,
            },
          },
        },
      },
      responsive: [
        {
          breakpoint: 210, // Adjust the breakpoint value for smaller screens
          options: {
            chart: {
              height: 120, // Adjust the height for smaller screens
            },
          },
        },
      ],
    };