stacked bar chart using angular-highchart

Question

var array= [{ name: "LTNS", id: 1, percentage: 60, price: 900000 },
        { name: "NPCS", id: 2, percentage: 30, price: 342000 },
        { name: "MARCOS", id: 3, percentage: 10, price: 600000 }]

Using above array i need build stacked bar chart in angular-highchart and result should be like below.

I am using angular-highchart 7.2.0 version.

I have seen lots reference but nothing is same as above.

bar will render on percentage. – Nadeem Khan Jun 20 '21 at 12:44 — Nadeem Khan, Jun 20 '21 at 12:44

score 0 · Answer 1 · answered Jun 21 '21 at 10:08

I think that you can start from this approach:

var array = [{
    name: "LTNS",
    id: 1,
    percentage: 60,
    price: 900000
  },
  {
    name: "NPCS",
    id: 2,
    percentage: 30,
    price: 342000
  },
  {
    name: "MARCOS",
    id: 3,
    percentage: 10,
    price: 600000
  }
].reverse();

array.forEach(obj => {
  obj.data = [obj.percentage]
})

Highcharts.chart('container', {
  chart: {
    type: 'bar'
  },
  plotOptions: {
    bar: {
      stacking: 'normal',
            groupPadding: 0.2
    }
  },
  series: array
});

Demo: https://jsfiddle.net/BlackLabel/d9xrgeka/

If you will face an issue implementing other features, please ask a specific question.

stacked bar chart using angular-highchart

1 Answers1