Vue-chartjs: Vue-ChartJS - Circular structure to JSON

[VitorTakara]

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]

Please provide a reproduction (codepen / jsfiddle / ...)

Generally as your v-model input has nothing to do with the chart, I don't think that this is the root of the problem.

[VitorTakara]

@apertureless
Hi! Yes, of course.

I was able to reproduce the error.
Here you are a CodeSandBox
If you edit the input, it will eval the error Circular JSON

To solve the error, you must remove the _{{dataCollection}}_ from the view.

Now my question is: Why??
I'm big confused about this. Is this a bug? for me it does not make sense haha

[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.

[VitorTakara]

Hmm ok @apertureless ... Problably it is a vue error.
But do you have any idea why this is happening? I'm just curious. ;)

Thanks!!

[apertureless]

I guess because the chartData of chart.js has some circular structure in it. And if you print it in the template with the {{ }} template tags, Vue will run something like JSON.stringify().

However it can not stringify circular strucutures.

For example:

const chartData = {
    a: 'SomeData'
    b: chartData
}

JSON.stringify() will then throw the error.

[agriboz]

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

example

[mike-seekwell]

@agriboz and @apertureless are right, this was happening to me, I was adding the ChartJS datacollection to a deeply nested JSON and rendering that object in the template, which was throwing this error