How to Implement Dynamic Export Sizes for Highcharts in Next.js / React.js

I'm working on a project using Next.js and Highcharts, and I need to implement dynamic export sizes for Highcharts exports. Essentially, I want to allow users to export charts in different sizes, such as small, medium, and large. How can I achieve this functionality?

          menuItems: [
            "downloadPNG", // this part will download 1090 x 1920
            {
              text: "Small", // this part will download 100 x 100
              onclick: function () {
                var confirmed = confirm("Are you sure you want to download the chart as PNG?");
                if (confirmed) {
                  this.exportChartLocal({
                    type: "image/png",
                    width: 100, // Set the desired width of the exported image
                    height: 100, // Set the desired height of the exported image
                });
                }
              },
            },
          ]

However, I'm encountering difficulties with this approach. Can anyone provide guidance on how to implement dynamic export sizes for Highcharts in a Next.js / React.js environment? Any insights or alternative solutions would be greatly appreciated.

If you want to use the chart.exportChartLocal(exportingOptions, chartOptions) method with custom chart settings, you must provide them as the second parameter. Then you set the height and width as properties of chartOptions.chart.

Demo: https://jsfiddle.net/BlackLabel/7gdju1ty/
API: https://api.highcharts.com/highcharts/exporting.buttons.contextButton.menuItems
https://api.highcharts.com/class-reference/Highcharts.Chart#exportChart