Search code examples
plotlyplotly.js

How to not show the axes lines on this heatmap in Plotly.js

I would like to render this heatmap without any grid lines in Plotly.js. I would like to still show tick marks at the bottom and side though (so probably not visible: false, right?). Thanks for any suggestions. Notice the axes line at 0,0 Here is the codepen: https://codepen.io/jeffp123/pen/GRxVXKL

And here is the code inline:

var data = [
  {
    colorbar: {
      thickness: 40,
      xpad: 0,
    },
    opacity: .5,
    z: [[1, 20, 30], [20, 1, 60], [30, 60, 1]],
    type: 'heatmap'
  }
];

var layout = {
  autosize: false,
  margin: { autoexpand: false, l: 80, r: 80, t: 100, b: 80, pad: 0 },
  height: 800,
  xaxis: {
    showgrid: false,
    showline: false,
  },
  yaxis: {
    showgrid: false,
    showline: false,
  },
  width: 1000,
}

Plotly.newPlot('myDiv', data, layout);
Solution

  • You're almost there, all you need to do is set xaxis.zeroline and yaxis.zeroline to false, see https://plotly.com/javascript/reference/layout/xaxis/#layout-xaxis-zeroline.