<p>On Plotly heatmaps, it is sometimes useful to have 2 selection modes: </p> <ul> <li><p>Rectangular selection (already available in modbar)</p> </li> <li><p><strong>Select/fix individual pixels</strong>: I'm trying to achieve this by recycling an existing "drawcircle" button that I don't need. When clicked, the pixel should highlight, or have a colored disk (or red "pin" like the Google Maps UI) on top of it </p> </li> </ul> <p>Problem: When the <code>drawcircle</code> tool is selected in the modbar, the <code>plotly_click</code> event does not fire (so we cannot get the coordinates), and <code>plotly_selected </code> No initial mouse click position is given. (I don't want to make a true circle, I just want to use the first click). See also Event handlers in JavaScript</p> <p> <pre class="brush:js;toolbar:false;">const z = Array.from({ length: 50 }, () => Array.from({ length: 50 }, () => Math.floor(Math.random() * 255))); const plot = document.querySelector("#plot"); const data = [{ type: 'heatmap', z: z }]; const layout = { 'yaxis': { 'scaleanchor': 'x' } }; const config = { modeBarButtons: [ ["zoom2d"], ["zoomIn2d"], ["zoomOut2d"], ["autoScale2d"], ["select2d"], ["drawcircle"] ], displaylogo: false, displayModeBar: true }; Plotly.newPlot('plot', data, layout, config); plot.on("plotly_selected", (data) => { console.log(data); }); plot.on('plotly_click', (data) => { console.log(data); });</pre> <pre class="brush:html;toolbar:false;"><script src="https://cdn.plot.ly/plotly-2.16.2.min.js"></script> <div id="plot"></div></pre> </p> <p><strong>How do I use the Select/Fix Pixels/Points mode bar tool on a Plotly heatmap? </strong></p> <p>Note: Python documentation is more complete than the JS version: Add/Remove Modal Bar Buttons</p>

const z = Array.from({
  length: 50
}, () => Array.from({
  length: 50
}, () => Math.floor(Math.random() * 255)));
const plot = document.querySelector("#plot");
const data = [{
  type: 'heatmap',
  z: z
}];
const layout = {
  'yaxis': {
    'scaleanchor': 'x'
  }
};
const config = {
  modeBarButtons: [
    ["zoom2d"],
    ["zoomIn2d"],
    ["zoomOut2d"],
    ["autoScale2d"],
    ["select2d"],
    ["drawcircle"]
  ],
  displaylogo: false,
  displayModeBar: true
};
Plotly.newPlot('plot', data, layout, config);

plot.on("plotly_selected", (data) => {
  console.log(data);
});
plot.on('plotly_click', function(data) {
  console.log({x: data.points[0].x, y: data.points[0].y, z: data.points[0].z});
});

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