score:2

Accepted answer

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

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

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);
        }
      }
    }
}

Related Query

More Query from same tag