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>
Source: stackoverflow.com
Related Query
- Iterating over an array of objects and stack a Chart JS Bar?
- Chart JS how to display an array of data objects as bar chart
- How can I get my Chart.JS bar chart to stack two data values together on each bar, and print a calculated value on each bar?
- Generate bar chart using chart.js and associative array
- how to write labels along with data on top and bottom of each stack in bar chart
- Initializing Chart Js Multiple times for and Array of Objects
- Chart.js: bar chart first bar and last bar not displaying in full
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- How to add second Y-axis for Bar and Line chart in Chart.js?
- Chart.js Mixed Bar and Line chart with different scales
- Chart.js bar chart : Grid color and hide label
- ng2-charts customize data and whole html content of tooltip displayed when hovering on bar chart
- Can Chart.js combines Line Chart and Bar Chart in one canvas
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- Remove the label and show only value in tooltips of a bar chart
- Showing Percentage and Total In stacked Bar Chart of chart.js
- How to show data values in top of bar chart and line chart in chart.js 3
- Chart Js V2 draw Horizontal Bar(Average) Over Vertical Bar
- to increase space between x axis and first horizontal bar in chart js
- how to customize tool tip while mouse go over bars on Chart js bar chart
- Issue while plotting bar chart with custom x-axis with month and year in chart.js
- Grouped Bar Chart from mySQL database using ChartJS and PHP
- Chart.js Date and Time Bar Chart Not Rendering - Line Works Though
- Chartjs - Set start and end value into a Bar Chart
- Chart.js Bar Chart - grouping and mapping data
- Chart.js v2 - combined stacked bar chart and 2 unstacked lines
- Angular-chartjs Data labels over bar chart
- chart.js bar chart datalabel vanishes on hovering over chart
- Using two JSON objects to make Chart.JS Bar Chart Dynamic in Typescript / Angular
- Click on interactive chart.js bar chart and get value for labels and groups in JS
More Query from same tag
- How can I get chart.js to automatically add colours for dynamic labels?
- Is there a way to style multiple borders on Doughnut chart with Chart.js library?
- Chart.js Thick label gets replaced by three dots
- Chart.js: hide dataset line but keep ticks on y-axis?
- Chart.js PolarArea not able to chance arc width and color
- Update Chart.js plugin
- Highest (green) and Lowest (red) coordinates plot using Chart.Js
- ChartJS - Labels background
- How to update only new data in Chart.JS?
- Chart.js multiTooltip Labels in Pie
- chart.js:4 Uncaught ReferenceError: require is not defined in ionic 2
- How to replace data value(js) with a datatable value?
- Get position in array element
- How to init elements after data is loaded?
- Multipe doughnut charts on one page with text in center using Chart.js
- In a Stacked Line Chart, is there a way to stack multiple Y-Axes to match each graphed line?
- ChartJS Data Overflowing Chart area
- ChartJs Doughnut parsing datasets
- How do I get the current step size of a chartjs chart whose stepSize I have not defined?
- passing json data to chartjs
- Chart.js - add 1 more tick step to an axis
- Why does the horizontal bar size jump when resizing the chart?
- How would I include toBase64Image class using the fxcosta library for Chart.js
- How to implement chart.js in Django?
- Chart.js barchart custom on hover method
- Make pie chart smaller Chart JS
- Type 'string' is not assignable to type 'ChartType'
- Chart.js HTML custom legend issues with doughnut chart
- ChartJS: How to add empty values?
- Enable Stepped lines in Chart.Js