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!