Highcharts React: Menu button doesn´t change from “view full screen” to “exit full screen” when fullscreen mode is on

We are having some issues when working with highcharts in React. When I change to full screen mode using the menu button I am not able to see the option “Exit from full screen”. Instead, the option stills “View in full screen”…. However, if I click this option it actually exit full screen mode. I want to be able to see the text “exit full screen”. I think the problem is in the event declared on the last lines of this code (exporting.chartOptions.chart).

useEffect(() => {
        const chart = chartRef?.current?.chart;
        if (!chart?.renderer) return;

        setChartOptions(({ chart, credits, legend, xAxis, yAxis, plotOptions, ...currentOptions }) => ({
            ...currentOptions,
            chart: {
                ...chart,
                ...chartExtraOptions.current?.chart,
            },
            credits: {
                ...credits,
                position: {
                    ...credits?.position,
                    ...chartExtraOptions.current?.credits.position,
                },
            },
            legend: {
                ...legend,
                ...chartExtraOptions.current?.legend,
            },
            xAxis: {
                ...xAxis,
                ...chartData?.xAxis,
                title: { text: undefined },
                plotLines: [
                    {
                        value: ((chartData?.xAxis?.max ?? 0) + (chartData?.xAxis?.min ?? 0)) / 2,
                        color: "#84acbc",
                    },
                ],
            },
            yAxis: {
                ...yAxis,
                ...chartData?.yAxis,
                title: { text: undefined },
                plotLines: [
                    {
                        value: ((chartData?.yAxis?.max ?? 0) + (chartData?.yAxis?.min ?? 0)) / 2,
                        color: "#84acbc",
                    },
                ],
            },
            series: chartData?.series,
            exporting: {
                chartOptions: {
                    chart: {
                        events: {
                            load: function (this) {
                                chartAxesTitles.current.forEach((element) => {
                                    const { args, attr, css } = element.svg.userOptions;
                                    // Use updated x and y positions
                                    const newArgs = [args[0], element.svg.x, element.svg.y];
                                    createLabel(this.renderer, { args: newArgs, attr, css });
                                    renderWatermarkLabels(this, true);
                                });
                                // console.log(this);
                            },
                        },
                    },
                },
            },

but i have no idea why!!! Any ideas? Thanks!

I add the config for the charts in case it helps:

import { WATERMARK } from "constants/chartCommons";

export const OPTIONS: Highcharts.Options = {
    chart: {
        className: "IndividualPositioningChart",
        type: "scatter",
        spacing: [0, 0, 0, 0],
    },
    credits: {
        text: WATERMARK,
        href: "#",
        position: {
            align: "left",
        },
        style: {
            fontSize: "8px",
        },
    },
    title: {
        text: undefined,
    },
    xAxis: {
        startOnTick: false,
        lineWidth: 0,
        tickColor: "transparent",
        gridLineColor: "transparent",
        labels: {
            enabled: false,
        },
    },
    yAxis: {
        gridLineColor: "transparent",
        labels: {
            enabled: false,
        },
    },
    legend: {
        verticalAlign: "bottom",
        itemWidth: 150,
        margin: 20,
    },
    tooltip: {
        snap: 1,
        enabled: true,
        backgroundColor: "black",
        borderWidth: 0,
        borderRadius: 2,
        padding: 4,
        shadow: false,
        useHTML: true,
        style: {
            color: "white",
            fontSize: "11px",
        },
        headerFormat: undefined,
    },
    plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
                y: 13,
                x: 8,
                align: "left",
                useHTML: true,
                padding: 5,
                style: {
                    fontWeight: "normal",
                    fontSize: "14px",
                    color: "#515151",
                    width: 250,
                },
            },
            stickyTracking: false,
        },
    },
    series: [],
};

Answer

Finnaly, I solved my problem removing the load event from the useEffect hook. The load event is declared now in the chart config file and passed as a parameter to the getOption function. It looks like this:

export const getOption = (load: Highcharts.ChartLoadCallbackFunction): Highcharts.Options => {
    return {
        chart: {
            className: "TeamCompetitiveChart",
            spacing: [0, 0, 0, 0],
            type: "scatter",
        },
        credits: {
            text: WATERMARK,
            href: "#",
            position: {
                align: "left",
            },
            style: {
                fontSize: "8px",
            },
        },
        title: {
            text: undefined,
        },
        xAxis: {
            title: undefined,
            startOnTick: false,
            lineWidth: 0,
            tickColor: "transparent",
            gridLineColor: "transparent",
            labels: {
                enabled: false,
            },
        },
        yAxis: {
            title: undefined,
            gridLineColor: "transparent",
            labels: {
                enabled: false,
            },
        },
        legend: {
            verticalAlign: "bottom",
            itemWidth: 150,
            margin: 20,
        },
        tooltip: {
            enabled: false,
        },
        plotOptions: {
            series: {
                marker: {
                    radius: 8,
                },
                dataLabels: {
                    enabled: true,
                    y: 13,
                    x: 8,
                    align: "left",
                    useHTML: true,
                    padding: 5,
                    style: {
                        fontWeight: "normal",
                        fontSize: "14px",
                        color: "#515151",
                        width: 250,
                    },
                },
                stickyTracking: false,
                point: {
                    events: {
                        click: undefined,
                    },
                },
            },
        },
        series: [],
        exporting: {
            chartOptions: {
                chart: {
                    events: {
                        load,
                    },
                },
            },
        },
    };
};

…and this in the hook:

const chartAxesTitles = useRef<IChartAxisTitle[]>([]);
const chartRef = useRef<IRefObjectForHighchartsReact>(null);

const load: Highcharts.ChartLoadCallbackFunction = function (this: Highcharts.Chart) {
        chartAxesTitles.current.forEach((element: IChartAxisTitle) => {
            const { args, attr, css } = element.svg.userOptions;
            // Use updated x and y positions
            const newArgs = [args[0], element.svg.x, element.svg.y];
            createLabel(this.renderer, { args: newArgs, attr, css });
            renderWatermarkLabels(this, true);
        });
    };

const [chartOptions, setChartOptions] = useState<Highcharts.Options>(getOption(load));

const { renderWatermarkLabels } = useRenderWatermarkLabels(chartData);