How to make this chart?

[Mr-Unfreeze]

Hello,

I'm a rookie trying to build a web app with no-code. I have no background in coding but I do my best to learn. I come to ask for your support here in creating a chart.

On my future web app, users can set 1 to many objectives. With each objective comes a financial projection that reflects over time the evolution of the investment until reaching the target objective's amount. The calculation is done in the back end on Xano (see below)

I would like to make a stacked bar chart showing each objective on top of each other, a bit like below.

I tried to do it on this: https://www.chartjs.org/docs/latest/samples/bar/stacked.html but I just can't make it work. Could somebody help?

Thank you!

[stockiNail]

@Mr-Unfreeze it could help to have the data of the datasets (the data you get from backend).

[Mr-Unfreeze]

Hi @stockiNail - Many thanks for your answer. Here is a subset of the data for 1 user. As you can see, objectives can have different beginning and end dates (i.e. when the user sets the objectives and when it's realised) so for the labels I don't know how to proceed.

Sorry for the below it's quite "long":

---

[
{
id: 
6
,
user_information_id: 
7
,
goals_id: 
15
,
Goal_set_date: 
08.02.2024
,
Goal_deadline: 
25.10.2024
,
Monthly_allocation: 
2000
,
_user_information: {
id: 
7
Role: 
Client
,
name: 
Roger
Target_result: 
60000.00000000001
,
periods: [
{
period: 
4013
,
month: 
08.04.2024
},
{
period: 
6038
,
month: 
08.05.2024
},
{
period: 
8077
,
month: 
08.06.2024
},
{
period: 
10127
,
month: 
08.07.2024
},
{
period: 
12191
,
month: 
08.08.2024
},
{
period: 
14268
,
month: 
08.09.2024
},
{
period: 
16358
,
month: 
08.10.2024
},
{
period: 
18461
,
month: 
08.11.2024
},
{
period: 
20578
,
month: 
08.12.2024
},
{
period: 
22708
,
month: 
08.01.2025
},
{
period: 
24851
,
month: 
08.02.2025
},
{
period: 
27008
,
month: 
08.03.2025
},
{
period: 
29178
,
month: 
08.04.2025
},
{
period: 
31362
,
month: 
08.05.2025
},
{
period: 
33560
,
month: 
08.06.2025
},
{
period: 
35772
,
month: 
08.07.2025
},
{
period: 
37997
,
month: 
08.08.2025
},
{
period: 
40237
,
month: 
08.09.2025
},
{
period: 
42491
,
month: 
08.10.2025
},
{
period: 
44759
,
month: 
08.11.2025
},
{
period: 
47041
,
month: 
08.12.2025
},
{
period: 
49338
,
month: 
08.01.2026
},
{
period: 
51649
,
month: 
08.02.2026
},
{
period: 
53975
,
month: 
08.03.2026
},
{
period: 
56316
,
month: 
08.04.2026
},
{
period: 
58671
,
month: 
08.05.2026
},
{
period: 
60000
,
month: 
08.06.2026
}
],
},
{
id: 
7
,
user_information_id: 
2
,
goals_id: 
20
,
Goal_set_date: 
23.09.2023
,
Goal_deadline: 
15.05.2025
,
Monthly_allocation: 
50
,
_user_information: {
id: 
2
,
Role: 
Client
,
name: 
Mike
Target_result: 
5000
,
periods: [
{
period: 
101
,
month: 
23.11.2023
},
{
period: 
151
,
month: 
23.12.2023
},
{
period: 
201
,
month: 
23.01.2024
},
{
period: 
251
,
month: 
23.02.2024
},
{
period: 
301
,
month: 
23.03.2024
},
{
period: 
352
,
month: 
23.04.2024
},
{
period: 
402
,
month: 
23.05.2024
},
{
period: 
453
,
month: 
23.06.2024
},
{
period: 
503
,
month: 
23.07.2024
},
{
period: 
554
,
month: 
23.08.2024
},
{
period: 
605
,
month: 
23.09.2024
},
{
period: 
655
,
month: 
23.10.2024
},
{
period: 
706
,
month: 
23.11.2024
},
{
period: 
757
,
month: 
23.12.2024
},
{
period: 
808
,
month: 
23.01.2025
},
{
period: 
859
,
month: 
23.02.2025
},
{
period: 
910
,
month: 
23.03.2025
},
{
period: 
961
,
month: 
23.04.2025
},
{
period: 
1012
,
month: 
23.05.2025
},
{
period: 
1064
,
month: 
23.06.2025
},
{
period: 
1115
,
month: 
23.07.2025
},
{
period: 
1166
,
month: 
23.08.2025
},
{
period: 
1218
,
month: 
23.09.2025
},
{
period: 
1269
,
month: 
23.10.2025
},
{
period: 
1321
,
month: 
23.11.2025
},
{
period: 
1373
,
month: 
23.12.2025
},
{
period: 
1424
,
month: 
23.01.2026
},
{
period: 
1476
,
month: 
23.02.2026
},
{
period: 
1528
,
month: 
23.03.2026
},
{
period: 
1580
,
month: 
23.04.2026
},
{
period: 
1632
,
month: 
23.05.2026
},
{
period: 
1684
,
month: 
23.06.2026
},
{
period: 
1736
,
month: 
23.07.2026
},
{
period: 
1788
,
month: 
23.08.2026
},
{
period: 
1840
,
month: 
23.09.2026
},
{
period: 
1893
,
month: 
23.10.2026
},
{
period: 
1945
,
month: 
23.11.2026
},
{
period: 
1998
,
month: 
23.12.2026
},
{
period: 
2050
,
month: 
23.01.2027
},
{
period: 
2103
,
month: 
23.02.2027
},
{
period: 
2155
,
month: 
23.03.2027
},
{
period: 
2208
,
month: 
23.04.2027
},
{
period: 
2261
,
month: 
23.05.2027
},
{
period: 
2313
,
month: 
23.06.2027
},
{
period: 
2366
,
month: 
23.07.2027
},
{
period: 
2419
,
month: 
23.08.2027
},
{
period: 
2472
,
month: 
23.09.2027
},
{
period: 
2525
,
month: 
23.10.2027
},
{
period: 
2579
,
month: 
23.11.2027
},
{
period: 
2632
,
month: 
23.12.2027
},
{
period: 
2685
,
month: 
23.01.2028
},
{
period: 
2738
,
month: 
23.02.2028
},
{
period: 
2792
,
month: 
23.03.2028
},
{
period: 
2845
,
month: 
23.04.2028
},
{
period: 
2899
,
month: 
23.05.2028
},
{
period: 
2953
,
month: 
23.06.2028
},
{
period: 
3006
,
month: 
23.07.2028
},
{
period: 
3060
,
month: 
23.08.2028
},
{
period: 
3114
,
month: 
23.09.2028
},
{
period: 
3168
,
month: 
23.10.2028
},
{
period: 
3222
,
month: 
23.11.2028
},
{
period: 
3276
,
month: 
23.12.2028
},
{
period: 
3330
,
month: 
23.01.2029
},
{
period: 
3384
,
month: 
23.02.2029
},
{
period: 
3438
,
month: 
23.03.2029
},
{
period: 
3493
,
month: 
23.04.2029
},
{
period: 
3547
,
month: 
23.05.2029
},
{
period: 
3601
,
month: 
23.06.2029
},
{
period: 
3656
,
month: 
23.07.2029
},
{
period: 
3710
,
month: 
23.08.2029
},
{
period: 
3765
,
month: 
23.09.2029
},
{
period: 
3820
,
month: 
23.10.2029
},
{
period: 
3874
,
month: 
23.11.2029
},
{
period: 
3929
,
month: 
23.12.2029
},
{
period: 
3984
,
month: 
23.01.2030
},
{
period: 
4039
,
month: 
23.02.2030
},
{
period: 
4094
,
month: 
23.03.2030
},
{
period: 
4149
,
month: 
23.04.2030
},
{
period: 
4205
,
month: 
23.05.2030
},
{
period: 
4260
,
month: 
23.06.2030
},
{
period: 
4315
,
month: 
23.07.2030
},
{
period: 
4371
,
month: 
23.08.2030
},
{
period: 
4426
,
month: 
23.09.2030
},
{
period: 
4482
,
month: 
23.10.2030
},
{
period: 
4537
,
month: 
23.11.2030
},
{
period: 
4593
,
month: 
23.12.2030
},
{
period: 
4649
,
month: 
23.01.2031
},
{
period: 
4704
,
month: 
23.02.2031
},
{
period: 
4760
,
month: 
23.03.2031
},
{
period: 
4816
,
month: 
23.04.2031
},
{
period: 
4872
,
month: 
23.05.2031
},
{
period: 
4928
,
month: 
23.06.2031
},
{
period: 
4984
,
month: 
23.07.2031
},
{
period: 
5000
,
month: 
23.08.2031
}
],

---

[stockiNail]

@Mr-Unfreeze I have used your data (normalizing them). It's still not clear to me what to show on teh chart, nevertheless I have done a first example on your data:

https://codepen.io/stockinail/pen/dyLYrdN

The data labels are not shown but it's simple to add them, using datalabels plugins.

[Udemology]

Out of pure curiosity, there is a parser option in Chart.js for date. However, is it better to normalize than to use the parser?

x: {
  type: 'time',
    time: {
      unit: 'quarter',
      parser: 'MM.dd.yyyy'
    }
},

[stockiNail]

@Udemology use the parse of Chart.js, in my opinion, because out of the box and you don't need to learn the date adapter feature. In this use case, I used separately, because I didn't want to use time axis but category, but to group by quarter, I needed anyway a date library. Of course, the code could be improved ;)

[Mr-Unfreeze]

@Mr-Unfreeze I have used your data (normalizing them). It's still not clear to me what to show on teh chart, nevertheless I have done a first example on your data:

https://codepen.io/stockinail/pen/dyLYrdN

The data labels are not shown but it's simple to add them, using datalabels plugins.

Hi ! Many thanks it's what I wanted. Wish you a nice day