MaxWidth adapters cause app to crash

[rferreira98]

I'm limiting maxWidth of legend labels in order to force them to wrap inside legend.innerWidth(). The problem is that I have multiple charts on the same page and for some reason with a pie chart and a donut chart, both with these adapters, the app crashes after some resizes of the viewport. I'm disposing the adapters on re-render, I don't know what is causing this apparent memory leak/crash. I believe the second chart "PieChart" is the one with problems but code is identical

This codeSandbox is an example of this: https://codesandbox.io/s/hungry-benz-ft2609

I know there are some issues on maxWidth adapters and related to something like this, but I followed the given examples and it did not solve the problem.

[martynasma]

It seems you are setting maxWidth inside the adapter for maxWidth.

I'm pretty sure that results in some kind of SO or other oddity. I strongly suggest against it.

Adapters are supposed to return a modified value, not set it. Or, if they do, they should not set settings for the same key adapter is for.

[rferreira98]

@martynasma,

now I'm confused. If I want to change maxWidth I shouldn't use maxWidth adapter?

[martynasma]

You can use the adapter. The function should return the value, not set it back to the same setting.

The following line is not necessary, and possibly creating issues:

target.set("maxWidth", innerWidth);

[rferreira98]

@martynasma But when I return the new width it just won't apply. I believe I misunderstood the purpose of adapters. What I'm trying to do is set maxWidth dinamically to wrap text inside the legend. Is that done with adapters?

[martynasma]

It should work. It could be that maybe the value you are returning is not the right one.

Have you tried printing it out for debug purposes?

[rferreira98]

The value I'm getting is correct but the value I'm "changing" does not change at all.

[martynasma]

Well, the reason I asked was if I modify this code:

    labelsAdapter = legend.labels.template.adapters.add("maxWidth", function (
      maxWidth,
      target
    ) {
      console.log("something", maxWidth, legend.innerWidth());
      const innerWidth = legend.innerWidth();
      //target.set("maxWidth", innerWidth);
      return innerWidth;
    });

To return a fixed value, say 100, then the wrapping works fine.

[rferreira98]

But using a fixed value, it defeats the purpose of the whole thing. Labels become unresponsive and don't wrap. They wrap on a fixed width is the same thing.

[martynasma]

I'm not suggesting using fixed value. It's just for demonstration that the adapter returning fixed value works.

My point is that you may need to revisit the code that generates that value dynamically.

[rferreira98]

@martynasma is there any other way I can get the legend width? besides using legend.innerWidth() ?

[rferreira98]

@martynasma this seems to work. Do you advise against it?

legend.events.on("boundschanged", (value) => {
      console.log("bounds changed", value.target.innerWidth());
      legend.labels.template.set("maxWidth", value.target.innerWidth());
    });

Edit: But after spanning to some other charts and using them together, it crashes again.

[martynasma]

That is a good idea. I'd do it via legend.onPrivate("width", ...... ) though.

[rferreira98]

I've tried with onPrivate but it crashes exactly the same way.

https://codesandbox.io/s/hungry-benz-ft2609?file=/src/PieChart.js

[martynasma]

This doesn't seem to be happening in a very basic scenario here: https://codepen.io/team/amcharts/pen/abELGwP/070e13d9409d46eb27d40fd6b2ad85f2?editors=0010

We'll need to find a point where it breaks.

It's a time-consuming process, which is beyond scope of our support.

Would you like to take a stab at figuring out which point in your setup introduces the breakage? Is it multiple chart scenario, using external legend containers, specific settings, etc.?

We can work from there towards a solution then.

[rferreira98]

It's something with my setup, because I can't reproduce it in codesandbox, I have 2 pie charts(one for pie one for donut) and both are close to similar, and only the pie breaks. Donuts don't. I can't find a reason why. (It's not the combination, it's the pie)

Update 1 But if I remove legend.onPrivate("width"... code it doesn't break.

Update 2: It always breaks on a very small width around 100px (legend width)

[rferreira98]

@martynasma this line is the problem.

For some reason defining this breaks. legendLabelText: "[#000000]{category}[/] [#000000]{p}% ({value}/200)[/]"

[github-actions[bot]]

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.