[jhansen]

Thanks. That works, but unfortunately not on a column that is missing a matching data point (which is what I have). For example, if I remove the values “{ x: 10, y: 71 }, { x: 20, y: 55 },” from the first data series, the code no longer works for the first two columns. Is there a version of the code you can suggest that would work where the stacked columns (and same for a stacked bar) don’t all have the same “x” points?
Thanks

[jhansen]

Hi, no need to answer my question as I think I’ve worked it out. For info:

updateTotalIndexLabels(chart);

//—————————————————————
// — Sum visible series for each x value —
//—————————————————————
function sumVisibleColumns(chart) {
let totals = {};

chart.options.data.forEach(series => {
if (series.visible !== false && !series.isTotalSeries) {
series.dataPoints.forEach(dp => {
let key = dp.x !== undefined ? dp.x : dp.label;
if (!(key in totals)) totals[key] = 0;
totals[key] += dp.y || 0;
});
}
});

return totals;
}

//—————————————————————
// — Collect all x values across all (non-total) series —
//—————————————————————
function getAllXValues(chart) {
let xSet = new Set();
chart.options.data.forEach(series => {
if (!series.isTotalSeries) {
series.dataPoints.forEach(dp => {
xSet.add(dp.x);
});
}
});
return Array.from(xSet).sort((a, b) => a – b);
}

//—————————————————————
// — Initialize total label series if it doesn’t exist —
//—————————————————————
function initTotalSeries(chart) {
if (!chart.totalSeries) {
let totalSeries = {
type: “column”,
dataPoints: [],
showInLegend: false,
color: “transparent”,
indexLabel: “{y}”,
indexLabelPlacement: “outside”,
indexLabelFontWeight: “bold”,
indexLabelFormatter: function(e) {
// Always show the label even for 0 totals
return (e.dataPoint.y !== null && e.dataPoint.y !== undefined)
? e.dataPoint.y
: “”;
},
isTotalSeries: true
};
chart.options.data.push(totalSeries);
chart.totalSeries = totalSeries;
}
}

//—————————————————————
// — Update the total labels dynamically —
//—————————————————————
function updateTotalIndexLabels(chart) {
initTotalSeries(chart);

const totals = sumVisibleColumns(chart);
const allX = getAllXValues(chart);

// Build new total datapoints for all x values
chart.totalSeries.dataPoints = allX.map(x => ({
x: x,
y: totals[x] !== undefined ? totals[x] : 0
}));

chart.render();
}

[jhansen]

Thank you, that’s very helpful. My next challenge is to display an indexLabel total over each column, which is tricky as the data series don’t all contain a value for each x-value e.g.
* for the “Blank” column (x=1) I’d add up 74 (from Team A), 1 (from Team B) and 377 (from Team C), and nothing from Team D.
* for the “Local” column (x=2) I’d add up 895 (from Team A), 279 (from Team C), and nothing from the other teams
etc.
This assumes that each data series is visible. If any data series is not visible I’d need to not check it.
Is this something you’ve seen before and might have a function for?
Thanks
Justin