Moving icons of a StockLegend to left

This is a demo tutorial. While there is no step-by-step commentary available (yet), the live demo below is fully functional. Feel free to open it for full source code.

This demo shows how we can use events to re-arrange items within a StockLegend. Specifically, it moves settings and close icon buttons to the left - before the actual legend label.

Related code

valueLegend.settingsButtons.template.events.on("dataitemchanged", function(e) {
  e.target.set("marginRight", 5);
  root.events.once("frameended", function() {
    e.target.toBack()
  });
});

valueLegend.closeButtons.template.events.on("dataitemchanged", function(e) {
  root.events.once("frameended", function() {
    e.target.toBack()
  });
});

valueLegend.settingsButtons.template.events.on("dataitemchanged", function(e) {
  e.target.set("marginRight", 5);
  root.events.once("frameended", function() {
    e.target.toBack()
  });
});

valueLegend.closeButtons.template.events.on("dataitemchanged", function(e) {
  root.events.once("frameended", function() {
    e.target.toBack()
  });
});

Demo

See the Pen Stock Chart, settings and close buttons in front of the legend item by amCharts team (@amcharts) on CodePen.