Hello everyone,
I am trying my hands at the Heatmap chart. I like what it does and have mostly managed to customize it the way I want.
However, I was wondering if there is a way to assign colors to the cells similar to how you can do 3 color scale conditional formatting in Excel.
For example, for the given set of values, the max value is shown with green marker color, the min in red, the median value in yellow.
And then all other values follow a gradient between these 3 primary colors based on what the value is.
The heatmap already does a gradient of color, and changes the shade from dark to light as the value goes down, but it does this in just one color, depending on which theme you chose.
If it helps, I have attached a sample from excel.
Thank you.
Alok.
Ok. So I figured this out. Putting my solution here if it helps someone else in future.
Here is the code:
I used the Color API of the Series to achieve this.
What I did was:
>Picked 3 absolute rbg values which will be used to color the cell with max, min, and median values.
>For all other values, I calculate the difference from the median, and then calculate a factor of how close or far a value is from the median on either side. Using this factor, I figure out what should be the approximate values for r,g, and b. And then assign it to the cell.
color: function (point) {if (point.value.value == point.max) {
return "rgb(0, 128, 43)";
}
else if (point.value.value == point.min) {
return "rgb(248, 105, 107)";
}
else if (point.value.value == averageArrayMedian) {
return "rgb(255, 235, 132)";
}
else if (point.value.value > averageArrayMedian && point.value.value < point.max) {
var f = (point.value.value - averageArrayMedian) / (point.max - averageArrayMedian);
var r = (255-(255 * f)).toFixed(0);
var g = (235 - (107 * f)).toFixed(0);
var b = (132 - (89 * f)).toFixed(0);
return "rgb(" + r + "," + g + "," + b + ")";
}
else if (point.value.value < averageArrayMedian && point.value.value > point.min) {
var f = (averageArrayMedian - point.value.value) / (averageArrayMedian-point.min);
var r = (255 - (7 * f)).toFixed(0);
var g = (235 - (130 * f)).toFixed(0);
var b = (132 - (25 * f)).toFixed(0);
return "rgb(" + r + "," + g + "," + b + ")";
}
else {
return "green";
}
}