Dygraph will not display in Bootstrap card

Question

I want to create a dygraph graph within the Bootstrap card body's second column (it just looks nice and clean). The div used by dygraph is graphdiv. I am using this.$refs.graphdiv to try to access it from within my vue script.

If I move the graphdiv <div> outside the card div then it works (see the comment). Why will the dygraph not work within the bootstrap card? Is it just one of those compatibility things one must log with the developer and wait for a fix?

<template>
<div>
     <div class="card">
        <div class="card-header">HEADER</div>
        <div class="card-body">
          <div class="row">
            <div class="col-sm-3" style="width: 100%">
            </div>

            <div class="col-sm-9">
                  <div id="graphdiv" style="width: 100%" ref="graphdiv"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
<!--Comment: IF I PLACE IT HERE IT WORKS -->
</div>
</template>

Here is a reduced version of script:

<script>
import Dygraph from "dygraphs";
export default {
methods:{
    plot_chart_series() {
      //dataset = my data that I want to plot
      const g = new Dygraph(this.$refs.graphdiv, dataset, {//options});

    }
}
};
<script>

P.S.

My reason for using dygraph is I want to plot a dataset which is rather large (+-30000 datapoints), chart.js and Apexchart cannot manage that (I spent the better part of 3 hours trying to get them working). If there is no fix for my issue above, which other graphing libraries are there which are Vue friendly which can handle large datasets?

Answer 1

Workaround

I have managed to find a work-around and I can at least relatively narrow the problem and say that I do not think it is bootstrap.

    <div class="card" ref="carder">
      <div class="card-header">Graph</div>
      <div class="card-body">
        <div class="row">
          <div class="col-sm-3">
            <button>A_BUTTON</button>
          </div>
          <div class="col-sm-9">
            <div ref="graphdiv" style="width: 100%"></div>
          </div>
        </div>
      </div>
    </div>

The above code snippet worked for me.

Changes to original:

1. I had an id="some_id" property in the containing parent div which I removed.
2. The entire card was wrapped in another div. This div had a ref="some_ref" property which I used from the Vue script to toggle the visibility. I did this with this.$refs.some_ref.style.display = "block"; & this.$refs.some_ref.style.display = "none";. I changed it to the following this.$refs.some_ref.style.visibility = "hidden"; and just changed the hidden to visible when I wanted to show the card. (It does not bother me that the hidden element still consumes space)

If I revert change number 2 above to the original then it fails to display. I still cannot explain it but it works.