I’m trying to display a graph inside a modal window when a user clicks a button. The modal window is set to display: none; until the button is clicked, which then is set to display: flex;
I can take the chart outside of the modal, and it will work fine.
If I change the height of the chart (from 0px) in dev tools, the chart will appear.
there is created a codepen which demonstrates the problem. Just comment/un-comment the code inside/outside of the modal to see.
The code for the graph is something I took from another codepen example I found.
Another stackoverflow answer provided some help, however when struggling to implement the solution into my own code. This was the answer I found:
“It appears that the issue is that the canvas and all its parent nodes cannot have display none at the time the chart call is made so if you are using a chart in a popup you need to show the popup, construct the chart and then hide the popup.”
So you’re looking for something like this , I suppose?
If you check out the Vue-chartJs docs you’ll see this (troubleshooting page):
If you are using the mixin you need to pass in the options as a prop names options. This is important because the mixin will call chart.js update() method or destroy and render a new chart. If the mixin renders a new chart it calls this.renderChart(this.chartData, this.options).
That means that the options need to be saved in the vue.js object. By doing this, when you call vue_object.update() , all the data/options are already in the object.
So, what I changed in the code:
Declared the Vue.component as a var aux;
Added the options to the vue.js object and called this.options in the renderChart()
Called aux.update() on the EventListener for the button.
Hope this helps you out! If you need anything else, you’re welcome to ask!
Note: Since the chart is very big, it might not be fully visible in the codepen!