Stacked Bar in ng2-charts

Question

I have gone through the documents of ng2-charts but I couldn't find anything like Stacked Bar. Is there is any other way to achieve Stacked Bar chart in ng2-charts? Please help me out

Buxtehude

In my opinion, you have to change settings of x and y axes in order to enable stacking in bar chart. See chat config options here [valor-software.com/ng2-charts/#BarChart], and on chart.js official documentation [chartjs.org/docs/latest/charts/bar.html] – Kirman

Answer 1

That's definitely supported, it is documented in the chart.js documentation. You simply need to define which datasets are stacked together using the stack property on the datasets objects:

public barChartData: ChartDataSets[] = [
  { data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A', stack: 'a' },
  { data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B', stack: 'a' }
];

See this stackblitz for example.

Configurationism

Answer 2

A simple way to implement 'Horizontal & Vertical Stacked Bar Chart'
Use Chart 'options' to make it simple, check code.
In .ts

public barChartOptions = {
scaleShowVerticalLines: false,
responsive: true,
scales: {
  xAxes: [
    {
      stacked: true, 
      ticks: {
        stepSize: 1
      }
    }
  ],
  yAxes: [
    {
      stacked: true,
    }
  ]
},

};

In template

<canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChartType"> </canvas>

check full code on Stackblitz.

Bo

Welcome to Stack Overflow! While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes – Meanly