title: Dygraph will not display in Bootstrap card
body: <p>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 <code>graphdiv</code>. I am using <code>this.$refs.graphdiv</code> to try to access it from within my vue script.</p>
  
  <p>If I move the <code>graphdiv &lt;div&gt;</code> 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?</p>
  
  <pre><code>&lt;template&gt;
  &lt;div&gt;
       &lt;div class="card"&gt;
          &lt;div class="card-header"&gt;HEADER&lt;/div&gt;
          &lt;div class="card-body"&gt;
            &lt;div class="row"&gt;
              &lt;div class="col-sm-3" style="width: 100%"&gt;
              &lt;/div&gt;
  
              &lt;div class="col-sm-9"&gt;
                    &lt;div id="graphdiv" style="width: 100%" ref="graphdiv"&gt;&lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;!--Comment: IF I PLACE IT HERE IT WORKS --&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>Here is a reduced version of script:</p>
  
  <pre><code>&lt;script&gt;
  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});
  
      }
  }
  };
  &lt;script&gt;
  </code></pre>
  
  <h2>P.S.</h2>
  
  <p>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?</p>