[Vuejs]-ChartJS inside modal/popup window, chart displays 0px height

by

0👍

✅

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 your 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 your options need to be saved in the Vue object. By doing this, when you call vue_object.update() , all the data/options are already in the object.

So, what I changed in your code:

  • Declared the Vue.component as a var aux;
  • Added the options to the Vue object and called this.options in the renderChart()
  • Called aux.update() on your EventListener for the button.

Hope this helps you out! If you need anything else, you’re welcome to ask!

Note: Since your chart is very big, it might not be fully visible in the codepen!

Leave a comment