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.

Alternative option: custom theme

It's also possible to achieve the same result with a custom theme:

const myTheme = am5.Theme.new(root);

myTheme.rule("Button", ["stocklegend", "control"]).setup = function(target) {
  target.toBack();
}

root.setThemes([
  am5themes_Animated.new(root),
  myTheme
]);

var myTheme = am5.Theme.new(root);

myTheme.rule("Button", ["stocklegend", "control"]).setup = function(target) {
  target.toBack();
}

root.setThemes([
  am5themes_Animated.new(root),
  myTheme
]);

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