amcharts5 icon indicating copy to clipboard operation
amcharts5 copied to clipboard

Handling responsive design: updating JSON config after initiation

Open flaming-cl opened this issue 1 year ago • 1 comments

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?

horizontal vertical

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

flaming-cl avatar Oct 07 '24 03:10 flaming-cl

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

martynasma avatar Oct 07 '24 05:10 martynasma

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

Thanks

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

Screenshot 2024-11-03 at 4 48 23 PM

flaming-cl avatar Nov 03 '24 21:11 flaming-cl

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

martynasma avatar Nov 04 '24 07:11 martynasma

This issue is stale because it has been open 30 days with no activity. It will be closed in 5 days unless a new comment is added.

github-actions[bot] avatar Dec 05 '24 00:12 github-actions[bot]