Disabling default click behaviour on Sunburst

plotly.js
1

Hi. I’ve been able to add and remove my own event handlers processing the ‘plotly_click’ event, but I can’t seem to stop a plot from togglilng the clicked point to become the centre of the sunburst plot. That default behaviour always occurs after my custom event handlers are called.

How can I turn off the default click behaviour for sunburst plots?

2

Solved:

Looking at the sunburst implementation’s onclick() method (https://github.com/plotly/plotly.js/blob/master/src/traces/sunburst/fx.js) indicates it is not just the plotly_click method that gets called when the user clicks a sunburst, but a plotly_sunburstclick event as well.

Returning false from the plotly_sunburstclick event handler stops the default zoom behaviour that otherwise occurs when a user clicks a data point that is not the root or a leaf data point.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="plotly-latest.min.js"></script>
</head>
<body>
  <div id="sunburst"></div>
  <script>
  const SUNBURST = document.getElementById('sunburst');
  var data = [{
    type: "sunburst",
    labels: ["Eve", "Cain", "Seth", "Enos", "Noam", "Abel", "Awan", "Enoch", "Azura"],
    parents: ["", "Eve", "Eve", "Seth", "Seth", "Eve", "Eve", "Awan", "Eve" ],
    values:  [10, 14, 12, 10, 2, 6, 6, 4, 4],
    outsidetextfont: {size: 20, color: "#377eb8"},
    leaf: {opacity: 0.4},
    marker: {line: {width: 2}},
  }];

  var layout = {
    margin: {l: 0, r: 0, b: 0, t: 0},
    width: 500,
    height: 500
  };

  Plotly.newPlot(SUNBURST, data, layout);
  SUNBURST.on('plotly_sunburstclick', function(evt) {
    for(var i = 0; i < evt.points.length; i++) {
      console.log('plotly_sunburstclick: clicked point index ' + 
          evt.points[i].pointNumber + ' (' + evt.points[i].label + ')');
    }
    return false;
  });
  </script>
</body>
</html>

Intestingly, returning false from the plotly_sunburstclick handler also prevents propagation of the event to any plotly_click handlers that have been registered on the same div.