title: vue-chart multiple instance initialization
body: <p>I would like to have multiple vue-chart.js graphs, each one refreshing (adding a new data point) every 5s. Value comes from a sensor and it is passed with props (I am writing UI for node-red application, which is I think not relevant to the problem).</p>
  <p>I managed to get one graph working perfectly, but if I place 2 graphs, the passed values are displayed in both graphs simultaneously (not just in the one, that should diplay them).</p>
  <p>See for youself here <a href="https://codesandbox.io/s/vue-template-forked-6o5mf" rel="nofollow noreferrer">working CodeSandBox demo</a></p>
  <p>What puzzles me is, that the  <code>console.log(this.myChart)</code> in <code>adddata</code> shows &quot;correct&quot; graph (different <code>id</code>, different <code>context</code>). I think I have created individual graph instances and still, I can not add data to only one of those.</p>
  <p>I do not use vue very offten, I may be missing something important. Thank you!</p>
  <p>Component <code>Test.vue</code></p>
  <pre class="lang-js prettyprint-override"><code>&lt;template&gt;
    &lt;div&gt;
      &lt;canvas :id=&quot;name&quot;&gt;&lt;/canvas&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Chart from &quot;chart.js&quot;;
  
  const chartSetting = {
    type: &quot;line&quot;,
    data: {
      datasets: [
        {
          label: &quot;setpoint&quot;,
          data: [],
          borderColor: &quot;blue&quot;,
          borderWidth: 3,
        },
      ],
    },
    options: {},
  };
  
  let interval;
  
  export default {
    name: &quot;test&quot;,
    data() {
      return {
        myChart: null,
        chartSetting: chartSetting,
      };
    },
    props: [&quot;id&quot;, &quot;name&quot;, &quot;setpoint&quot;],
    methods: {
      adddata(setpoint, time) {
        this.myChart.data.datasets[0].data.push(setpoint);
        this.myChart.data.labels.push(time);
        this.myChart.update();
        console.log(`now printing ${setpoint} to this graph:`);
        console.log(this.myChart);
      },
  
      createChart(chartId, chardData) {
        const ctx = document.getElementById(chartId);
        // Save reference
        this.myChart = new Chart(ctx, {
          type: chardData.type,
          data: chardData.data,
          options: chardData.options,
        });
  
        interval = setInterval(() =&gt; {
          let date = new Date();
          let seconds = date.getSeconds();
          this.adddata(this.setpoint, seconds);
        }, 5000);
      },
    },
  
    mounted() {
      this.createChart(this.name, this.chartSetting);
    },
  };
  &lt;/script&gt;
  
  </code></pre>
  <p>App.vue</p>
  <pre class="lang-js prettyprint-override"><code>&lt;template&gt;
    &lt;div id=&quot;app&quot;&gt;
      &lt;p&gt;
        graphs get new data from 2 different sensors every 5 seconds. Here
        simulated as &quot;6&quot; and &quot;3&quot;
      &lt;/p&gt;
      &lt;h3&gt;this graph should only show 6&lt;/h3&gt;
      &lt;test name=&quot;grap1&quot; id=&quot;1&quot; setpoint=&quot;6&quot; /&gt;
      &lt;h3&gt;this graph should only show 3&lt;/h3&gt;
      &lt;test name=&quot;grap2&quot; id=&quot;2&quot; setpoint=&quot;3&quot; /&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Test from &quot;./components/Test&quot;;
  
  export default {
    name: &quot;App&quot;,
    components: {
      Test,
    },
  };
  &lt;/script&gt;
  </code></pre>