8

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

Felix Christo
  • 257
  • 6
  • 19
  • 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 [https://valor-software.com/ng2-charts/#BarChart], and on chart.js official documentation [https://www.chartjs.org/docs/latest/charts/bar.html] – dc7 Mar 19 '19 at 05:58

2 Answers2

15

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.

Aviad P.
  • 32,036
  • 14
  • 103
  • 124
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.

Siddharth
  • 21
  • 2
  • 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 – Rayan Ral Jul 07 '20 at 13:11