Heatmap is zoomed out when data labels are enabled

I used traces for data labels so as to enhance performance. But on doing so there is a gap present at the ends of the heatmap



Here is the labels code

      hoverinfo: 'skip',
      mode: 'text',
      showlegend: false,
      text: [
      x: [
      y: [
        'New York',
        'Washington DC',

Any way to fix this gap? I put stackblitz link below for reference


I had a before similar issue with my heatmap. You need to play with the range of the yaxis:

In your stackblitz:

  const layout = {
    height: 900,
    width: 300,
    autoscale: false,
    yaxis: { automargin: true, range: [0,5] },
    xaxis: { automargin: true },
    title: 'Basic Heatmap',
    dragmode: 'zoom',
    showlegend: true,
    hovermode: 'closest',

You need to find the range where all your points a visible.

Hey, it works! Thank you!

I had to set the range from -0.5 to length of y elements - 0.5. So suppose if I have 50 y elements, I had to set it to [-0.5, 49.5]

1 Like