Adding svg to a markerRectangles in a legend wont stay relative on verticalScrollbar scroll

[maayanLayfer]

Question

It seems like the svg is attached to the rectangle but not to the legend and I don't understand exactly how can I change it, will really appreciate any help.

Environment (if applicable)

I'm working with AMCharts5, React and TS

Additional context

Adding the code snippet and a video:

    const legend = chart.children.push(Legend.new(root, {
      y: root.container.width() > 580 ? 10 : 280,
      x: root.container.width() > 600 ? p50 : 0,
      layout: root.verticalLayout,
      strokeOpacity: 0,
      height: p100,
      verticalScrollbar: Scrollbar.new(root, {
        orientation: "vertical"
      }),
    }));

    legend.markers.template.setup = (marker) => {
      let check = Graphics.new(root, {
        fillOpacity: 1,
        fill: Color.fromString("#FFFFFF"),
        width: 20,
        height: 20,
        layer: 50,
        svgPath: "M 14.3 3.7216 c -0.488 -0.3744 -1.168 -0.2624 -1.5216 0.256 l -5.06 7.404 L 4.932 8.3624 a 1.04 1.04 90 0 0 -1.5376 -0.0496 a 1.204 1.204 90 0 0 -0.0496 1.6344 s 3.3872 3.756 3.8744 4.1344 c 0.488 0.3744 1.1656 0.2624 1.5224 -0.256 L 14.54 5.34 c 0.356 -0.5224 0.2464 -1.244 -0.2408 -1.6192 Z m 0 0",
      });
      check.states.create("disabled", {
        fillOpacity: 0,
      });
      marker.children.push(check);
    };

https://github.com/amcharts/amcharts5/assets/108460092/01d451d4-b094-42bd-9c16-a045c4fc0a84

[zeroin]

The problem is with a layer, I am afraid we can not support different layers in scrollable containers. So the solution would be to put the markerRectangle to the back. This code will do the thing:

    legend.markerRectangles.template.setup = (markerRectangle) =>{

      root.events.once("frameended", ()=>{
        markerRectangle.parent.children.moveValue(markerRectangle, 0);
      })      
    }

[maayanLayfer]

@zeroin It didn't solve the issue :/ I don't think it's about layers, more like about attaching the svg to the rectangle or to the legend so it'll move relativity. I'll try to create a codePan for it.

[zeroin]

Yes, a codepen would be nice, as it worked fine in my test case.

[maayanLayfer]

https://codepen.io/maayan-layfer/pen/OJaXERm Thanks @zeroin :)

[zeroin]

I removed layer and added my code and it works as expected: https://codepen.io/team/amcharts/pen/NWErOOz/3f4c06d817b8401b07ef187ee7f1a511

[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.