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.