CODEWITHSUNDEEP
javascriptvue.jsvue-chartjs
Johnson
Johnson

Reputation: 1526

Vue-ChartJS - Circular structure to JSON

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!! =)

Upvotes: 3

Views: 2364

Answers (1)

Jakub Juszczak
Jakub Juszczak

Reputation: 7857

I guess the problem according to your sandbox, is that you are trying to output the datacollection in the template.

If the chart.js data object containing a circular structure, (referencing the object somewhere in the childobject), this can lead to the error.

Because if you print out the object in your vue template, vue uses JSON.stringify() in the background. Which can not resolve circular structures.

Upvotes: 4

Related Questions