Question:

Why Apex stacked chart bar is not showing in the x-axis in Angular?

Problem

I am using the Apex stacked bar chart in my Angular 16 application. Here I have 4 categories in the x-axis, and the bar is not coming in the proper x-axis label.

My API response data:

let data = [

{

tenantName: 'OBC+',

labelName: 'Application',

total: 85,

postiveTotal: '21',

negativeTotal: '-64',

{

tenantName: 'Discovery-world',

labelName: 'Application',

total: 194,

postiveTotal: '119',

negativeTotal: '-75',

{

tenantName: 'OBC+',

labelName: 'Channels',

total: 40,

postiveTotal: '0',

negativeTotal: '-40',

{

tenantName: 'OBC+',

labelName: 'Wifi',

total: 1,

postiveTotal: '1',

negativeTotal: '1',

{

tenantName: 'Discovery-world',

labelName: 'Channels',

total: 59,

postiveTotal: '0',

negativeTotal: '-59',

{

tenantName: 'Vidocon',

labelName: 'Test',

total: 30,

postiveTotal: '10',

negativeTotal: '-20',

];

Please check the above image. The API response here tenantName: 'Vidocon', the series data is not coming in the proper x-axis label.

It is supposed to show in the 'Test' x-axis label but it is shown in the 'Application' x-axis label.

>Example Code

Solution

For each bar, the data array should contain the values with the size based on your x-axis category.

Split the data with the positiveTotal and negativeTotal fields to two different objects.

Get the categoryGroups which is an array of name values from the newData. Example: "OBC+ Positive", "OBC+ Negative", "Discovery-world Positive" and etc.

Form the subLabels array by iterating the categoryGroups array and form the object with the data based on the above concept.

let newData = data

.map((x) => [

{

labelName: x.labelName,

group: x.tenantName,

value: x.postiveTotal,

{

labelName: x.labelName,

group: x.tenantName,

value: x.negativeTotal,

])