Handling responsive design: updating JSON config after initiation

[flaming-cl]

We are handling desktop and mobile design for pie charts with V5 JSON config.

If possible, would you please let us know how to update the settings (layout) and the position of the piechart/legend, after initiated the chart?

CodePen (initiated with horizontal. Exploring a solution to change the chart to vertical and adjust the chart/legend position, when the window is resized to mobile size) https://codepen.io/flaming-cl/pen/dyxXRQX

[martynasma]

You may use a Responsive` theme: https://www.amcharts.com/docs/v5/concepts/responsive/

[flaming-cl]

https://www.amcharts.com/docs/v5/concepts/responsive/

Thanks @martynasma,

We are using itemContainer to customize our own legend. Do you know how I can get the itemContainer instance and set their x/y and update the width/height of the pieSeries?

responsive.addRule({
  relevant: am5themes_Responsive.widthM,
  applying: function() {
    chart.set("layout", root.verticalLayout);
   //  how to set legend item container
  },
});

codePen: https://codepen.io/flaming-cl/pen/dyxXRQX?editors=1010

[martynasma]

responsive.addRule({
  name: "Container",
  tags: ["legend", "item", "itemcontainer"],
  relevant: am5themes_Responsive.widthM,
  settings: {
    // ...
  }
});