Highchart : drill down tree map conditional coloring with dynamic data

Question

I am not able to set the color in tree map based on a value. value is coming dynamically from api response. Here is how I am trying to achieve same but id is not working. It is a drilldown tree map.if anyone can help me. I want to set the colors as per the colorvalue.

function treeMap(containerID, jsonData, titleText, subTitleText, type, colorValue) {
    Highcharts.AST.allowedAttributes.push('onmousedown')
    treeChart = Highcharts.chart(containerID, {
        colorAxis: {
            minColor: Highcharts.getOptions().colors[9],
            maxColor: '#FFFFFF',
        },
        plotOptions: {
            series: {
                turboThreshold: 10000
            }
        },
        series: [{
            type: "treemap",
            allowDrillToNode: true,
            layoutAlgorithm: 'squarified',
            dataLabels: {
                enabled: false
            },
            levelIsConstant: false,
            levels: [{
                level: 1,
                dataLabels: {
                    enabled: true
                },
                borderWidth: 3
            }],
            name: titleText,
            data: jsonData[0].concat(jsonData[1]),
            colorKey:colorValue
        }],
        tooltip: {
            useHTML: true,
            style: {
                pointerEvents: 'auto'
            },
            stickOnContact: true,
            pointFormatter: function() {
                return chartToolTip(this, type);
            }
        },
        title: {
            text: titleText
        },
        subtitle: {
            text: subTitleText
        }
    });
}

Answer 1

As API says, series.colorKey is a string that determinates what data value should be used to calculate point color. Whereas colorValue should be passed with data. I hope the following, simplified example will clarify it:

Example code:

let colorValue = [1, 5, 10];

Highcharts.chart('container', {
  colorAxis: {
    minColor: '#FFF000',
    maxColor: '#0000FF'
  },

  series: [{
    type: 'treemap',
    colorKey: 'colorValue',
    data: [{
      value: 4,
      colorValue: colorValue[0]
    }, {
      value: 3,
      colorValue: colorValue[1]
    }, {
      value: 2,
      colorValue: colorValue[1]
    }, {
      value: 1,
      colorValue: colorValue[2]
    }]
  }]
});

API Reference: https://api.highcharts.com/highcharts/plotOptions.treemap.colorKey

Demo: https://jsfiddle.net/BlackLabel/wa4h0cgk/