CODEWITHSUNDEEP
angulartypescriptchartsapexchartsng-apexcharts
Ramesh S
Ramesh S

Reputation: 661

Angular ApexCharts - Bar chart data not coming as expected

I have used ApexCharts in my Angular 16 application.

Here my response is not appending on the chart. Please help me to modify the API response.

Response from API:

let data = [
  {
    tenantName: 'Station',
    labelName: 'aaaa',
    total: 7,
  },
  {
    tenantName: 'GERMANY',
    labelName: 'Application',
    total: 10,
  },
  {
    tenantName: 'GERMANY',
    labelName: 'Packages',
    total: 5,
  },
  {
    tenantName: 'Station',
    labelName: 'Security Features',
    total: 4,
  },
  {
    tenantName: 'Station',
    labelName: 'Setup and Configuration',
    total: 11,
  },
  {
    tenantName: 'Station',
    labelName: 'Speed',
    total: 9,
  },
  {
    tenantName: 'Station',
    labelName: 'WIFI signal Range',
    total: 21,
  },
];

I need to modify my response with labelName with count.

For Example:

tenantName : Station and labelName: 'aaaa' with total is 7

But it is not working properly。

enter image description here

Tried code:

let labels = [...new Set(data.map((x: any) => x.labelName))];
let tenants = [...new Set(data.map((x: any) => x.tenantName))];
let subLabels = data.reduce((acc: any, cur: any) => {
  if (
    acc.findIndex(
      (x: any) =>
        x.tenantName == cur.tenantName && x.labelName == cur.labelName
    ) == -1
  )
    acc.push({
      tenantName: cur.tenantName,
      labelName: cur.labelName,
      total: cur.total,
    });

  return acc;
}, [] as { tenantName: string; labelName: string }[]);

Demo link

Upvotes: 0

Views: 116

Answers (1)

Yong Shun
Yong Shun

Reputation: 51125

From what I inspect in your chart with the data, you are looking for Grouped bar chart with y-axis: labelName and each y-axis (category) contains multiple groups by tenantName.

You should group by tenant with each tenant object contains name field with tenant as value and a data array containing the value based on tenantName and labelName.

this.barChartData = tenants.map((tenant: any) => {
  return {
    name: tenant,
    data: labels.map(
      (label) =>
        data.find((y) => y.tenantName == tenant && y.labelName == label)
          ?.total
    ),
  };
});

Demo @ StackBlitz

Upvotes: 1

Related Questions