Description
Hello,
it seems that the shape click event is not yet available.
I have a heatmap on which I draw rectangles using "drawrect" button and I want to trigger an event when I click on one, in order to get the shape's index, but I can't find any plotly event already existing that triggers in that situation.
I found in draw.js script from the source code (draw.js) the function that is automatically triggered when a shape is clicked on to change its style and make it draggable, resizable, or erasable (line 189):
path.node().addEventListener('click', function() { return activateShape(gd, path); });
Therefore, I believe there should be a way to add actions to this ‘click’ event and obtain its index as well.
I have also read about some dependencies with the dragmode and clickmode attributes’ values, but I am unable to proceed with them.
A simple example is available here codepenExample or here:
HTML:
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id="graph"></div>
</body>
JS:
{
editable: true,
label: { text: "" },
xref: "x",
yref: "y",
layer: "above",
opacity: 1,
line: { color: "white", width: 5, dash: "solid" },
fillcolor: "rgba(0, 0, 0, 0)",
fillrule: "evenodd",
type: "rect",
x0: 0.5,
y0: 0,
x1: 0.75,
y1: 1.5
}
];
var fig = {
data: [
{
z: [
[1, 20, 30],
[20, 1, 60],
[30, 60, 1]
],
type: "heatmap"
}
],
layout: {
title: "Heatmap with drawn rectangles",
shapes: shapes,
dragmode: "drawrect",
clickmode: "event+select"
},
config: {
displayModeBar: true,
modeBarButtons: [[], ["zoom2d", "drawrect", "eraseshape", "autoScale2d"]]
}
};
var gd = document.getElementById("graph");
Plotly.plot(gd, fig);
gd.on("plotly_click", function (d) {
alert("plotly click");
console.log(d);
});
gd.on("plotly_relayouting", function (d) {
alert("plotly relayouting");
console.log(d);
});
// gd.on("plotly_relayout", function(d) {
// alert("plotly relayout")
// console.log(d)
// })
// gd.on("plotly_selected", function(d) {
// alert("plotly selected")
// console.log(d);
// });
// gd.on("plotly_selecting", function(d) {
// alert("plotly selecting")
// console.log(d);
// });
If it doesn't exist yet, it would be nice to implement it =)!
Thanks a lot,
YP