How to adjust size of rectangles in treemap using highcharts

Question

I have 4 colors in treemap and each color coresponds to a unique category. All boxes of same color lie in same space, but the shape of colored rectangle is "L". I want this shape to be rectangular instead of L.

Below is the code.

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<div id="treemap" class="treemap-chart"></div>

CSS

 .treemap-chart{
        float: left; width: 90%; text-align:center;
    }

Script

Highcharts.chart('treemap', {
        series: [{
            type: "treemap",
            layoutAlgorithm: 'squarified',
            alternateStartingDirection: true,
            levels: [{
                level: 1,
                layoutAlgorithm: 'squarified',
                dataLabels: {
                    enabled: true,
                    align: 'left',
                    verticalAlign: 'top',
                    style: {
                        fontSize: '15px',
                        fontWeight: 'bold'
                    }
                }
            }],
            data: [{name: "summarize", id: "summarize", sortIndex: 3, color: "#cd34b5", value: 1},
                {name: "describe", id: "describe", sortIndex: 3, color: "#cd34b5", value: 1},
                {name: "explain", id: "explain", sortIndex: 3, color: "#cd34b5", value: 1},
                {name: "analyze", id: "analyze", sortIndex: 1, color: "#fa8775", value: 3},
                {name: "integrate", id: "integrate", sortIndex: 1, color: "#fa8775", value: 1},
                {name: "formulate", id: "formulate", sortIndex: -1, color: "#ffd700", value: 4},
                {name: "develop", id: "develop", sortIndex: -1, color: "#ffd700", value: 3},
                {name: "design", id: "design", sortIndex: -1, color: "#ffd700", value: 1},
                {name: "apply", id: "apply", sortIndex: -3, color: "#ea5f94", value: 5},
                {name: "draw", id: "draw", sortIndex: -3, color: "#ea5f94", value: 1},
                {name: "calculate", id: "calculate", sortIndex: -3, color: "#ea5f94", value: 2},
                {name: "solve", id: "solve", sortIndex: -3, color: "#ea5f94", value: 1},
                {name: "demonstrate", id: "demonstrate", sortIndex: -3, color: "#ea5f94", value: 1}]
        }],
        title: {
            text: 'Treemap'
        }
    });

And here is output in JS fiddle.

https://jsfiddle.net/asma123/z3sg038z/

Attached is the screenshot of shape, I want. No L shape, only rectangles. This is the shape I want:

Answer 1

You can achieve this desired behavior by adding sortIndexes as categories to your data. Instead of defining the sortIndex like you are doing now, we can globalizing it with a parent.

This will make the data look like this:

    data: [{
        id: 'A',
        sortIndex: 0,
        color:"#cd34b5"
    },
        {name: "summarize", id: "summarize", parent: 'A',  value: 1},
            {name: "describe", id: "describe", parent: 'A', value: 1},
            {name: "explain", id: "explain",  parent: 'A', value: 1},
    {
        id: 'B',
        sortIndex: 1,
        color:"#fa8775"
    },
            {name: "analyze", id: "analyze",parent: 'B', value: 3},
            {name: "integrate", id: "integrate", parent: 'B', value: 1},
    {
        id: 'C',
        sortIndex: 2,
        color:"#ffd700"
    },  
            {name: "formulate", id: "formulate", parent: 'C', value: 4},
            {name: "develop", id: "develop", parent: 'C', value: 3},
            {name: "design", id: "design", parent: 'C', value: 1},
    {
        id: 'D',
        sortIndex: 3,
        color:"#ea5f94"
    },  

            {name: "apply", id: "apply",  parent: 'D', value: 5},
            {name: "draw", id: "draw", parent: 'D', value: 1},
            {name: "calculate", id: "calculate",  parent: 'D', value: 2},
            {name: "solve", id: "solve", parent: 'D', value: 1},
            {name: "demonstrate", id: "demonstrate", parent: 'D', value: 1}]
    }],

Here you can find the working JSFiddle