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.