[Vuejs]-How can I for loop data in chart js with vue js

by

0👍

✅

You can remove the for loop and use Array.map to get the label and data

vm.transaction_per_day = response.data
var myChart = new Chart(ctxChart, {
  type: 'bar',
  data: {
    labels: vm.transaction_per_day.map(item => item.Day),
    datasets: [{
      label: 'Transaction per day',
      data: vm.transaction_per_day.map(item => item.Amount),
      backgroundColor: [

        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(255, 99, 132, 1)'
      ],
      borderColor: [
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(255, 99, 132, 1)'
      ],
      borderWidth: 1
    }]
  },
  options: {
    title: {
      display: true,
      text: "TRANSACTION GRAPH",
      fontFamily: "sans-serif",
      fontSize: 18
    },
  }
});

Leave a comment