Add conditional color to Treemap - highcharts

Question

Trying to add color to Heatmap. The color is based on the values with the following conditions.
if value 'equals or less than': -3.0 (green)
if value less than or equal to' -1.0 (red)
if value equals zero (grey)
if value 'greater than or equal to' 0.1 (orange)
if value 'greater than or equal to' 3.0 (purple)
https://jsfiddle.net/d_paul/rq862nuv/

Answer 1

What you defined as point's value, in fact it should be the point's colorValue. value is the information about the point's size, colorValue about its color. colorValue might be a negative number - value must not. If you want the point's size depends on its color, you need to transform colorValue scale to some positive scale, e.g. [1, 10].
If you define colorValue for points, then you can use colorAxis.dataClasses and the colors will be applied.
var dataMin = points.filter(p => !isNaN(p.value)).reduce((min, p) => Math.min(min, p.value), Infinity);
var dataMax = points.filter(p => !isNaN(p.value)).reduce((max, p) => Math.max(max, p.value), -Infinity);
var newMin = 1;
var newMax = 10;
function transformValue (value) {
return (newMax - newMin) * (value - dataMin) / (dataMax - dataMin) + newMin;
}
var transformedData = points.map(p => {
var transformedPoint = Object.assign({}, p);
if (p.value !== undefined) {
transformedPoint.value = transformValue(p.value);
transformedPoint.colorValue = p.value;
}
return transformedPoint;
});
Classes for colorAxis
colorAxis: {
dataClasses: [{
to: -3,
color: '#00ff00'
}, {
from: -3,
to: -1,
color: '#ff0000'
}, {
from: 0,
to: 0,
color: '#000000'
}, {
from: 0.1,
to: 3,
color: '#0000ff'
}, {
from: 3,
color: '#00ffff'
}]
},
example with the transformed data: https://jsfiddle.net/aepu6dvt/
example with the points with the same size: https://jsfiddle.net/aepu6dvt/1/