Customize total number is shown in stacked bar chart

[huy-jack]

I am using Amchart 5. I encountered a challenge when I customized the total number on the head of each bar in the stacked bar chart. As per the document guide, the total number will appear on the head of a bar column based on the top series. However, my challenge is to show the total with a specific condition that just shows the exact total number when it is greater than 0.1, in contrast, it will show the text like "<0.1". How can I do that?
My code is below:

private makeSeries(
    root: am5.Root,
    chart: am5xy.XYChart,
    name: string,
    fieldName: string,
    color: string,
    data: StackedBarItem[],
    index: number,
    isShowTotalLabel = false,
  ) {
    if (!chart) {
      return;
    }
    let series = chart?.series?.push(
      am5xy.ColumnSeries.new(root, {
        stacked: true,
        name: name,
        xAxis: this.xAxis,
        yAxis: this.yAxis,
        valueYField: fieldName,
        categoryXField: 'label',
        fill: am5.color(color),
        maskBullets: false,
      }),
    );
    const tooltip = am5.Tooltip.new(this.root, {
      pointerOrientation: 'horizontal',
      labelText: UtilsChart.getDistributionTooltip(
        index,
        this.selectFilter?.businessType?.name,
        this.codeChart,
        this.selectFilter?.distributionTimeType?.name,
        this.selectFilter?.distributionType?.name,
      ),
      tooltipY: am5.percent(10),
      forceHidden: false,
    });
    const tooltipMaxWidth = chart.width() * 0.6;
    tooltip.label.setAll({
      oversizedBehavior: 'wrap',
      maxWidth: tooltipMaxWidth,
    });
    series?.columns?.template?.setAll({
      tooltipText: '1',
      tooltip: tooltip,
      width: am5.percent(90),
      tooltipY: am5.percent(10),
    });

    series?.data?.setAll(data);

    series?.bullets?.push(() => {
      return am5.Bullet.new(root, {
        locationY: 0.5,
        sprite: am5.Label.new(root, {
          fill: am5.color(0xffffff),
          centerY: am5.percent(50),
          centerX: am5.percent(50),
          populateText: true,
        }),
      });
    });

    if (isShowTotalLabel) {
      series.bullets.push(function () {
        return am5.Bullet.new(root, {
          locationY: 1,
          sprite: am5.Label.new(root, {
            text: "{valueYTotal.formatNumber('#.a')}",
            fill: am5.color(0x000000),
            centerY: am5.percent(80),
            centerX: am5.p50,
            populateText: true,
          }),
        });
      });
    }
    // do not show legend, the last item (additional item) is added for showing total value
    if (!isShowTotalLabel) {
      this.legend.data.push(series);
    }

    series.columns.template.events.on('click', (ev) => {
      const dataItem = ev.target.dataItem as any;
      if (!dataItem || dataItem?.dataContext['label'] === 'N/A') return;
      this.onDrillIn.emit(dataItem.dataContext);
    });
    return series;
  }

[martynasma]

You will need to use an adapter for that:

series.bullets.push(function () {
  var label = am5.Label.new(root, {
    text: "{valueYTotal}",
    fill: am5.color(0x000000),
    centerY: am5.p100,
    centerX: am5.p50,
    populateText: true
  });

  label.adapters.add("text", function(text, target) {
    return target.dataItem.get("valueYTotal") < 1 ? "<1" : text;
  })

  return am5.Bullet.new(root, {
    locationY: 1,
    sprite: label
  });
});

Here's an example:
https://codepen.io/team/amcharts/pen/NWQwJbg/4524b1913902e4e9112d1d3fb73e49b7?editors=0010

[huy-jack]

Thank you so much, it works