Bar chart not taking stacking options

UI Components for Angular
Post Reply
NataliaCodes
Posts: 2
Joined: 28 Jan 2022, 22:22

28 Jan 2022, 22:52

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
Posts: 79
Joined: 17 Dec 2021, 09:33

31 Jan 2022, 15:03

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
Posts: 2
Joined: 28 Jan 2022, 22:22

31 Jan 2022, 17:45

cetincakiroglu wrote:
31 Jan 2022, 15:03
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
Posts: 79
Joined: 17 Dec 2021, 09:33

04 Feb 2022, 16:30

Hi,

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

Regards,

gc593
Posts: 1
Joined: 06 Sep 2018, 16:28

04 Aug 2022, 09:09

Why is the documentation still not fixed?

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 4 guests