layouthighchartslabeltreemaplevels

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


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!


Solution

  • 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 !