How to display stacked bar graph from custom script in UI Builder [Not in Reporting]

[Sharique Azim]

Hi everyone,

I’m trying to build a Stacked Bar chart in UI Builder using now-vis-bar-wrapper in data resource . My data comes from a Script Include that returns a hierarchical structure with these keys for each node:

{
  "value": "{SYS_ID}",   // sys_id of the user
  "label": "User Name A",                     //-> manager Display name for the chart axis
  "directCost": 16,                             // This person's own license cost
  "totalCost": 49.83,                           // directCost + all descendants' costs
  "licenseBreakdown": {                         // Self allocations only
    "Miro": 16
  },
  "rolledUpLicenseBreakdown": {                 // Allocations from reportees only
    "Autodesk": 33.83
  },
  "rolledUpLicenseUserCount": {                 // Count of reportees using each license
    "Arnold-Autodesk": 1
  },
  "children": [
    {
      "value": "{SYS_ID}",
      "label": "User Name B",
      "directCost": 0,
      "totalCost": 0,
      "licenseBreakdown": {},                   // No self allocations
      "rolledUpLicenseBreakdown": {},           // No reportees
      "rolledUpLicenseUserCount": {},           // No reportees
      "children": []
    },
    {
      "value": "{SYS_ID}",
      "label": "Sharique Azim",
      "directCost": 33.83,
      "totalCost": 33.83,
      "licenseBreakdown": {
"Autodesk": 33.83
  },
      "rolledUpLicenseBreakdown": {},
      "rolledUpLicenseUserCount": {},
      "children": []
    }
  ]
}

My data binding script

 console.log("chart0");
  // 1️⃣ Get the Script Include output
const rawOutput = api.data.licensecostdata_1.output || {};

const jsonPayload = rawOutput.children : {};

console.log('[STACKED-BAR] Starting transform, nodes:', jsonPayload.length);

// 2️⃣ Collect all license types from rolledUpLicenseBreakdown
const licenseTypesMap = {};
jsonPayload.forEach(node => {
    Object.keys(node.rolledUpLicenseBreakdown || {}).forEach(type => {
        licenseTypesMap[type] = true;
    });
});
const licenseList = Object.keys(licenseTypesMap);
console.log('[STACKED-BAR] License types:', licenseList);

// 3️⃣ Build chartData rows and elements array
const chartData = [];
const elements = [];

jsonPayload.forEach(node => {
    // Row for this user
    const row = { label: node.label };
    licenseList.forEach(type => {
        const cost = (node.rolledUpLicenseBreakdown && node.rolledUpLicenseBreakdown[type]) || 0;
        row[type] = String(cost);
    });
    chartData.push(row);

    // Element for this user
    elements.push({
        id: node.value,
        label: node.label,
        eventData: { query: String(node.value) }
    });
});

// 4️⃣ Build series array for metadata
const seriesArray = licenseList.map(type => ({
    id: type,
    type: 'value',
    label: type
}));

// 5️⃣ Build metadata object
const metadata = {
    dataSourceLabel: 'Reportee Cost by License Type',
    eventData: { table: 'u_sw_license_user_alloc_archive' },
    groupBy: [{
        id: 'label',
        fieldType: 'string',
        label: 'User',
        elements: elements,
        series: seriesArray
    }],
    format: { unitFormat: '$ {0}' },
    aggregateBy: 0
};

return [{
    data: chartData,
    metadata: metadata
}];

What I want:

• X‑axis: each person in the hierarchy (name shown, unique internally to avoid duplicate label errors).

• Stacks: one segment per license type,can have multiple licenses, using values from rolledUpLicenseBreakdown.

• If a node has no applicable breakdown, the bar should be not present(obviously).

• Managers should not have their own allocations included in rolledUpLicenseBreakdown — only their reportees’ totals. Therefore no bar them.
  

What I’ve tried:

• Built licenseList from all keys in rolledUpLicenseBreakdown across the payload.

• Created chartData rows with label and value array

• Built elements array with matching labels and unique IDs.

• Built metadata.groupBy[0].series from licenseList.

• All this are done via script of data section of data visualization component.
  
  

• Set the component’s Stacked property to true.

The issue:

• The chart renders only the background, but it’s not showing the bar or stacking as expected.

• I’ve confirmed elements.length matches chartData.length (say 49 entries), and labels are unique.

• All rows have all series columns, even if zero.

Question: Has anyone successfully built a stacked bar in from hierarchical data like this? Is there anything special about how script must be formatted for stacking to work? Any working example or script to generate a stacked bar would be greatly appreciated.

Also find reference images.

Thanks in advance!

Shariq