Not able to measure the column bar width and label width in amcharts5

[Ashishvkale]

I want to measure the column bar width and label width in amcharts5

So here i was using column series columns and labels
Was used to color the label if its going out side the column
Here's the old code of amcharts4:

`label.adapter.add("fill", (value, label) => {
                try {
                    const column = label.parent as am4charts.Column
                    const darkMode = this.$store.state.userPreferences.darkMode
                    // @ts-ignore this is needed
                    const textColorOnActivity = label.dataItem?.dataContext.statusSvgColor
                        ? (column.realFill as am4core.Color).alternative
                        : am4core.color(darkMode ? "white" : "black")

                    const activityWidth = column.measuredWidth
                    if (!label.isMeasured) label.measure()
                    if (label.measuredWidth > activityWidth) {
                        const overhangPixels = label.measuredWidth - activityWidth
                        const overlap = Math.max(1 - overhangPixels / (label.measuredWidth - this.activityLabelPaddingLeft), 0)
                        const gradient = new am4core.LinearGradient()
                        gradient.addColor(textColorOnActivity, 1, overlap)
                        gradient.addColor(am4core.color(darkMode ? "white" : "black"), 1, overlap)
                        return gradient
                    } else {
                        return textColorOnActivity
                    }
                } catch {
                    return value
                }
})`
          

So in code Previously I was able to measure column width and label width with this

`const activityWidth = column.measuredWidth
       if (!label.isMeasured) label.measure()
      if (label.measuredWidth > activityWidth) {
     const overhangPixels = label.measuredWidth - activityWidth
`        

But now its not working for amcharts5
How can I achieve the same behaviour in amcharts5 ??

[Logikgate]

Hello, I am working on this with @Ashishvkale and would like to add some more context.

Below is a codepen where I edited the Gantt Chart demo that is from the documentation. The only changes that were made were to add a bullet and label to each column and added a fill adapter to the label. See lines 192-206 in the codepen.

Our issue is that in amcharts4 it was straight forward to get the width of the parent column of the label in its adapter function. In amcharts5 it seems that the parent of the label always returns it's width as the entire width of the chart instead of its actual width.

Is it possible to get the width of the parent column from a label's adapter function in amcharts5?

https://codepen.io/logikgate/pen/vYqXZJz

[zeroin]

Bullets are not children of a column, they are placed in separate container (otherwise the columns of other series would overlay bullets). To get the column, you should do it through dataitem, as both bullet and column share the same:

console.log(target.dataItem.get("graphics").width())

[Logikgate]

Thank you, that looks like it works!

Is there documentation of the .get("graphics") option somewhere that I missed? The intellisense from typescript says the only valid option for that .get call is "visible" so we have to add a @ts-ignore for it.

[martynasma]

Generic adapter is set up to receive a generic target with generic data item.

You may provide code hints:

(target.dataItem as am5.DataItem<am5xy.IBaseColumnSeriesDataItem>).get("graphics")!.width()

[Logikgate]

Thank you! One last question on this, if the label is wider than the column it is on target.width is returning the column width not the rendered width of the label. I have updated the codepen to show this. Is there a different property of the label that would tell us the actual width of the rendered label regardless of the column width?

https://codepen.io/logikgate/pen/vYqXZJz

[zeroin]

This happens because we set maxWidth for the Label bullets to the column width automatically. So for example, if you simply add
oversizedBehavior: "truncate" to the label settings, you will see that the labels are truncated to the width of the column. Isn't it what you are trying to achieve?

If you still need the actual size of a label, you should get bounds:

    var bounds = target.localBounds()
    console.log(bounds.right)

[Ashishvkale]

Thank you @zeroin, looks like target.localBounds() works! for getting the actual size of a label

[github-actions]

This issue is stale because it has been open 30 days with no activity. It will be closed in 5 days unless a new comment is added.