title: Can I specify the cell width and height in Python's Plotly Heatmap?
body: <h1>Problem statement</h1>
  
  <p>I am trying to use <code>plotly.graph_objects.Heatmap</code> to show a dataset of (x, y, z) values where x and y are not on a fixed rectangular grid. The x values are equally spaced on a single grid, and at each x value there is an equally spaced y grid. The y grids are arbitrarily different (start, stop, num, all may vary) from one x value to the the next. The desired behavior is a set of contiguous rectangles centered on each datapoint with widths determined by spacing of x across the plot, and the spacing of y within each column.</p>
  
  <p>Here's what it looks with <code>matplotlib</code>'s <code>imshow</code>:</p>
  
  <p><img src="https://imgur.com/h43eKGL.png" alt="Desired output" title="Desired output, made using matplotlib imshow"></p>
  
  <p>The behavior of <code>Heatmap</code> makes it easy to specify this type of plot using the center of each cell, but I'm missing how to control the widths of the columns. Instead of the width I want, all the widths are 1.</p>
  
  <p><img src="https://imgur.com/bO1jAUL.png" alt="Problem output" title="My output so far, using plotly heatmap"></p>
  
  <p>A secondary problem is that the way I'm trying to do this (see below) is rather slow.</p>
  
  <h1>What I've tried</h1>
  
  <p>To make the second plot above, I'm looping over the x values. For each value I build an array that repeats x to match the length of the y and z arrays for that column, and I <code>add_trace</code> this to my figure. This is a convenient construction for my case, as it ensures the spacing of the y grid is appropriate for each column. But since there's a single repeated value for the <code>x</code> parameter in each trace, the width gets set to 1. And as I said above, this is also pretty slow.</p>
  
  <p>I've looked at the examples at <a href="https://plot.ly/python/heatmaps" rel="nofollow noreferrer">https://plot.ly/python/heatmaps</a> and read the documentation at <a href="https://plot.ly/python/reference/#heatmap" rel="nofollow noreferrer">https://plot.ly/python/reference/#heatmap</a>.</p>
  
  <p>I tried to make sense of the alternate <code>x0</code> and <code>dx</code> construction of the x values, but the docs on this are not clear to me and after some experimentation I moved on.</p>
  
  <p>I also tried using the <code>xgap</code> parameter to cut down the appearance of the cell widths, but since this is in pixels it breaks the zoom behavior of the plot. It also doesn't change the area respected by the hover tool, which breaks the hover behavior.</p>
  
  <p>Finally I also tried building a single <code>pandas.DataFrame</code> holding all the (x, y, z) values plus my desired hovertext. This is faster, but it looks like it tries to make the y axis commensurate with all the different y grids in the plot, leading to a sparse-looking array of very skinny rectangles.</p>
  
  <h1>Minimal example</h1>
  
  <p>Ideally I would like to find a fast and natural-looking way to produce the following, where the x boundaries fall exactly at -0.25, 0.25, and 0.75.</p>
  
  <p><img src="https://imgur.com/GcFKVBK.png" alt="Minimal example" title="Minimal example"></p>
  
  <pre><code>fig = go.Figure(
      layout={
          "xaxis": {"range": (-0.25, 0.75),
          "tickvals": [-0.25, 0.25, 0.75]
      }
  )
  fig.add_trace(
      go.Heatmap(
          x=[0, 0, 0],
          y=[2, 4, 6],
          z=[-1, 1, 0],
          name="Name A",
      )
  )
  fig.add_trace(
      go.Heatmap(
          x=[0.5, 0.5, 0.5],
          y=[6.1, 6.4, 6.7],
          z=[-1, 1, 2],
          name="Name B",
      )
  )
  fig.show()
  </code></pre>
  
  <p>Is there something I can easily (or not so easily) add to the above construction to set the cell widths to 0.5? If not, is there a totally different construction I should be using?</p>