How to make Plotly.js listen the click events of the tick labels?

Question

So, in this dynamic chart, I want to change the Y-axis' min and max values when any of the Y-axis' Tick Label is clicked.

Answer 1

You could add a d3 event listener to all y-ticks and make sure that the SVG group gets all the events. Wrapping the whole snippet in Plotly's afterplot event makes sure that the event listener does not get lost after updating the graph.

var trace1 = {
  x: [1, 2, 3, 4], 
  y: [10, 15, 13, 17], 
  type: 'scatter'
};
var trace2 = {
  x: [1, 2, 3, 4], 
  y: [16, 5, 11, 9], 
  type: 'scatter'
};
var data = [trace1, trace2];
var myPlot = document.getElementById('myDiv');
Plotly.newPlot(myPlot, data);
myPlot.on('plotly_afterplot', function(){
    Plotly.d3.selectAll(".yaxislayer-above").selectAll('text')
          .on("click", function(d) {
            alert("Hello, I am " + d.x);
          });
});

.yaxislayer-above {
  cursor: pointer;
  pointer-events: all;
}

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myDiv"></div>