Highchart Treemap: forcing layout on 3 lines

Question

I'd like to force the layout of a Highcharts treemap to be on 3 lines (just as in a normal html table). All the items in the treemap have the same values but the jsfiddle displays boxes like row1:ACEG row2:BDFH and box I height is much bigger than the others. My code:

$(function () {
$('#container').highcharts({
    series: [{
        type: "treemap",
        layoutAlgorithm: 'strip',
        data: [{
            name: 'A',
            value: 6
        }, {
            name: 'B',
            value: 6
        }, {
            name: 'C',
            value: 6
        }, {
            name: 'D',
            value: 6
        }, {
            name: 'E',
            value: 6
        }, {
            name: 'F',
            value: 6
        }, {
            name: 'G',
            value: 6
        },{
            name: 'H',
            value: 6
        }, {
            name: 'I',
            value: 6
        }
       ]
    }],
    title: {
        text: 'Highcharts Treemap'
    }
});

});

My goal is to arrive to 3 equal rows: ABC, DEF, GHI

I tried 4 types of layout that Highcharts provides :sliceAndDice, stripes, squarified, strip

Answer 1

That's not really how treemaps are intended to work. I would try a heatmap instead.

Example:

• http://jsfiddle.net/jlbriggs/vk6sfdLs/