ChartJS is exhibiting an issue within a modal or popup window where the chart is being displayed with a height

I want to show a graph in a modal window when the user clicks a button. The modal is hidden with display: none;, and becomes visible with display: flex; once the button is clicked.

If I move the chart outside of the modal, it works without any issues.

Adjusting the height of the chart from 0px in dev tools makes it appear correctly.

To demonstrate the problem, I created a codepen. You can see the issue by commenting/un-commenting the code inside or outside of the modal.

The code for the graph is borrowed from another example on CodePen that I came across.

Although I found a helpful answer on StackOverflow, implementing the solution into my own code has proved difficult. Here's the advice I received:

"It seems like the canvas and all its parent nodes cannot be set to display none at the time the chart call is made. If you're using a chart in a popup, you should first display the popup, create the chart, and then hide the popup."

javascriptcssvue.jsgraphmodal-dialog

Answer №1

Are you in search of a solution similar to this one?

If you refer to the Vue-chartJs documentation, you will come across this (troubleshooting page):

If you are utilizing the mixin, it is essential to pass your options as a prop named options. This is crucial as the mixin triggers the chart.js update() method or renews and displays a new chart. In case the mixin creates a new chart, it executes this.renderChart(this.chartData, this.options).

This implies that your options must be stored in the Vue object. By doing so, when you invoke vue_object.update(), all the data/options are already within the object.

Hence, what I modified in your code:

  • Defined the Vue.component as var aux;
  • Incorporated the options into the Vue object and invoked this.options in the renderChart()
  • Invoked aux.update() on the EventListener for the button.

I trust this guidance proves beneficial! Should you require further assistance, feel free to inquire!

Please Note: Due to the large size of your chart, its complete display may not be visible on CodePen!

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

Uh oh! An error occurred when trying to submit the form, indicating that "quotesCollection is not defined" in Mongodb Atlas

Displayed below is my server.js file code, along with the error message displayed in the browser post clicking the Submit button. const express = require('express'); const bodyParser = require('body-parser'); const MongoClient = require ...

javascriptnode.jsmongodbexpress

Navigate through each file or image within a directory using Angular

I am facing a challenge with my app where each product has a gallery containing a random number of images, each with a completely unique name. These images are located in /src/assets/images/products/:id/. Currently, I am struggling to loop through and add ...

javascriptnode.jsangulartypescriptstatic-files

Position the image in the exact center both vertically and horizontally

I am trying to center a list of images both vertically and horizontally within their respective li. I want to achieve this using jQuery. How can I align the images in the center of each li element both horizontally and vertically? You can view a demo at c ...

jqueryhtmlcss

Is there a way to determine if two distinct selectors are targeting the same element on a webpage?

Consider the webpage shown below <div id="something"> <div id="selected"> </div> </div> Within playwright, I am using two selectors as follows.. selectorA = "#something >> div >> nth=1&q ...

javascripthtmltypescriptdomplaywright

Issue encountered: Inability to implement asynchronous functionality within a forEach loop while making an API request

