Plotly.js : Hide Heatmap Axes and Legends

Question

Using Plotly js for heatmap, how can I remove the x-axis, y-axis, and legend? Below you will find my code

heatmap

var data = [
{
  z: z,
  type: 'heatmap',
  colorscale : [[0, 'rgb(0,0,255)']],
  opacity: 1

}
];


Plotly.plot('myDiv', data,  {
images: [
    {
      "source": "../images/img.png",
      "xref": "x",
      "yref": "y",
      "x": -1,
      "y": 50,
      "sizex": 51,
      "sizey": 51,
      "sizing": "stretch",
      "opacity": 1,
      "layer": "above"
    }
  ]

})

Answer 1

Just lookup the respective property for showing/hiding the elements, by going to the official plotly documentation. The below properties are what you need.

• Show Legend - Hide/Show the legend.

• X-Axis Visible - Hide/Show the X-Axis.

• Y-Axis Visible - Hide/Show the Y-Axis.

The below is the code, with layout properties changed to suit your requirements.

var data = [
{
  z: z,
  type: 'heatmap',
  colorscale : [[0, 'rgb(0,0,255)']],
  opacity: 1

}
];


Plotly.plot('myDiv', data,  {
showlegend: false,
xaxis: {visible: false},
yaxis: {visible: false},
images: [
    {
      "source": "../images/img.png",
      "xref": "x",
      "yref": "y",
      "x": -1,
      "y": 50,
      "sizex": 51,
      "sizey": 51,
      "sizing": "stretch",
      "opacity": 1,
      "layer": "above"
    }
  ]

})