Model not displaying on Apexcharts

Currently, I am using Angular-15 and Bootstrap-5 application for the Apexchart

The issue arises when trying to open the Model and the chart does not show up. If I refresh the page and zoom out to 90% or zoom in to 100%, the chart appears. However, upon refreshing, the chart disappears again. Any suggestions on how to solve this problem?

When the model is outside, all charts work and display correctly.

Thank you

Here is 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-body p-0">
            <div class="" style="height: auto;">
              
              // Code continues...

            </div>
          </div>
        </div>
      </div>
    </div>

.ts

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

    // More code here...
cssangulartypescriptapexchartsangular15

Answer №1

At last, the solution has been discovered, I decided to eliminate the ng-container and incorporate the d-flex class

Below is the revised solution

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

                  ></apx-chart>
                </div>

Answer №2

By reproducing the issue when triggering chart properties within the ngOnInit() lifecycle hook, I was able to discover a solution that didn't require any modifications to the template code. The concept revolves around setting the ChartOptions properties when the ngx-bootstrap modal is opened using ModalDirective.

Check out a live example here: https://codesandbox.io/p/sandbox/intelligent-morning-xzpqzl

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Positioning the close button on the top right edge of a Material-UI Dialog: A step-by-step guide

https://i.sstatic.net/ARTtq.png How can I include a close icon in the top right corner of the header section? I'm using the Material UI Dialog and everything works well, but I need a close button in the top section. Can anyone assist me with this? ...

javascripthtmlcssreactjsmaterial-ui

Arranging divs using inline-block display. How to adjust the heights consecutively?

After much searching and attempting, I am still unable to achieve a simple task. My goal is to apply display inline-block to some divs while aligning them in a row, similar to the image below: https://i.sstatic.net/iLhLS.png The issue arises when number ...

javascripthtmlcssheight

My postman is successfully uploading image files, but for some reason, my code isn't cooperating. Are there any adjustments that need to be made?

While attempting to upload an image file with form data in Angular, I encountered a discrepancy in behavior between Postman and my project. In Postman, under the headers section, I have configured the following: Content-Type: multipart/form-data, token: ...

javascriptangularapiform-dataimage-upload

JavaScript: Manipulating Data with Dual Arrays of Objects

//Original Data export const data1 = [ { addKey: '11', address: '12', value: 0 }, { addKey: '11', address: '12', value: 0 }, { addKey: '12', address: '11', value: 0 }, { addKey: &a ...

javascriptnode.jstypescript

Methods of obtaining the array size using interpolation in Angular2?

Is there a way to inquire about the size of an array in Angular 2 when it is used within a component? For instance, consider the following: users : User[]; where export class User { id : number; firstName : String; lastName : String; userName ...

angular

Angular 2 routing for dynamic population in a grid system

My website is compiling correctly, however, in the Sprint dropdown menu where I have set up routing... <a *ngFor = "let item of sprint;" routerLink = "/Summary" routerLinkActive = "active"> <button *ngIf = "item.Name" mat-menu-item sty ...

angulartypescriptroutes

The gulp-sass import feature has been acting up quietly

I'm currently attempting to transpile a scss file using gulp-scss. However, when I execute the task, it seems that the imports are not being recognized. gulpfile.js gulp.src('./app/css/app.scss', {base: './'}) .pipe(sass({inc ...

cssimportsassgulp

Issue with launching Angular 6 project

I attempted the solution from this link, but unfortunately, it did not work for me. I have cloned a project from GitLab and am attempting to run it. First, take a look at the output of my ng version command: https://i.sstatic.net/qxRzk.png. The project i ...

angularnpmnpm-install

A guide on creating a function that can detect if an object is not iterable and then throw an error

Exploration Uncomfortable type definition at the library: declare type Extension = { extension: Extension; } | readonly Extension[]; Type-validation function export function isIterable(x: any): x is Iterable<unknown> { return Symbol.iterator ...

typescript

Various endpoints to consider when conducting end-to-end testing with Protractor

What is the best way to execute end-to-end test cases for Protractor in an Angular workspace with multiple applications? For instance, consider the following structure: -/angularRootFolder -apps -First app -e2e -pageobjects ...

angularprotractore2e-testingangularjs-e2e

Conceal the server's internal file structure to prevent it from being displayed in sources

When I visit my website and inspect the elements in Google Chrome, I am able to see a list of all the folders on my site under the sources tab. This reveals their original names and allows for the downloading of the entire website code. I am concerned abo ...

phpcss.htaccessjoomlaamazon-ec2

I am struggling to increase the width of my input bar and center-align it

Below is the CSS class I've created to ensure that all elements remain centered on the user's screen. container: { display: "flex", position: "absolute", top: 0, left: 0, height: "100%&qu ...

htmlcssmaterial-ui

Identify the locality and apply it to the root module of Angular 2 by utilizing a provider

I am working on a function that detects the current locale and I need to set it in the root App module of Angular 2 using a provider so that I can access it in all other components. I understand that I can achieve this by following the code below: { pr ...

angularlocaleangular2-servicesangular2-providers

To display a specific router link and its child routes, make use of the *ngIf directive

Issue: How can we display [content] in all child routes of a parent route such as <div *ngIf="router.url === '/parent/child'">[content]</div>, ensuring that content is shown in ./parent/child1, ./parent/child2, and so on? P ...

angularrouteswildcardrouter

Can the base href in Angular be dynamically changed during runtime?

Within my single Angular application, I have set the base-href to /a/b/. This means that in my dist folder, there is an HTML file with <base href="/a/b/">. As a result, the browser recognizes that an image link like assets/images/logo.png can be foun ...

angularapache

Retrieve upcoming route details within canDeactivate guard in the updated Angular2 router

Is there a way to retrieve the upcoming route information within the "canDeactivate" guard of Angular 2's new router? ...

angularrouter

The variable is currently undefined because it has an array assigned to it

Upon selecting multiple checkboxes for variants, I am retrieving checked data using the following method: get selectedIdsFromViolCategoriesFormArray(): string[] { return this.violCategories .filter((cat, catIdx) => this.violCategoriesFormArr. ...

javascriptangulartypescript

Transferring documents from an angular ionic application to a slim php framework on the localhost

Hey there! I've got a project on my localhost where I need to upload files to a local folder. I'm sharing the code here in hopes that someone can assist me. HTML: <ion-item ion-item *ngFor="let item of lista" menuClose> Floor: ...

angulartypescriptionic-frameworkionic3slim

Creating an Eye-catching Presentation: Tips for Adding Text to Your CSS3 Slideshow

I am currently in the process of creating a CSS3 slideshow with text for each image. I found inspiration from this example: . However, I made some modifications to make it responsive. Here is the HTML code I have used: <div id="slideshow"> < ...

htmlcss

Sending user input from search component to main App.js in React

I'm currently working on an app that searches a Movies database API. I have a main fetch function in App.js, and in tutorials, people are using a search bar within this main APP component. I'm wondering if it would be better to create a separate ...

javascripthtmlcssreactjsjson