Highcharts.js fullscreen api isOpen not working?

I am using Highcharts library to display my chart. I am going to use an icon to make my chart fullscreen. This icon will be placed outside of the chart container to open the container. To achieve it I have used an onClick event listener on the icon to call a method with following "chartRef?.current?.chart?.fullscreen?.open();"

The icon to close my chart should be at the top right corner. Hence, I have specified IconX and IconY as mentioned below. Following is my chart option configuration

events: {
                render: function () {
                    const chart = this;
                    let iconX = chart.plotLeft + chart.plotWidth - 20,
                        // iconY = chart.plotTop - 20,
                        iconY = chart.plotTop - 20,
                        iconPath = CloseIcon,
                        iconSize = 20;
                    if (!chartIconRef.current && chart.isOpen) {
                        chartIconRef.current = chart.renderer
                            .image(iconPath, iconX, iconY, iconSize, iconSize)
                            .css({
                                cursor: "pointer",
                            })
                            .on("click", function () {
                                chartFullScreenClose();
                            })
                            .add();
                    }
                    if(chartIconRef.current){
                        chartIconRef.current.destroy();
                        chartIconRef.current = null;
                    }
                },
            },

Another method:

events:{
    // fullscreenOpen: function () {
                //  const chart = this;
                //  let iconX = chart.plotLeft + chart.plotWidth - 10,
                //      // iconY = chart.plotTop - 20,
                //      iconY = chart.plotTop,
                //      iconPath = CloseIcon,
                //      iconSize = 20;
                //  if (!chartIconRef.current) {
                //      chartIconRef.current = chart.renderer
                //          .image(iconPath, iconX, iconY, iconSize, iconSize)
                //          .css({
                //              cursor: "pointer",
                //          })
                //          .on("click", function () {
                //              chartFullScreenClose();
                //          })
                //          .add();
                //  }
                // },
                // fullscreen close: function () {
                //  const chart = this;
                //  if (chartIconRef.current) {
                //      chartIconRef.current.destroy();
                //      chartIconRef.current = null;
                //  }
                // },

}

Now, my problem is as follows: When using fullScreenOpen and fullScreenClose event the icon button is rendered at incorrect position, meaning that the icon does not appear at the new top right after chart re-renders. It stays at the original position. The close and open work correctly as the icon button is added and destroyed according to chart event. However, the position remains amiss due to the plotWidth not getting the new width after fullscreen.

To mitigate this problem, I tried using render method to obtain the latest plot value. My chart now renders the icon correctly, but i have no way of knowing that the chart is not in fullscreen. I need to know this information to remove the button if the chart has changed back to its original size.

I went through this doc but isOpen on chart object is coming out to be undefined.

Kindly help in either placing the icon button correctly in fullscreenopen event or help me determine if the chart is in fullscreen mode.

I found this other answer here but the author has keep it in bottom left, it will hence not need new coordinates as that position is independent of the chart width height. I have used it to write my own solution but I cannot figure out how to determine if the current screen is chart fullscreen or not to accordingly handle button visibility.

If in the above solution i can keep the icon at the top right and add condition that if the chart is fullscreen then i render an icon to allow user to exit fullscreen, or find a way to determine if the chart is in fullscreen or exited full screen inside the render method to update my code. Then it will be the solution.

I modified the solution you found so now the button is at the top-right corner and when fullscreen mode is on it changes its text to Exit fullscreen.

We can check if the chart is in the fullscreen mode by checking the chart.fullscreen.isOpen property.

Demo: https://jsfiddle.net/BlackLabel/cxabegru/

Code:

chart: {
    events: {
      render: function() {
        const chart = this,
          x = chart.plotLeft + chart.plotWidth,
          y = 5;

        if (!chart.customToggleBtn) {
          chart.customToggleBtn = chart.renderer.button(
            'Toggle fullscreen',
            null,
            null,
            function() {
              chart.fullscreen.toggle();
            }).add();
        }

        if (chart.fullscreen.isOpen) {
          chart.customToggleBtn.attr({
            text: 'Exit fullscreen',
            x: x,
            y: y
          });
        }

        chart.customToggleBtn.attr({
          x: x - chart.customToggleBtn.width,
          y: y
        });
      }
    }
  }