title: How can I display desired/particular chart in App.vue from Charts.vue which contains different charts in Vuejs
body: <p>I am using Chartjs in order to display charts, I have created charts.vue component in which different charts are defined.</p>
  <p>Here is my <strong>Charts.vue:</strong></p>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;chart-containr&quot;&gt;
      &lt;canvas ref=&quot;chart1&quot;&gt;&lt;/canvas&gt;
      &lt;canvas ref=&quot;chart2&quot;&gt;&lt;/canvas&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  ...
  &lt;/script&gt;
  </code></pre>
  <p>Here is my <strong>App.vue:</strong></p>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;content-1&quot;&gt;
      &lt;charts/&gt;  &lt;-- Here i want to display my chart 1
    &lt;/div&gt;
  
    ....
  
    &lt;div class=&quot;content-8&quot;&gt;
      &lt;charts/&gt;  &lt;-- Here i want to display my chart 2
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import chart from './Charts'
  exprt default{
    name: 'App',
    component: {chart}
  
      ....
  
  }
  </code></pre>
  
  <p>As you can see in my App.vue, i have imported the Charts.vue and i have used charts as a component, but if i use it in the template part as  both the charts are display one after another. Rather i want chart1 in the 1st div and chart2 in the 8th div.</p>
  <p>Please help me in this, i want to display particular chart from the charts.vue in different part of App.vue. I tried using props but dint work out.</p>