Label Optimization

[sivaramakrishnan-stratforge]

Is there a way to conditionally hide a series label based on the available space within the series?

Currently, labels are rendered for all series, but in some cases the label text is too large to fit inside the corresponding series segment, causing it to overflow or become unreadable.

Is there a built-in option or recommended approach to detect when a label cannot fit within the series area and automatically hide it? Ideally, I would like labels to be displayed only when there is enough space to render the entire text inside the series.

[martynasma]

You can use oversizedBehavior setting on a label to hide it:
https://www.amcharts.com/docs/v5/concepts/common-elements/labels/#oversized-text

series.bullets.push(function () {
  return am5.Bullet.new(root, {
    sprite: am5.Label.new(root, {
      text: "{valueX}",
      oversizedBehavior: "hide",
      centerY: am5.p50,
      centerX: am5.p50,
      populateText: true
    })
  });
});

[sivaramakrishnan-stratforge]

But if the label is inside a container element and container contains many label element, then how does it work?

    const container = am5.Container.new(root, {
        layout: root.horizontalLayout,
        reverseChildren: true,
        paddingLeft: 0,
        paddingRight: 0,
        paddingTop: 0,
        paddingBottom: 0,
      });

container.children.push(
       am5.Label.new(root, {
          text: "{valueX}",
          oversizedBehavior: "hide",
          centerY: am5.p50,
          centerX: am5.p50,
          populateText: true
    })
)

series.bullets.push(function () {
  return am5.Bullet.new(root, {
    sprite:container
  });
});

Also, if the columns become too narrow or crowded, I want to hide both the series labels and the axis labels. In that case, only a subset of labels should be displayed to avoid overlap. When the user zooms in and there is enough space available, all labels should be shown again.

[amcharts]

But if the label is inside a container element and container contains many label element, then how does it work?

Try setting width: am5.p100 on the Container element.

Also, if the columns become too narrow or crowded, I want to hide both the series labels and the axis labels. In that case, only a subset of labels should be displayed to avoid overlap. When the user zooms in and there is enough space available, all labels should be shown again.

Use minBulletDistance to auto-hide bullets:
https://www.amcharts.com/docs/v5/concepts/common-elements/bullets/#auto-hiding-bullets

And minGridDistance to control density of axis grid/labels:
https://www.amcharts.com/docs/v5/charts/xy-chart/axes/#grid-density

[sivaramakrishnan-stratforge]

Try setting width: am5.p100 on the Container element.

It seems like it is not working. I have set the oversizeBehaviour of label to 'hide' and set the container width to am5.p100, but still the labels are overflowing.

https://codepen.io/srkrishnan/pen/WbRMKvG?editors=1010

[martynasma]

Why not just combine the two labels and insert them as a direct sprite for a bullet?

series.bullets.push(function () {
  var label = am5.Label.new(root, {
    text: "{valueX} {categoryY}",
    fill: root.interfaceColors.get("alternativeText"),
    centerY: am5.p50,
    centerX: am5.p50,
    populateText: true,
    oversizedBehavior: "hide"
  });

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

The XY Series is designed to auto-apply maxWidth to labels, so it will work just like that.

Having a container, with labels arranged horizontally, would require some event and calculation footwork to dynamically toggle it.

[sivaramakrishnan-stratforge]

Is it possible to apply different colors to valueX and categoryY ? I need each label to have a different color.