Hiding small values inside pie chart slices makes values disappear when checking/unchecking a slice

[maayanLayfer]

Question

It seems like the function works but then when I hide a slice (no matter its value) and show it again it shows without the values. I tried to print the value of target?.dataItem?.get("valuePercentTotal") when I re-show a slice and it gives the right calues. I'll really appreciate your assistance.

Environment (if applicable)

I'm working with AMCharts5, React and TS

Additional context

Adding the code snippet and a video:

    const series = chart.series.push<PieSeries>(PieSeries.new(root, {
      name: "Series",
      categoryField: "category",
      valueField: "value".valueOf(),
      alignLabels: false,
      radius: 120,
      legendValueText: "",
      legendLabelText: "{category}"
    }));

    series.labels.template.setAll({
      baseRadius: 84,
      inside: true,
      text: "{valuePercentTotal.formatNumber('0.00')}%[/]",
      fill: Color.fromString("#FFFFFF"),
      fontSize: "16px",
    });

    series.labels.template.adapters.add("forceHidden", (hidden, target: any) => {
      return target?.dataItem?.get("valuePercentTotal") < 8 || hidden;
    });

https://github.com/amcharts/amcharts5/assets/108460092/ae9d6785-71d3-45af-a72f-1d6c3e361f8f

[zeroin]

When you first set forceHidden to true, later you return this value in case value of a slice is < 8. So to solve this, you should simply return:

    series.labels.template.adapters.add("forceHidden", (hidden, target) => {
      return target?.dataItem?.get("valuePercentTotal") < 8;
    });

By the way, it would be a lot more easier to provide support if, instead of snippets you could create a working codepens instead - thanks!

[maayanLayfer]

@zeroin It seems like commenting the line: root.setThemes([am5themes_Animated.new(root)]);

After this code: const root = Root.new(pie-chart`);

const chart = root.container.children.push(
    AmPieChart.new(root, {
      layout: root.horizontalLayout
    })
);`

Solves the issue but then I don't have animations which I want. any thoughts?

And yes I'm trying to create a codePan and hopefully provide it soon. thanks!

[zeroin]

Did you try the code I suggested?

[maayanLayfer]

Yes it was a good direction @zeroin , thanks! It worked finally when I added this:

`root.events.on("frameended", () => { series.labels.values.forEach((target) => { const {dataItem} = target;

    if (dataItem) {
      const percentage = (dataItem as any).get("valuePercentTotal");
      const isVisible = percentage < 8;

      target.set("forceHidden", isVisible);
    }
  });
});`

[zeroin]

Great!