Discreet colormap

Hi Pramod

There is a way, yes

There is a technique we use in 3D charts in our WPF (windows) version of scichart, where we basically define gradient stops like this:

Given a set of gradient stops

    const heatmapColorMap = new HeatmapColorMap({ 
                    gradientStops: [
                       { offset: 0, color: "Red" },
                       { offset: 0.5, color: "Green" }
                       { offset: 1, color: "Blue" }
                    ]
                });

This will perform a gradient between offset 0 (red) and offset 0.5 (green) and offset 1 (blue).

If you want a hard transition from red to green, and green to blue, then inject extra gradient stops like this

 gradientStops: [
        { offset: 0, color: "Red" },
        { offset: 0.4999, color: "Red" },
        { offset: 0.5, color: "Green" }
        { offset: 0.9999, color: "Green" }
        { offset: 1, color: "Blue" }
 ]

Anything between stop 0 and 0.4999 will now be red and 0.5 to 0.9999 will be hard green

Let me know if this helps!

Best regards,
Andrew

Dear Andrew,

Thank you for the suugestion, but it does not seem to make any difference,
Please see the attached images:
1. session-5_scan-4_Fluorescence-Image.png using normal gradiant map:
colormap:

      Rainbow: [
    [0, 'rgb(150,0,90)'], [0.125, 'rgb(0,0,200)'],
    [0.25, 'rgb(0,25,255)'], [0.375, 'rgb(0,152,255)'],
    [0.5, 'rgb(44,255,150)'], [0.625, 'rgb(151,255,0)'],
    [0.75, 'rgb(255,234,0)'], [0.875, 'rgb(255,111,0)'],
    [1, 'rgb(255,0,0)']
  ],

1. session-5_scan-4_Fluorescence-Image_discreet.png using suggested changes to the colormap:
   colormap:

     RainbowDiscreet: [
   [0, 'rgb(150,0,90)'],
   [0.12499, 'rgb(150,0,90)'],
   [0.125, 'rgb(0,0,200)'],
   [0.24999, 'rgb(0,0,200)'],
   [0.25, 'rgb(0,25,255)'],
   [0.37499, 'rgb(0,25,255)'],
   [0.375, 'rgb(0,152,255)'],
   [0.49999, 'rgb(0,152,255)'],
   [0.5, 'rgb(44,255,150)'],
   [0.62499, 'rgb(44,255,150)'],
   [0.625, 'rgb(151,255,0)'],
   [0.74999, 'rgb(151,255,0)'],
   [0.75, 'rgb(255,234,0)'],
   [0.87499, 'rgb(255,234,0)'],
   [0.875, 'rgb(255,111,0)'],
   [0.99999, 'rgb(255,111,0)'],
   [1, 'rgb(255,0,0)']
   

   ],

   I was hoping for functionality where the heatmap instead of gradients shows discreet levels almost like categories.

Let me know if there any thing else I can try.

Best,

Pramod

Hello, we will need a bit more info and clarification on this to be able to assist properly.
Ideally, please send us a minimal working example via CodePen / CodeSandbox.

Here is some info that might be helpful.
To define the color of a heatmap cell we generate a gradient based on the colormap values.
The gradient range has 256 colors. The color you get on the heatmap corresponds to the Z value normalized accordingly to the colorMap.minimum and colorMap.maximum.

Also, there is a “useLinearTextureFiltering” property on the Heatmap Series.
I believe in your case this should be disabled. (And probably is, by default)

So I would suggest trying to define a colormap with 256 entries. And probably repeat them to divide the gradient equally.
Also, consider the number of distinct Z values that can be passed to the series.

Then let us know your progress on this so that we can decide the next steps.