Vue-ChartJS - Circular structure to JSON

Expected Behavior

Change any v-model without error

Actual Behavior

i’m using Vue-Chartjs lib, and i’m trying to make a line chart. Well, i have done it with this code below, it works! The graph is drawed. But when i change the value of any variable inside my Vue Data (Like this test input, in the example.). It evals this error in console. I think it is because of VueChartJS, because if i remove the graph, everything works well.

TypeError: Converting circular structure to JSON

line.js

import {Line, mixins} from 'vue-chartjs'
const { reactiveProp } = mixins

export default {
   extends: Line,
   mixins: [reactiveProp],
   props: ['options'],
   mounted() {
      this.renderChart(this.chartData, this.options);
   }
}

dashboard.vue

<line-chart :chart-data="dataCollection" :height="100"></line-chart>
 <input v-model="test">

   import LineChart from './line-chart.js';
   export default {
      components: {LineChart},
      data: () => ({ 
         dataCollection:  {},
         test: "some input" 
      }),
      created () { 
         this.dataCollection:  {
                  "labels": ["0:00", "1:00", "2:00", "3:00", "4:00", "5:00"],
                  "datasets": [{
                     "label": "Test",
                     "backgroundColor": "#00CC6A",
                     "borderColor": "#00CC6A",
                     "data": [0, 23, 51.75, 27, 34, 12]
                  }]
               }
        }
    }

What am i doing wrong?

Thanks!! =)

Environment

• vue.js version: 2.5.13
• vue-chart.js version: 3.3.1
• npm version: 5.6.0

[apertureless]

Well it seems that this error only occurs if you’re trying to output the datacollection in your template

 <div id="app">
    {{dataCollection}}
    <line-chart :chart-data="dataCollection" :height="100"></line-chart>
    <input v-model="test">
  </div>

If you remove the output {{ dataCollection }} it seems fine.

https://codesandbox.io/s/0q3p8n6lxw

So I guess this is not related to vue-chartjs. More to some vue internals.

[agriboz]

the reason is _meta object. i will show you an example of it

example