Bar chart not taking stacking options

[NataliaCodes]

I am having trouble getting the stacked version of the bar chart to show up - the code below is actually rendering as a normal vertical bar chart with the two datasets one next to the other. What am I missing?
I am using PrimeNG version 12 (with Angular 12 in tow) and chart.js version 3.3.2. I had gotten it to work with PrimeNG 11, but now it seems broken over there too. Any pointers as to what I could be missing?


component.ts

Code: Select all

  
  totalViews = {
    labels: ['Sept', 'Oct', 'Nov'],
    datasets: [
      {
        type: 'bar',
        label: 'Map',
        backgroundColor: '#007EFF',
        data: [1113239, 1335761, 1810865],
      },
      {
        type: 'bar',
        label: 'Search',
        backgroundColor: '#78B7F8',
        data: [5583419, 5397682, 6008726],
      }
    ]
  };
    
 stackOptions = {
    scales: {
      xAxes: [{
        stacked: true,
      }],
      yAxes: [{
        stacked: true,
      }]
    },
  };
  
  

component.html

Code: Select all

        <p-chart
          	type="bar"
          	[data]="totalViews"
          	[options]="stackOptions"
        ></p-chart>

[cetincakiroglu]

Hi,

Stacked bar chart works with v12-LTS. You can use it as a guide.

https://www.primefaces.org/primeng/v12-lts/#/chart/bar

[NataliaCodes]

Hi,

Stacked bar chart works with v12-LTS. You can use it as a guide.

https://www.primefaces.org/primeng/v12-lts/#/chart/bar

I did use that as a guide, but it did not help. Turns out the PrimeNG documentation is wrong. It says in the options to put the scales as (arrays)

Code: Select all

 
          scales: {
                xAxes: [{
                    stacked: true,
                }],
                yAxes: [{
                    stacked: true
                }]
            }

It should actually be (objects)

Code: Select all

            scales: {
                xAxes: {
                    stacked: true,
                },
                yAxes: {
                    stacked: true
                }
            }

This is due to changes between version 2 and 3 of chart.js.
Hope this helps others stuck with this issue.

[cetincakiroglu]

Hi,

I'm happy that you solved the issue, thank you for the feedback, we'll check it.

Regards,

[gc593]

Why is the documentation still not fixed?