Plotly visuals full screen

📊 Plotly Python
1

Are we ever going to get a full screen option directly in the modebar of plotly visuals? it seems quiet tedious now to add buttons/modals to generate a full screen view of the plot.

2

Hi @GabrielBKaram you could create a feature request on github for that. :raised_hands:

3

Save following JavaScript code in assets folder of Dash application to add a custom button in modebar to each plotly graph to view in fullscreen mode.

//Script to show Plotly graph to fullscreen mode
//Dependence on Font Awesome icons
//Author: Dhirendra Kumar
//Created: 26-Nov-2024

function addToModbar() {
    const modeBars = document.querySelectorAll(".modebar-container");
    for(let i=0; i<modeBars.length; i++) {
        const modeBarGroups = modeBars[i].querySelectorAll(".modebar-group");
        const modeBarBtns = modeBarGroups[modeBarGroups.length - 1].querySelectorAll(".modebar-btn");

        if (modeBarBtns[modeBarBtns.length - 1].getAttribute('data-title') !== 'Fullscreen') {
            const aTag = document.createElement('a');
            aTag.className = "modebar-btn";
            aTag.setAttribute("rel", "tooltip");
            aTag.setAttribute("data-title", "Fullscreen");
            aTag.setAttribute("style", "color:gray");
            aTag.setAttribute("onClick", "fullscreen(this);");
            const iTag = document.createElement('i');
            iTag.className = 'fa-solid fa-maximize';
            aTag.appendChild(iTag);
            modeBarGroups[modeBarGroups.length - 1].appendChild(aTag);
        }
    }
}

function fullscreen(el) {
    elem = el.closest('.dash-graph');
    if (document.fullscreenElement) {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.mozCancelFullScreen) { // Firefox
            document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) { // Chrome, Safari and Opera
            document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) { // IE/Edge
            document.msExitFullscreen();
        }
    }
    else {
        if (elem.requestFullscreen) {
            elem.requestFullscreen();
        } else if (elem.mozRequestFullScreen) { // Firefox
            elem.mozRequestFullScreen();
        } else if (elem.webkitRequestFullscreen) { // Chrome, Safari and Opera
            elem.webkitRequestFullscreen();
        } else if (elem.msRequestFullscreen) { // IE/Edge
            elem.msRequestFullscreen();
        }
    }
}

window.fetch = new Proxy(window.fetch, {
    apply(fetch, that, args) {
        // Forward function call to the original fetch
        const result = fetch.apply(that, args);

        // Do whatever you want with the resulting Promise
        result.then((response) => {
            if (args[0] == '/_dash-update-component') {
                setTimeout(function() {addToModbar()}, 1000)
            }})
        return result
        }
})
4

hi @techdhirendra , i added this in the js file but i still cannot see fullscreen in modebar