title: Laravel Nova - Custom Card w/ Package
body: <p>I created a custom card in order to use <a href="https://github.com/ankane/vue-chartkick" rel="nofollow noreferrer">Chartkick</a>. This custom card will have a select dropdown which will make an Axios request to get data from an API and display it in the chart though my issue is the chart will not display even with hard-coded dummy data as can be seen below:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
      &lt;card class="flex flex-col items-center justify-center"&gt;
          &lt;span&gt;Ben&lt;/span&gt;
          &lt;line-chart class="lcs" :data="chart_data"&gt;&lt;/line-chart&gt;
      &lt;/card&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Vue from "vue";
  import Chartkick from "vue-chartkick";
  import Chart from "chart.js";
  Vue.use(Chartkick.use(Chart));
  export default {
      props: ["card"],
      data() {
          return {
              chart_data: {
                  "2017-05-13": 2,
                  "2017-05-14": 5
              }
          };
      }
  };
  &lt;/script&gt;
  
  &lt;style scoped&gt;
  .flex {
      min-height: 950px;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>The card is working and displaying on the dashboard. I simply placed span tags and output a name to confirm this as can be seen here:</p>
  
  <p><a href="https://i.stack.imgur.com/EfTRS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EfTRS.png" alt="enter image description here"></a></p>
  
  <p>I played with the CSS of the box to make sure the chart wasn't being hidden as can be seen from the changed shape.</p>
  
  <p>I can't seem to get the chart to display and am unsure of what is being done wrong.</p>