Plotly heatmap fix color range in react

[fly_Robin_fly]

Hello,

I’m trying to implement my own Grafana plugins. For this I want to use the plotly heatmap.

Currently, the heatmap color scale reacts dynamically to my data range.

I want to have fix colors for each value:
value 0 → red,
value1 → green,
value2 → blue.

Code:

 var xValues = ['A', 'B', 'C', 'D', 'E'];

  var yValues = ['W', 'X', 'Y', 'Z'];

  var zValues = [
    [1, 0, 0, 1, 2],
    [1, 1, 1, 0, 0],
    [1, 1, 0, 1, 0],
    [1, 0, 1, 1, 1],
  ];

  var colorscaleValue = [
    [0, 'rgb(255,0,0)'],
    [0.5, 'rgb(0,255,0)'],
    [1, 'rgb(0,0,255)'],
  ];

  var mapData = [
    {
      x: xValues,
      y: yValues,
      z: zValues,
      type: 'heatmap',
      colorscale: colorscaleValue,
      showscale: true,
    } as Data,
  ];

  return (
    <div
      className={cx(
        styles.wrapper,
        css`
          width: ${width}px;
          height: ${height}px;
        `
      )}
    >
      <Plot data={mapData} layout={{ width: width, height: height, title: 'A Fancy Plot' }} />
    </div>
  );

Everything works perfectly as long as the whole range I want is in the data array (0 - 2).
If I only have the values 0 and 1, the color scale moves.

Example, with the whole data range:

Here I only changed the right bottom corner to value 1:

In the documentation I found the attributes “zmin” and “zmax” but I can´t find these in my library.
Everything I imported:

import React from 'react';
import { PanelProps } from '@grafana/data';
import { SimpleOptions } from 'types';
import { css, cx } from 'emotion';
import { stylesFactory } from '@grafana/ui';
import Plot from 'react-plotly.js';
import { Data } from 'plotly.js';

Is there a way to fix the colorrange with these librarys?

Thanks!