Render labels and data with loop inside vue-chart.js

Question

How can I render data with loop

(for; v-for) inside: { labels: [] } and datasets: [{ data:[] }]

in chart using (Vue-Chart.js)

data: {
                    labels: [

                        ***HERE***

                    ],
                    datasets: [{
                        label: "Assets",
                        backgroundColor: ["#4285F6"],
                        data: [

                            ***HERE***

                        ],                 
                    }],
                },

So far, my (render) data is (an array, inside it - few objects - and inside every objects all my data needs):

LABELS: 
this.array[0] ? this.array[0].asset.name : '',
this.array[0] ? this.array[1].asset.name : '',
this.array[0] ? this.array[2].asset.name : '',

DATASETS:
this.array[0] ? this.array[0].amount : '',
this.array[0] ? this.array[1].amount : '',
this.array[0] ? this.array[2].amount : '',

Why don't you create a new array, put data inside it with a loop and then use it in vue chart config? — Pal Singh
– Pal Singh, Commented Oct 10, 2018 at 8:47
in your loop, you check for this.array[0] condition everytime? — Pal Singh
– Pal Singh, Commented Oct 10, 2018 at 8:49
I don't have access to the data(API), so I have to use it in that way :\ Yes, because if not - it returns me undefined. — xx5ko
– xx5ko, Commented Oct 10, 2018 at 8:53

Pal Singh · Accepted Answer · 2018-10-10 09:43:04Z

2

Before your chart config, create a new array and then use it:

var labelsArray = [];
var amountArray = [];
for (var i = 0; i < this.array.length; i++) {
    labelsArray.push(this.array[i] ? this.array[i].asset.name : '');
    amountArray.push(this.array[i] ? this.array[i].amount : '');
}

Vue chart config will go like:

data: {
    labels: labelsArray ,
    datasets: [{
        label: "Assets",
        backgroundColor: ["#4285F6"],
        data: amountArray,                 
    }],
},

answered Oct 10, 2018 at 9:43

Pal Singh

1,9721 gold badge17 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

FullStackOfPancakes Over a year ago

This one helped me out a lot as well!

Collectives™ on Stack Overflow

Render labels and data with loop inside vue-chart.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related