Moving icons of a StockLegend to left

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

TypeScript

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()
  });
});

JavaScript

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

Open in CodePen

Alternative option: custom theme

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

TypeScript

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

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

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

JavaScript

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

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

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

Open in CodePen