Stacked column with some missing labels

• October 6, 2025 at 1:17 pm #61503
  
  jhansen

  I’m trying to use a stacked column chart for teams vs destinations. Not all teams have all destinations (see below). Seems this confuses the chart. Do I need total consistency (i.e. no gaps)?
  Thanks

  {type: “stackedColumn”,name: “Team A”,showInLegend: “true”,dataPoints: [{label:”Blank”,y:74},{label:”Local”,y:895},{label:”International”,y:177},{label:”Domestic”,y:2}]},
  {type: “stackedColumn”,name: “Team B”,showInLegend: “true”,dataPoints: [{label:”Blank”,y:1},{label:”Hotel”,y:8},{label:”International”,y:3}]},
  {type: “stackedColumn”,name: “Team C”,showInLegend: “true”,dataPoints: [{label:”Blank”,y:377},{label:”Local”,y:279},{label:”International”,y:61},{label:”Domestic”,y:1}]},
  {type: “stackedColumn”,name: “Team D”,showInLegend: “true”,dataPoints: [{label:”International”,y:1}]}

  October 6, 2025 at 5:58 pm #61504
  
  Thangaraj Raman

  @jhansen,

  In the case of Stacked Charts, datapoints across multiple dataseries are aligned based on x-values and not labels. Passing x-value along with the label should work fine in this case.

  Please take a look at this JSFiddle for a working example on the same.

  —
  Thangaraj Raman
  Team CanvasJS

  October 7, 2025 at 11:23 am #61505
  
  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

  October 7, 2025 at 4:57 pm #61506
  
  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();
  }