Map through datasets in chartjs

Question

I have this static dataset's data ranging from 2015 to 2016 and I want to map everything out instead of manually adding the bars myself.

final_water_supply Data image representation

var ctx = document.getElementById('mc').getContext('2d');

chartRef1 = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: sortedData,
                datasets: [{
                        label: '2015',
                        stack: 'Stack 1',
                        data: final_water_supply[0],
                        backgroundColor: '#D0D1E6',
                        borderColor: '#D0D1E6',
                    },
                    {
                        label: '2016',
                        stack: 'Stack 2',
                        data: final_water_supply[1],
                        backgroundColor: '#74A9CF',
                        borderColor: '#74A9CF',
                    },
                    {
                        label: '2017',
                        stack: 'Stack 3',
                        data: final_water_supply[2],
                        backgroundColor: '#0570B0',
                        borderColor: '#0570B0',
                    },
                    {
                        label: '2018',
                        stack: 'Stack 4',
                        data: final_water_supply[3],
                        backgroundColor: '#023858',
                        borderColor: '#023858',
                    }
                ]
            },

Can you please edit the question? Add the structure of final_water_supply and explain in more detail what you need to achieve. — Nizar
– Nizar, Commented Oct 7, 2021 at 6:07

Phakamani Xulu · Accepted Answer · 2021-10-08 08:27:49Z

So this is how I ended up doing it

created an empty object structure that takes in the datasets

         let color = '#d6d6d6'
         let data = {
            labels:sortedData,
            datasets:[]
            }

crated a forEach function that loops through the years and push in data into the datasets

          years.forEach(function(a,i) {
            switch(i) {
              case 0:
                color='#D0D1E6'
                break;
              case 1:
                color='#74A9CF'
                break;
              case 2:
                color='#0570B0'
                break;
              case 3:
                color='#023858'
                break;
              default:
                color='#d6d6d6'
            }
                data.datasets.push({
                label: a,
                stack: 'Stack '+i,
                data: final_water_supply[i],
                backgroundColor: color,
                borderColor: color,
              })
            })

Collectives™ on Stack Overflow

Map through datasets in chartjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related