1. Home
  2. Forum
  3. Blazor
  4. Any way to set max and min values to be considered for gradient?

Any way to set max and min values to be considered for gradient?

Hello.

I am using heatmap to show some data. I was requested to add a TOTAL row and column on the chart, these sum the other cells values.

Problem is sum values are so much greater than data values that they make all data cells to look practically the same color.

Any way to overcome this? I was thinking on the ability to set max-min values for the gradient, and everything greater than gradient max value should look the same color.


  • If you notice, the total count, 2663, gets the darkest color, values as 18, 7, 15 are so much closer to 0 that they look the same as 0.

Captura.PNG

Thank you.


6 Replies
SA Shameer Ali Baig Sulaiman Ali Baig Syncfusion Team February 16, 2022 01:34 PM UTC

Hi Jose, 
  
Greetings from Syncfusion support. 
  
We need sometime to validate the feasibility of your requirement with HeatMap component. So, we will update you with solution details on 21st February 2022. 
  
We appreciate your patience. 
  
Regards, 
Shameer Ali Baig S. 


IL Indhumathy Loganathan Syncfusion Team February 21, 2022 03:35 PM UTC

Hi Jose, 
 
Thanks for your patience. 
 
In HeatMap, you can use the CellRendering event to customize the cell color. Check the below code snippet for reference. 
 
<SfHeatMap DataSource="@dataSource"> 
  <HeatMapEvents CellRendering="@CellRender"></HeatMapEvents> 
  <HeatMapTitleSettings Text="GDP Growth Rate for Major Economies (in Percentage)"> 
  </HeatMapTitleSettings> 
  <HeatMapXAxis Labels="@xAxisLabels"></HeatMapXAxis> 
  <HeatMapYAxis Labels="@yAxisLabels"></HeatMapYAxis> 
</SfHeatMap> 
@code{ 
  private void CellRender(HeatMapCellRenderEventArgs args) 
  { 
      if (args.CellValue > "2") 
      { 
          args.CellColor = "#EEEEEE"; 
      } 
  } 
  double[,] dataSource = new double[2, 2] 
  { 
          {9, 2 }, 
          {4, 1 } 
  }; 
  string[] xAxisLabels = new string[] { "China", "India" }; 
  string[] yAxisLabels = new string[] { "2008", "2009" }; 
 
} 
 
Please let us know whether the shared details are helpful for you. 
 
Regards, 
Indhumathy L

JP Jose Pablo February 21, 2022 10:39 PM UTC

Hello. Thanks for your answer.

This answer has the potential to fix my issue, but it will require me to individually calculate and change every cell color, since the problem is not how dark the Total cell is, but how similar the other cells are.

Would it be possible on future releases to see a gradient-max and gradient-min implementation?
Would it be possible to see on a future release an integrated row-column sum implementation?

thank you again!


IL Indhumathy Loganathan Syncfusion Team February 22, 2022 02:19 PM UTC

Hi Jose, 
 
The gradient color change is dependent on the datasource values. When the values are so close, you can't perceive the color distinctions. This is the behavior. If you want to differentiate the color values for even the nearest values, you can either try our previous mentioned solution or you can use the HeatMapPaletteSettings to achieve your requirements. 
 
Please check the below demo for reference. In which we have set palette settings to render HeatMap in gradient mode. 
 
 
Please check whether the provided details are helpful for you. 
 
Regards, 
Indhumathy L 


JP Jose Pablo February 22, 2022 07:59 PM UTC

Hello Indhumathy Loganathan. Thanks for your answer.

I think you are not understanding the requirement.

The Idea would be to override the max value gradient gets from input data and uses for calculation with some user input value (say 150), so gradient is applied on those values and any bigger value than 150 gets stuck on a single color.

My solution for my particular case was the following. I hope it helps to understand what I wanted to achieve.

(its theoretical code since my licence is for 19.3 and this needs 19.4 to work)  


protected void CellRender(HeatMapCellRenderEventArgs args)
    {
        if (args.XLabel=="Total" || args.YLabel=="Total") //a
        {
            args.CellColor = "#BABABA";
        }
        else //b
        {
            //c
            var R = (int)176-176*args.Value/150.0;
            var G = (int)232-(232-163)*args.Value/150.0;
            var B = (int)176-(239-177)*args.Value/150.0;
            //d
            if (R<0) R=0;
            if (G<163) G=163;
            if (B<0) B=177;
            //e
            args.CellColor =$"#{R.ToString("X2")}{G.ToString("X2")}{B.ToString("X2")}";
        }
        //////////////////
        // a: "Total" is the name of the bottom row and rightmost column. Those will be gray 
        // b: On any other column I'll manually calculate a fixed gradient. 
        //    I know that my data will never be bigger than 150 for my particular case.
        // c: Gradient Calculation. 
        //    Lightest color should be (176,232,176) and darkest should be (0,163,177)
        // d: Set color threshold. never darker than (0,163,177)
        // e: assign the resulting hexadecimal color string to the cell
        //////////////////
    }

Just to clarify. My data will never be bigger than 150, except for the data on the totals row and column, that will be far bigger since those are special cells containing sums


IL Indhumathy Loganathan Syncfusion Team February 24, 2022 02:37 PM UTC

Hi Jose, 
 
From the explanation, we understood that you wanted to set min and max values for the gradient cell color based on some calculation. As explained earlier, you can use our HeatMapPaletteSettings to set the cell color for different range values. Check the below code snippet. 
 
<HeatMapPaletteSettings Type="@PalatteType"> 
    <HeatMapPalettes> 
        <HeatMapPalette Value="4.3" Color="#FFFFDA"></HeatMapPalette> 
        <HeatMapPalette Value="7" Color="#EDF8B6"></HeatMapPalette> 
        <HeatMapPalette Value="9" Color="#CAE8B4"></HeatMapPalette> 
        <HeatMapPalette Value="15" Color="#78D1BD"></HeatMapPalette> 
        <HeatMapPalette Value="25" Color="#208FC6"></HeatMapPalette> 
        <HeatMapPalette Value="30" Color="#253494"></HeatMapPalette> 
        <HeatMapPalette Value="32" Color="#081D58"></HeatMapPalette> 
    </HeatMapPalettes> 
</HeatMapPaletteSettings> 
 
Otherwise, you can set the StartValue and EndValue properties to define the range of start and end values in the data source, and the MinColor and MaxColor properties to represent the colors of a given range. Check the below code snippet. 
 
<HeatMapPaletteSettings Type="@PalatteType"> 
    <HeatMapPalettes> 
        <HeatMapPalette StartValue="0" EndValue="10" MinColor="#F0C27B" MaxColor="#BE8D6C"></HeatMapPalette> 
        <HeatMapPalette StartValue="10" EndValue="30" MinColor="#A26E63" MaxColor="#4B1248"></HeatMapPalette> 
        <HeatMapPalette StartValue="30" EndValue="55" MinColor="#694b77" MaxColor="#d27d85"></HeatMapPalette> 
        <HeatMapPalette StartValue="55" EndValue="99" MinColor="#ed9485" MaxColor="#e44841"></HeatMapPalette> 
    </HeatMapPalettes> 
</HeatMapPaletteSettings> 
 
 
 
Also, check out the below links to know more about HeatMapPalette. 
 
 
Please check whether the shared details helpful for you. 
 
Regards, 
Indhumathy L 


Loader.
Up arrow icon