Shapes filled with colorscale

Hi guys,

I need to create chart similar to this

I am using shapes of type rectangle to draw data. The problem is that I need to fill these rectangles with colors based on some value. For now I use property

fillcolor: ‘rgba(0, 255, 0, 1)’,

which seems only possibility to set color of shape. Is there way to somehow use colorscale as in heatmap? I would also like to have colorbar next to map.

What I achieve so far:

image

...
shapes: [
    {
      type: 'rect',
      x0: 4,
      y0: 0.5,
      x1: 7,
      y1: 3,
      fillcolor: 'rgba(0, 255, 0, 1)',
      line: {
        color: 'rgba(0, 255, 0, 1)',
        width: 2
      },
    },
...