Highcharts - Hide child labels in a multiple levels and multiple layouts treemap

Question

On highcharts, I have a treemap with 2 levels, each with a different layout algorithm. Now I want to limit what we can see to the current level. It means that on level 1, I don't want to see the labels of level 2, which would only appear when drilling down (and the labels of level 1 would disappear).

I know it is easy with levelIsConstant: false, but this only works with 1 level, and I use 2 because I need different layouts.

Here is the link to what I currently have:

series: [{
  type: "treemap",
  allowDrillToNode: true,
  alternateStartingDirection: true,
  levels: [{
    level: 1,
    layoutAlgorithm: 'squarified',
    dataLabels: {
      enabled: true,
      align: 'left',
      verticalAlign: 'top',
      style: {
        fontSize: '15px',
        fontWeight: 'bold'
      }
    }
  }, {
    level: 2,
    layoutAlgorithm: 'stripes',
    color: 'blue'
  }],
  //...

http://jsfiddle.net/dhfera2y/2/

I want all the names to be hidden, as well as the lines separating them.

EDIT: Using a rgba color on each level, I can hide the nodes below it, but I still cannot hide their label!

Flyout91 · Accepted Answer · 2016-05-02T11:17:59.997

Thank you it is a smart idea for the labels issue, but as I say I cannot use levelIsConstant: false because I need a different layout for each level at every moment. With this solution both levels can have a different layout when I am on the top level, but I soon as I drill down I loose the correct layout for the new view.

Almost :-)

EDIT : Okay so I finally managed to do it. I think it is impossible to achieve this in the way I was trying to, which was using the parent option for each child point of the serie in order to determine the hierarchy of the tree. So instead of using one serie with a hierarchy, I use one serie for the top level which I link to several series for the level below. I was able the do this thanks to the drilldown option.

I found the solution in the official documentation : http://www.highcharts.com/docs/chart-concepts/drilldown

I adjusted the code and it was all right. Here is the solution I came up with (it is a different work from my first link) : http://jsfiddle.net/ff964fog/47/

series: [{
      type: 'treemap',
      layoutAlgorithm: 'squarified',
      borderWidth: 3,
      data: modulesData
    }],
    drilldown: {
      series: servicesSerie
    },

I still have to adjust a few things (like the disappearance of the animations for the bottom level), but in the end I have exactly what I wanted !

score 0 · Answer 2 · answered Apr 29 '16 at 22:07

My take on some settings you can use to achieve this (JSFiddle):

series: [{
    type: "treemap",
    allowDrillToNode: true,
    levelIsConstant: false,
    // ...
    levels: [{
        level: 1,
        dataLabels: {
            enabled: true
        }
        // ...
    }, {
        level: 2,
        borderWidth: 0,
        dataLabels: {
            enabled: false
        }
    }],
    data[{
        //...
    }]
}]

The level 2 settings apply only when viewing from level 1. When drilling down the new view is considered to be level 1 because of levelIsConstant: false.

Setting borderWidth: 0 in level 2 is only needed if you want to hide the grid of level 2 when viewing from level 1.

score 0 · Answer 3 · answered Jul 31 '18 at 05:46

You can use a custom formatter for plotOptions.treemap.datalabels. The code bellow is an example that uses this.series.rootNode and this.point.parent and compare them to examine if the label should be shown or not:

plotOptions: {
    treemap: {
      dataLabels: {
        formatter: function(data) {
          if (this.point.parent == (this.series.rootNode || null)) {
            return this.key;
          }
        }
      }
    }
}

You can use any other property that is available in formatter function. Just log (console.log) this and data in the formatter function to see all the properties available:

plotOptions: {
    treemap: {
      dataLabels: {
        formatter: function(data) {
          console.log(this, data);
        }
      }
    }
}

Highcharts - Hide child labels in a multiple levels and multiple layouts treemap

3 Answers3