When making a GET API call, the code looks like this router.get('/review', async (req, res) => { try { const entity = await Entity.find(); const entityId = []; Object.keys(entity).forEach((key) => { entityId.push(entity[ ...

javascriptnode.jsmongodbexpress

The Angular 9 custom directive is malfunctioning on mobile devices

I recently created a custom directive in Angular 9 that allows users to input only digits and one decimal point. While the directive works perfectly on desktop, it seems not to function at all on mobile devices - almost as if it doesn't exist within t ...

javascriptangulartypescriptangular9mobile-browser

What is the process for defining a global variable within a module in Typescript?

I've already included a global value in my global JavaScript context: const fs = require('fs') For a specific reason, I need to include it in the global scope. Now, I want to create a .d.ts file to declare the global variable with a stron ...

javascripttypescriptelectrontypescript-typings

Merge JSON object information into tables, including column headings

I am currently facing a challenge in loading multiple JSON files into tables within different divs. Here is the structure of my JSON data: JSON file 1: [ { "id": 12345, "code": "final", "error": "", "data": [ ...

javascriptjqueryhtmljsonappend

Vue 2 does not properly transition the initial element when using the `mode=out-in` attribute

In my Vue project, I am using version 2.6.14 and trying to toggle between two buttons by utilizing v-if and v-else. Despite wrapping everything in a transition element, the first button doesn't transition smoothly, neither when appearing nor disappear ...

cssvue.jsvuejs2nuxt.jscss-transitions

I encountered an issue while attempting to link my project to a database. An error popped up stating that the name 'textbox' does not exist in the current context

I encountered an error when trying to connect my project to a live database. The error message stated: the name ‘textbox’ does not exist in the current context. How can I resolve this issue? Below is the aspx.cs code that I used for the connection, wh ...

htmlcsswebforms

jQuery smooth scrolling problem causing a one-second page "blinking" issue

Currently, I have implemented a smooth scrolling effect on my website using the following jQuery code: jQuery('html,body').animate({scrollTop:scrollTarget}, 1000, "swing"); Although the effect works well in general, I have noticed that when mul ...

javascriptjquerycss

JavaScript code in AJAX response functions properly in browsers like Firefox, Chrome, and Opera. However, it encounters issues in Internet Explorer 11, displaying an error message stating

After searching through various posts, I was unable to find a solution to my question. My query involves requesting a jQuery Datepicker via AJAX. I have provided an example for you to review in Firefox, Chrome or Opera: Ajax javascript example Unfortuna ...

javascriptjqueryajaxinternet-explorer-11

The vue-cli-plugin-cordova does not work on the iOS simulator by default

The following steps are outlined: vue create my-app vue add cordova npm run cordova-prepare npm run cordova-serve-browser These steps work fine npm run cordova-serve-ios Some sources suggest changing the above to: new Vue({ el:'#app', ...

cordovavue.js

How to Use JavaScript Function to Rotate an Entire Webpage

For my final project in a web design class, we were tasked with creating a website that showcases our skills. I've completed the assignment and now I want to add some interesting features to make it stand out. I'm interested in using -webkit-tra ...

javascripthtmlcssrotation

Adjustments in margins for printed HTML may vary from page to page in Internet Explorer versions 8 to 11

One challenge I'm facing is with a user-generated report page that is typically printed. There seems to be an unusual bug occurring specifically in Internet Explorer. The layout of the page consists of tables within various divs, all aligned perfectly ...

htmlcss

Issue arises when annotation is utilized in ChartJs, as the tooltip fails to appear

Upon hovering over a dot, only a blue line is displayed without showing a tooltip as expected below: Library Version: "chart.js": "^2.9.3", "chartjs-plugin-annotation": "^0.5.7" Actual : enter image descriptio ...

vue.jschart.js

The PDF format is experiencing compatibility issues when used with the CSS property for page breaks after:

My PDF with CSS page breaks is not functioning properly, as the pages are not breaking as intended. Removing position:absolute solves the issue but leaves space after each page. I suspect it may be a CSS problem, but I'm unsure. If the issue lies wit ...

javascripthtmlcsspdfphantomjs

Unexpected next() error occurred

Currently, I am working on a project using node.js along with express and MongoDB. I have encountered an error that I cannot seem to understand. When I remove the next() function call, everything works perfectly fine. However, when I include next(), it tr ...

javascriptnode.jsexpress

Is the ajax success function failing to work properly in JavaScript?

Although I've searched extensively on Stack Overflow, none of the similar questions seem to solve my issue. The problem I'm facing is that the success function is not triggering the alert message and I can't seem to figure out why. <form ...

javascriptphpjqueryajax

Get the hash value after a specific character using Javascript

I'm currently working on a website with ajax functionality where pages load when clicking on navigation buttons. However, I encounter issues when reloading the page as it defaults back to loading main.html, regardless of the URL. The hash being used i ...

javascriptjqueryajaxjquery-load