Unable to use string for y-axis for Heatmap (Plotly js)

App Building
1

This happens when using the chart component. If y contains string, the heatmap would not load at all. However, it works if it is a int/float.

image
image426×550 13.2 KB

[
  {
    'name': 'Test Heatmap',
    'z': [[1,2,3],[4,5,6]],
    'x': ['2021-01-01', '2021-02-01', '2021-03-01'],
    'y': [5,6],
    // 'y': ['test1', 'test2'],
    "type": 'heatmap'
  }
]
2

Hey @perceptron!

This heatmap issue is actually due to the default layout settings. Here the Y-Axis is set to Linear, You'll want to get rid of this or change it to something more fitting for your data set like Category.

image
image754×394 11.2 KB

Here is my Data tab:

 [
  {
    z: [[1, null, 30, 50, 1], [20, 1, 60, 80, 30], [30, 60, 1, -10, 20]],
    x: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
    y: ['Morning', 'Afternoon', 'Evening'],
    type: 'heatmap',
    hoverongaps: false
  }
]

Here is my layout Tab:

{
  "title": {
    "text": "",
    "font": {
      "color": "#3D3D3D",
      "size": 16
    }
  },
  "font": {
    "family": "Inter",
    "color": "#979797"
  },
  "showlegend": true,
  "legend": {
    "xanchor": "center",
    "x": 0.45,
    "y": -0.2,
    "orientation": "h"
  },
  "margin": {
    "l": 16,
    "r": 24,
    "t": 24,
    "b": 32,
    "pad": 2
  },
  "hovermode": "closest",
  "hoverlabel": {
    "bgcolor": "#000",
    "bordercolor": "#000",
    "font": {
      "color": "#fff",
      "family": "Inter",
      "size": 12
    }
  },
  "clickmode": "select+event",
  "dragmode": "select",
  "xaxis": {
    "title": {
      "text": "",
      "standoff": 6,
      "font": {
        "size": 12
      }
    },
    "type": "-",
    "tickformat": "",
    "automargin": true,
    "fixedrange": true,
    "gridcolor": "#fff",
    "zerolinecolor": "#fff"
  },
  "yaxis": {
    "title": {
      "text": "",
      "standoff": 6,
      "font": {
        "size": 12
      }
    },
    "type": category,
    "tickformat": "",
    "automargin": true,
    "fixedrange": true,
    "zerolinecolor": "#DEDEDE"
  }
}

.Hope That helps! Love that you are using heat maps in Retool! Super cool idea :slight_smile:

1 Like
3

thanks so much for your help!

4