Pre loader

Discreet colormap

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums


Is there a way to get discreet colormap for the heatmap? currently no matter how many or how few colors are defined in the colormap table it always adds a gradient. how can we get a discreet ranges for colormap?


  • You must to post comments

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,

  • You must to post comments

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:

      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:

      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.



  • You must to post comments

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.

  • You must to post comments
Showing 3 results
Your Answer

Please first to submit.