[Vuejs]-Rearranging an array to fit into Vue-ApexCharts

by

0👍

✅

Given response is your array of backend data, you would use Array.map to create a new array of objects formatted for use with ApexCharts

const data = response.map(obj => {
  return {
    x: obj.name,
    y: [
      new Date(obj.created_at).getTime(),
      new Date(obj.date_end).getTime()
    ],
    fillColor: getColor(obj.name)
  }
})

function getColor(name) {
  switch(name) {
    case 'Analysis': return '#008FFB';
    case 'Design': return '#00E396';
    case 'Coding': return '#775DD0';
    case 'Testing': return '#FEB019';
    case 'Deployment': return '#FF4560';
    default: return '#000';
  }
}

Leave a comment