I can't understand what I'm doing wrong, I need it to be like this example: Corretly graphic as example
This is the json data I receive:
[
{
"label": "Others",
"type": "bar",
"stack": "Person 1",
"data": [
22,
0,
80
]
},
{
"label": "AWS",
"type": "bar",
"stack": "Person 1",
"data": [
2,
0,
21
]
},
{
"label": "Github Enterprise Cloud - Organization",
"type": "bar",
"stack": "Person 1",
"data": [
1,
0,
8
]
},
{
"label": "Okta Admin Console",
"type": "bar",
"stack": "Person 1",
"data": [
2,
0,
10
]
},
{
"label": "PacificTimeSheet",
"type": "bar",
"stack": "Person 1",
"data": [
0,
0,
12
]
},
{
"label": "ArgoCD - Dev",
"type": "bar",
"stack": "Person 1",
"data": [
0,
0,
0
]
},
{
"label": "kubero",
"type": "bar",
"stack": "Person 1",
"data": [
0,
0,
0
]
},
{
"label": "Okta Dashboard",
"type": "bar",
"stack": "Person 1",
"data": [
0,
0,
0
]
},
{
"label": "ArgoCD - Production IPV6",
"type": "bar",
"stack": "Person 1",
"data": [
0,
0,
0
]
},
{
"label": "Okta Browser Plugin",
"type": "bar",
"stack": "Person 1",
"data": [
0,
0,
0
]
},
{
"label": "Vercel",
"type": "bar",
"stack": "Person 1",
"data": [
0,
0,
0
]
},
{
"label": "ONEDigital Portal Prod",
"type": "bar",
"stack": "Person 1",
"data": [
0,
0,
6
]
},
{
"label": "Others",
"type": "bar",
"stack": "Person 2",
"data": [
8,
0,
16
]
},
{
"label": "AWS",
"type": "bar",
"stack": "Person 2",
"data": [
2,
0,
1
]
},
{
"label": "Github Enterprise Cloud - Organization",
"type": "bar",
"stack": "Person 2",
"data": [
0,
0,
2
]
},
{
"label": "Okta Admin Console",
"type": "bar",
"stack": "Person 2",
"data": [
0,
0,
0
]
},
{
"label": "PacificTimeSheet",
"type": "bar",
"stack": "Person 2",
"data": [
0,
0,
1
]
},
{
"label": "ArgoCD - Dev",
"type": "bar",
"stack": "Person 2",
"data": [
0,
0,
0
]
},
{
"label": "kubero",
"type": "bar",
"stack": "Person 2",
"data": [
0,
0,
0
]
},
{
"label": "Okta Dashboard",
"type": "bar",
"stack": "Person 2",
"data": [
0,
0,
0
]
},
{
"label": "ArgoCD - Production IPV6",
"type": "bar",
"stack": "Person 2",
"data": [
0,
0,
0
]
},
{
"label": "Okta Browser Plugin",
"type": "bar",
"stack": "Person 2",
"data": [
0,
0,
0
]
},
{
"label": "Vercel",
"type": "bar",
"stack": "Person 2",
"data": [
0,
0,
0
]
},
{
"label": "ONEDigital Portal Prod",
"type": "bar",
"stack": "Person 2",
"data": [
0,
0,
0
]
},
{
"label": "Others",
"type": "bar",
"stack": "Person 3",
"data": [
18,
0,
217
]
},
{
"label": "AWS",
"type": "bar",
"stack": "Person 3",
"data": [
3,
0,
17
]
},
{
"label": "Github Enterprise Cloud - Organization",
"type": "bar",
"stack": "Person 3",
"data": [
1,
0,
7
]
},
{
"label": "Okta Admin Console",
"type": "bar",
"stack": "Person 3",
"data": [
0,
0,
11
]
},
{
"label": "PacificTimeSheet",
"type": "bar",
"stack": "Person 3",
"data": [
0,
0,
2
]
},
{
"label": "ArgoCD - Dev",
"type": "bar",
"stack": "Person 3",
"data": [
0,
0,
0
]
},
{
"label": "kubero",
"type": "bar",
"stack": "Person 3",
"data": [
4,
0,
0
]
},
{
"label": "Okta Dashboard",
"type": "bar",
"stack": "Person 3",
"data": [
2,
0,
4
]
},
{
"label": "ArgoCD - Production IPV6",
"type": "bar",
"stack": "Person 3",
"data": [
0,
0,
0
]
},
{
"label": "Okta Browser Plugin",
"type": "bar",
"stack": "Person 3",
"data": [
3,
0,
3
]
},
{
"label": "Vercel",
"type": "bar",
"stack": "Person 3",
"data": [
0,
0,
0
]
},
{
"label": "ONEDigital Portal Prod",
"type": "bar",
"stack": "Person 3",
"data": [
0,
0,
0
]
}
]
This is my initial code:
const parsed = {
labelsX2: ["May", "June", "July"],
labelsX: ["Person 1", "Person 2", "Person 3", "Person 1", "Person 2", "Person 3", "Person 1", "Person 2", "Person 3"], // example names but should be according json stacks
datasets: json.map((item) => {
console.info("item: ", item);
const { label, data, stack } = item;
return {
...item,
label,
data,
stack
};
}),
};
const [chartData, setChartData] = React.useState(parsed);
const options = {
plugins: {
tooltip: {
title: "Total",
},
subtitle: {
display: true,
text: "Number of events",
position: 'left'
},
legend: {
display: true,
position: 'right',
},
},
scales:{
x: {
type: 'category',
stacked: true,
labels: parsed.labelsX,
},
x2: {
type: 'category',
stacked: true,
labels: parsed.labelsX2,
},
y: {
stacked: true,
},
}
};
// ...
<div className="chart-container">
<h2 style={{textAlign: "center"}}>Bar Chart</h2>
<Bar
data={chartData}
options={options}
/>
</div>
It always gets broken like this and I can't understand what I'm handling wrong. If anyone can help me, I would appreciate it. I have been looking at documentation and forums for a long time and I have not found a solution.
As explained previously, I need the graph to be similar to the example in the first image: Corretly graphic as example
But it is returning incorrectly and I can't understand what I'm doing wrong and how I can fix it. Maybe this isn't just my problem and I already consider this type of graph complex.
The root of the issue seems to be a wrong idea of how bar data stacks work (there's probably not enough material
in the official documentation on those). First of all - there's no connection between the name of a stack and the x axis category name.
The correct graphic that you link to shows that each category (person name) has only one bar in its space.
This means there's only one stack for the whole chart. Multiple (n) stacks are used to group data
in n bars for each category.
The data is grouped by the primary x axis categories. You have 9 categories on the primary x axis. (Chart.js makes no connection between the names of the categories - since you explicitly give the labels names, it doesn't verify that some categories have the same name.)
Thus, the system expects each dataset to be a 9-value array. If there are less than 9, the corresponding value is
undefined and replaced internally by null. Since all your datasets have 3 data points, you'll have no data outside the
first three categories. If you want the data to start from, let's say 4 you have to fill the first 3 positions with null.
This gives us a way to group your "json" data:
const labelsX2 = ["May", "June", "July"],
labelsX = ["Person 1", "Person 2", "Person 3", "Person 1", "Person 2", "Person 3", "Person 1", "Person 2", "Person 3"],
labelsXWithIdx = labelsX.map((x, i) => [x, i]);
datasets = [];
json.forEach(({ label, data, stack }) => {
const indices = labelsXWithIdx.filter(([name]) => name === stack).map(([_, i]) => i);
// will be [0, 3, 6], or [1, 4, 7], or [2, 5, 8]
let dataset = datasets.find(({label: existingLabel}) => (existingLabel === label));
if(!dataset){
dataset = {label, data: Array(labelsX.length).fill(null)};
datasets.push(dataset);
}
data.forEach((value, i) => {
dataset.data[indices[i]] = value;
});
});
snippet:
const json = [
{
"label": "Others",
"type": "bar",
"stack": "Person 1",
"data": [
22,
0,
80
]
},
{
"label": "AWS",
"type": "bar",
"stack": "Person 1",
"data": [
2,
0,
21
]
},
{
"label": "Github Enterprise Cloud - Organization",
"type": "bar",
"stack": "Person 1",
"data": [
1,
0,
8
]
},
{
"label": "Okta Admin Console",
"type": "bar",
"stack": "Person 1",
"data": [
2,
0,
10
]
},
{
"label": "PacificTimeSheet",
"type": "bar",
"stack": "Person 1",
"data": [
0,
0,
12
]
},
{
"label": "ArgoCD - Dev",
"type": "bar",
"stack": "Person 1",
"data": [
0,
0,
0
]
},
{
"label": "kubero",
"type": "bar",
"stack": "Person 1",
"data": [
0,
0,
0
]
},
{
"label": "Okta Dashboard",
"type": "bar",
"stack": "Person 1",
"data": [
0,
0,
0
]
},
{
"label": "ArgoCD - Production IPV6",
"type": "bar",
"stack": "Person 1",
"data": [
0,
0,
0
]
},
{
"label": "Okta Browser Plugin",
"type": "bar",
"stack": "Person 1",
"data": [
0,
0,
0
]
},
{
"label": "Vercel",
"type": "bar",
"stack": "Person 1",
"data": [
0,
0,
0
]
},
{
"label": "ONEDigital Portal Prod",
"type": "bar",
"stack": "Person 1",
"data": [
0,
0,
6
]
},
{
"label": "Others",
"type": "bar",
"stack": "Person 2",
"data": [
8,
0,
16
]
},
{
"label": "AWS",
"type": "bar",
"stack": "Person 2",
"data": [
2,
0,
1
]
},
{
"label": "Github Enterprise Cloud - Organization",
"type": "bar",
"stack": "Person 2",
"data": [
0,
0,
2
]
},
{
"label": "Okta Admin Console",
"type": "bar",
"stack": "Person 2",
"data": [
0,
0,
0
]
},
{
"label": "PacificTimeSheet",
"type": "bar",
"stack": "Person 2",
"data": [
0,
0,
1
]
},
{
"label": "ArgoCD - Dev",
"type": "bar",
"stack": "Person 2",
"data": [
0,
0,
0
]
},
{
"label": "kubero",
"type": "bar",
"stack": "Person 2",
"data": [
0,
0,
0
]
},
{
"label": "Okta Dashboard",
"type": "bar",
"stack": "Person 2",
"data": [
0,
0,
0
]
},
{
"label": "ArgoCD - Production IPV6",
"type": "bar",
"stack": "Person 2",
"data": [
0,
0,
0
]
},
{
"label": "Okta Browser Plugin",
"type": "bar",
"stack": "Person 2",
"data": [
0,
0,
0
]
},
{
"label": "Vercel",
"type": "bar",
"stack": "Person 2",
"data": [
0,
0,
0
]
},
{
"label": "ONEDigital Portal Prod",
"type": "bar",
"stack": "Person 2",
"data": [
0,
0,
0
]
},
{
"label": "Others",
"type": "bar",
"stack": "Person 3",
"data": [
18,
0,
217
]
},
{
"label": "AWS",
"type": "bar",
"stack": "Person 3",
"data": [
3,
0,
17
]
},
{
"label": "Github Enterprise Cloud - Organization",
"type": "bar",
"stack": "Person 3",
"data": [
1,
0,
7
]
},
{
"label": "Okta Admin Console",
"type": "bar",
"stack": "Person 3",
"data": [
0,
0,
11
]
},
{
"label": "PacificTimeSheet",
"type": "bar",
"stack": "Person 3",
"data": [
0,
0,
2
]
},
{
"label": "ArgoCD - Dev",
"type": "bar",
"stack": "Person 3",
"data": [
0,
0,
0
]
},
{
"label": "kubero",
"type": "bar",
"stack": "Person 3",
"data": [
4,
0,
0
]
},
{
"label": "Okta Dashboard",
"type": "bar",
"stack": "Person 3",
"data": [
2,
0,
4
]
},
{
"label": "ArgoCD - Production IPV6",
"type": "bar",
"stack": "Person 3",
"data": [
0,
0,
0
]
},
{
"label": "Okta Browser Plugin",
"type": "bar",
"stack": "Person 3",
"data": [
3,
0,
3
]
},
{
"label": "Vercel",
"type": "bar",
"stack": "Person 3",
"data": [
0,
0,
0
]
},
{
"label": "ONEDigital Portal Prod",
"type": "bar",
"stack": "Person 3",
"data": [
0,
0,
0
]
}
];
const labelsX2 = ["May", "June", "July"],
labelsX = ["Person 1", "Person 2", "Person 3", "Person 1", "Person 2", "Person 3", "Person 1", "Person 2", "Person 3"],
labelsXWithIdx = labelsX.map((x, i) => [x, i]);
datasets = [];
json.forEach(({ label, data, stack }) => {
const indices = labelsXWithIdx.filter(([name])=>name === stack).map(([_, i]) => i);
// will be [0, 3, 6], or [1, 4, 7], or [2, 5, 8]
let dataset = datasets.find(({label: existingLabel}) => (existingLabel === label));
if(!dataset){
dataset = {label, data: Array(labelsX.length).fill(null)};
datasets.push(dataset);
}
data.forEach((value, i) => {
dataset.data[indices[i]] = value;
});
});
const parsed = {
labelsX2,
labelsX,
datasets,
};
const options = {
plugins: {
tooltip: {
title: "Total",
},
subtitle: {
display: true,
text: "Number of events",
position: 'left'
},
legend: {
display: true,
position: 'right',
},
},
scales:{
x: {
type: 'category',
stacked: true,
labels: parsed.labelsX,
},
x2: {
type: 'category',
//stacked: true,
labels: parsed.labelsX2,
},
y: {
stacked: true,
},
}
};
new Chart('myChart', {type: "bar", data: parsed, options});<div style="height: 300px">
<canvas id="myChart">
</canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>