CODEWITHSUNDEEP
javascriptdynamicchartsplotly
Yash P Shah
Yash P Shah

Reputation: 809

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

enter image description here

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.

Upvotes: 5

Views: 4352

Answers (1)

Maximilian Peters
Maximilian Peters

Reputation: 31659

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>

Upvotes: 9

Related Questions