V5 add legend border & border-radius

[flaming-cl]

Hey, is it possible to add border bottom or border radius for the legend item container?

Legend border radius

Legend border bottom

Thanks for answering!

[martynasma]

If you need a background with rounded corner, use a RoundedRectangle for itemContainer background:

legend.itemContainers.template.setup = function(target) {
  target.set("background", am5.RoundedRectangle.new(root, {
    fill: am5.color(0x999999)
  }));
};

[flaming-cl]

If you need a background with rounded corner, use a RoundedRectangle for itemContainer background:

legend.itemContainers.template.setup = function(target) {
  target.set("background", am5.RoundedRectangle.new(root, {
    fill: am5.color(0x999999)
  }));
};

Thanks @martynasma! Do you think it's possible to change the border radius of the RoundedRectangle, or it's with some fixed value?

Also for double confirmation, no chance to add any line or border under a legend container, right?

[martynasma]

Do you think it's possible to change the border radius of the RoundedRectangle, or it's with some fixed value?

Yes: https://www.amcharts.com/docs/v5/reference/roundedrectangle/#cornerRadiusBL_setting

Also for double confirmation, no chance to add any line or border under a legend container, right?

Maybe insert a Line into each item container:

legend.itemContainers.template.setup = function(target) {

  target.events.on("boundschanged", function(ev) {
    console.log(ev.target.width(), ev.target.children.getIndex(ev.target.children.length - 1))
    ev.target.children.getIndex(0).setAll({
      points: [
        { x: 0, y: 14 },
        { x: ev.target.width() - ev.target.get("paddingRight", 0), y: 14 }
      ]
    })
  })

  var line = target.children.push(am5.Line.new(root, {
    stroke: am5.color(0x000000),
    strokeOpacity: 0.5,
    isMeasured: false,
    points: []
  }));
};