title: How to adjust size of rectangles in treemap using highcharts
body: <p>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.</p>
  
  <p>Below is the code.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;script src="https://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/modules/treemap.js"&gt;&lt;/script&gt;
  &lt;div id="treemap" class="treemap-chart"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code> .treemap-chart{
          float: left; width: 90%; text-align:center;
      }
  </code></pre>
  
  <p>Script</p>
  
  <pre><code>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'
          }
      });
  </code></pre>
  
  <p>And here is output in JS fiddle.</p>
  
  <p><a href="https://jsfiddle.net/asma123/z3sg038z/" rel="nofollow noreferrer">https://jsfiddle.net/asma123/z3sg038z/</a></p>
  
  <p>Attached is the screenshot of shape, I want. No L shape, only rectangles.
  This is the shape I want:
  <a href="https://i.stack.imgur.com/lqamj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lqamj.png" alt="enter image description here"></a></p>