[Chartjs]-How to show a "total" sum label on the top of stacked bars

by

2👍

✅

You need to change the formatter function to make it work.

The total value shall appear on the top most value of the stacked bars only. The stacked bars however don’t contain zero values nor values from hidden datasets. I ended up with the following solution that works but can probably be improved/simplified.

const formatter = (value, ctx) => {
  const stackedValues = ctx.chart.data.datasets
    .map((ds) => ds.data[ctx.dataIndex]);
  const dsIdxLastVisibleNonZeroValue = stackedValues
    .reduce((prev, curr, i) => !!curr && !ctx.chart.getDatasetMeta(i).hidden ? Math.max(prev, i) : prev, 0);
  if (!!value && ctx.datasetIndex === dsIdxLastVisibleNonZeroValue) {
    return stackedValues
      .filter((ds, i) => !ctx.chart.getDatasetMeta(i).hidden)
      .reduce((sum, v) => sum + v, 0);
  } else {
    return "";
  }
};

Please take a look at your amended Code Sandbox and see how it works.

Leave a comment