score:1

Accepted answer

given your backend data present in an array named basedata, you could use the array.map() and object.values() methods in order to generate the datasets as follows:

const colors = ['green', 'red'];
const datasets = basedata.map((o, i) => ({
  label: o.user.username,
  data: object.values(o.hours),
  backgroundcolor: colors[i]
}));

please take a look at your amended code below:

const basedata = [{
    "user": {
      "username": "erik",
      "first_name": "erik",
      "email": "erik@admin.com"
    },
    "hours": {
      "day_1": 13.0,
      "day_2": 14.0,
      "day_3": 9.0,
      "day_4": 8.0,
      "day_5": 8.0,
      "day_6": 3.0,
      "day_7": null
    },
    "project": 21,
    "year": 2020,
    "week": 37
  },
  {
    "user": {
      "username": "mega",
      "first_name": "boy",
      "email": "mega@boy.com"
    },
    "hours": {
      "day_1": 5.0,
      "day_2": 10.0,
      "day_3": 8.0,
      "day_4": 8.0,
      "day_5": null,
      "day_6": null,
      "day_7": null
    },
    "project": 21,
    "year": 2020,
    "week": 37
  }
];

const colors = ['green', 'red'];
const datasets = basedata.map((o, i) => ({
  label: o.user.username,
  data: object.values(o.hours),
  backgroundcolor: colors[i]
}));

new chart('canvas', {
  type: 'bar',
  data: {
    labels: ['mon', 'tues', 'wed', 'thurs', 'fri', 'sat', 'sun'],
    datasets: datasets
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: 'weekly summary'
    },
    scales: {
      yaxes: [{
        stacked: true,
        ticks: {
          beginatzero: true
        }
      }],
      xaxes: [{
        stacked: true
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.9.3/chart.min.js"></script>
<canvas id="canvas"></canvas>


Related Query

More Query from same tag