#55861217: amCharts v4: Treemap, space between columns

by notacouch

HTML

<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>

CSS

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#chartdiv {
  width: 100%;
  height: 500px;
}

JavaScript

/**
 * ---------------------------------------
 * This demo was created using amCharts 4.
 * 
 * For more information visit:
 * https://www.amcharts.com/
 * 
 * Documentation is available at:
 * https://www.amcharts.com/docs/v4/
 * ---------------------------------------
 */

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

// create chart
var chart = am4core.create("chartdiv", am4charts.TreeMap);
chart.hiddenState.properties.opacity = 0; // this makes initial fade in effect

chart.data = [{
  name: "First",
  children: [
    {
      name: "A1",
      value: 100
    },
    {
      name: "A2",
      value: 60
    },
    {
      name: "A3",
      value: 30
    }
  ]
},
{
  name: "Second",
  children: [
    {
      name: "B1",
      value: 135
    },
    {
      name: "B2",
      value: 98
    },
    {
      name: "B3",
      value: 56
    }
  ]
},
{
  name: "Third",
  children: [
    {
      name: "C1",
      value: 335
    },
    {
      name: "C2",
      value: 148
    },
    {
      name: "C3",
      value: 126
    },
    {
      name: "C4",
      value: 26
    }
  ]
},
{
  name: "Fourth",
  children: [
    {
      name: "D1",
      value: 415
    },
    {
      name: "D2",
      value: 148
    },
    {
      name: "D3",
      value: 89
    },
    {
      name: "D4",
      value: 64
    },
    {
      name: "D5",
      value: 16
    }
  ]
},
{
  name: "Fifth",
  children: [
    {
      name: "E1",
      value: 687
    },
    {
      name: "E2",
      value: 148
    }
  ]
}];

chart.colors.step = 2;

// define data fields
chart.dataFields.value = "value";
chart.dataFields.name = "name";
chart.dataFields.children = "children";

chart.zoomable = false;
var bgColor = new am4core.InterfaceColorSet().getFor("background");

// level 0 series template
var level0SeriesTemplate = chart.seriesTemplates.create("0");
var level0ColumnTemplate = level0SeriesTemplate.columns.template;

level0ColumnTemplate.column.cornerRadius(10, 10, 10,...