Heatmap is zoomed out when data labels are enabled

plotly.js
1

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

image

image

Here is the labels code

{
      hoverinfo: 'skip',
      mode: 'text',
      showlegend: false,
      text: [
        'Text1',
        'Text2',
        'Text3',
        'Text4',
        'Text5',
      ],
      x: [
        'Pollution',
        'Pollution',
        'Pollution',
        'Pollution',
        'Pollution',
      ],
      y: [
        'New York',
        'Mumbai',
        'Washington DC',
        'Canberra',
        'Paris',
      ],
    },

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

2

Hello.

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.

3

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