Dynamically changing legend position

This short tutorial will show the steps involved in dynamically changing position of the legend.

Changing position

The following steps are involved when changing the position of the legend, e.g. from bottom to left:

1. Move the legend’s position in the chart.children list as/if needed.
2. Change chart’s layout to horizontal if required.
3. Update settings of the legend so they are suitable for new layout.

For example, the below code will move the legend from bottom, to left:

TypeScript

chart.children.moveValue(legend, 0);
chart.set("layout", root.horizontalLayout);
legend.setAll({
  x: 0,
  centerX: 0,
  centerY: am5.p50,
  y: am5.p50,
  layout: root.verticalLayout
});

JavaScript

chart.children.moveValue(legend, 0);
chart.set("layout", root.horizontalLayout);
legend.setAll({
  x: 0,
  centerX: 0,
  centerY: am5.p50,
  y: am5.p50,
  layout: root.verticalLayout
});

Demo

ResultJSHTMLCSSJSON

Open in:New tabChart MakerCodePenjsFiddle

Run

Dynamically changing legend positiondynamically-changing-legend-position