Disabling Default Interaction Sunburst

Dash Python
1

Hello,
is something like this also possible with the go.Sunburst in Dash? I know about staticPlot, but I rely on another interaction.
Best regards

2

Can you be more explicit what you are looking for. It is not clear to me what you are looking for. Perhaps then it’s easier for others to help you.

3

Hey, sorry if it was unclear. I want to disable the default interaction when clicking on a specific label of the sunburst chart. The guy in that link achieved it with plotly.js and shared an example of his code. I was wondering if its also possible with dash, similar to listening to ‘plotly_sunburstclick’ and returning false.

4

Hello @Louis,

You can disable the default interaction by turning off the plotly_sunburstclick, just use a clientside callback to load a new event listener upon figure.

5

Hello,
thanks for your answer. However this did not work for me. I finally achieved it finding the plotly.js graph in the layout and returning false, but this also prevented clickData from firing my callback.
The final solution is again over a hidden button that then triggers the callback I want:

const checkElement = async selector => {
    while ( document.querySelector(selector) === null  || document.querySelector(selector).classList.contains('dash-graph--pending')) {
        await new Promise( resolve =>  requestAnimationFrame(resolve) )
    }
    return document.querySelector(selector);
};

checkElement('#sunburst_chart').then((sunburstChart) =>{
    var sunburstChartPlot = sunburstChart.querySelector('.js-plotly-plot');
    if (sunburstChartPlot) {
        sunburstChartPlot.on('plotly_sunburstclick', function(event) {
            
            hidden_button = document.getElementById("sunburst_chart_click")
            hidden_button.innerHTML = event.points[0].label
            hidden_button.click()
            return false;
        });
    }
});
1 Like