Highchart Treemap Colors

Question

I want to show tree map with different on different levels by using property 'colorByPoint' true.

    Highcharts.chart('container', {

     chart: {
    marginTop: 50,
    events: {
      load: function() {
        this.bread = {
          '': makeNode('', this.series[0].name, this.series[0])
        }
      }
    }
  },
    series: [{
        type: 'treemap',
        layoutAlgorithm: 'squarified',
        allowDrillToNode: true,
        animationLimit: 1000,
        dataLabels: {
            enabled: false
        },

        levelIsConstant: false,
        levels: [{
            level: 1,
            dataLabels: {
                enabled: true,
                align:'left',
                verticalAlign:'Top'
            },
            borderWidth: 1
        },
        {
            level: 2,
            colorByPoint: true, 
            dataLabels: {
                enabled: true,

            },
            borderWidth: 1
        }


        ],
        data: points
    }],
     credits:false,
     plotOptions: {
        series: {

          dataLabels: {


            color: '#fff',
            textOutline:0,
            style: {
              fontWeight: 'bold'
            }
          },
          point: {
        events: {
          click: function(e) {
            const hasChildren = !!this.node.childrenTotal

            if (hasChildren) {
              const bread = this.series.chart.bread
              bread[this.id] = makeNode(this.id, this.name, this.series, bread[this.node.parent])
            }
          }
        }
      }
        }
        },
    title: {
        text: ''
    }
});

Here is my js fiddle. https://jsfiddle.net/irfanbsse/8djawts9/

But I dont want show second level color on first level.Same for second level and so on. how i can do it ? Thanks

Answer 1

Here's a demo that shows how to change color of child nodes on point.click.event:

      click: function() {
        var points = this.series.points;

        this.node.children.forEach(function(child, i) {
          var point = points.find(function(point_) {
            return child.id === point_.id
          });

          point.update({
            color: color[i % (color.length - 1)]
          });
        });

Live demo: https://jsfiddle.net/BlackLabel/sgkah0fq/

The next thing to implement is reverting the original colors while clicking on the previous level in navigation (label with callout shape).