I have gone through the tutorials provided on Chart.js's documentation but I am struggling to work out how to make the data I have fit to the requirements of the library.
My code is as such
const labels = [
'1980',
'1981',
'1982'
]
const dat = [
{"1980":{"legal":{"departments":1, "Foreign Agency":3, Corporation:3}},
"1981":{"legal":{"departments":2, "Foreign Agency":2, Corporation:5}},
"1982":{"legal":{"departments":3, "Foreign Agency":1, Corporation:8}}
}
];
const data1 = {
labels: labels,
datasets: [{
label: 'Department number',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: dat,
parsing: {
yAxisKey: dat[0][1980]["legal"][" departments"]
}
}]
};
const config1 = {
type: 'bar',
data: data1,
options: {
plugins: {
title: {
display: true,
text: 'Stacked Bar Chart of legal entities 1980-1982'
},
},
responsive: true,
scales: {
x: {
stacked: true,
},
y: {
stacked: true
}
}
}
};
const myChart1 = new Chart(
document.getElementById('myChart1'),
config1
);<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.1/chart.min.js"></script>
<canvas id="myChart1" ></canvas>In reality the data is significantly longer, but takes this general form. I also have control over how the data is generated.
Besides the fact that nothing shows up in the graph (no errors generated) my other issue is that specifying the year and class of legal data being displayed is not really a practical approach in the first place. The labels of course ideally should be generated from the data as they are just sitting there.
The intended output would be a stacked bar-chart with values for each of the legal classes represented for each of the years
If you want to use object notation you also have to provide the right x label to chart.js. Also you can't use a dynamic key, your data must be in the same key.
const dat = {
"1980": {
"legal": {
"departments": 1,
"Foreign Agency": 3,
Corporation: 3
},
x: "1980"
},
"1981": {
"legal": {
"departments": 2,
"Foreign Agency": 2,
Corporation: 5
},
x: "1981"
},
"1982": {
"legal": {
"departments": 3,
"Foreign Agency": 1,
Corporation: 8
},
x: "1982"
}
};
const data1 = {
datasets: [{
label: 'Department number',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: Object.values(dat),
parsing: {
yAxisKey: 'legal.departments'
}
}]
};
const config1 = {
type: 'bar',
data: data1,
options: {
plugins: {
title: {
display: true,
text: 'Stacked Bar Chart of legal entities 1980-1982'
},
},
responsive: true,
scales: {
x: {
stacked: true,
},
y: {
stacked: true
}
}
}
};
const myChart1 = new Chart(
document.getElementById('myChart1'),
config1
);<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
<canvas id="myChart1"></canvas>You can also make map all the data to a single array beforehand and provide that:
const labels = [
'1980',
'1981',
'1982'
]
const dat = {
"1980": {
"legal": {
"departments": 1,
"Foreign Agency": 3,
Corporation: 3
},
x: "1980"
},
"1981": {
"legal": {
"departments": 2,
"Foreign Agency": 2,
Corporation: 5
},
x: "1981"
},
"1982": {
"legal": {
"departments": 3,
"Foreign Agency": 1,
Corporation: 8
},
x: "1982"
}
};
const values = Object.values(dat).map(e => (e.legal.departments))
const data1 = {
labels: labels,
datasets: [{
label: 'Department number',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: values
}]
};
const config1 = {
type: 'bar',
data: data1,
options: {
plugins: {
title: {
display: true,
text: 'Stacked Bar Chart of legal entities 1980-1982'
},
},
responsive: true,
scales: {
x: {
stacked: true,
},
y: {
stacked: true
}
}
}
};
const myChart1 = new Chart(
document.getElementById('myChart1'),
config1
);<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
<canvas id="myChart1"></canvas>