Layered Column Chart

In some scenarios, showing multiple column series side-by-side (clustered) is the best and most "standard" way to display multiple column series. However, when each series has equal and fairly limited number of items, layering series on top of each other presents a much more impactful visualization. To achieve that with amCharts 4, you just disable clustering on each series (<code>series.clustered = false</code>) and then make columns in one of them wider (or narrower) than the other (<code>series2.columns.template.width = am4core.percent(50)</code>).

by amcharts

HTML

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

<a id="t1" class="fil">Tab 1</a> <a class="fil" id="t2">Tab 2</a>

<a class="fil2" id="f1">Filter</a>
<div id="tab1">
  <div id="legendwrapper1">
    <div id="legenddiv1"></div>
  </div>
  <div id="chartdiv1"></div>
</div>
<div id="tab2">
  <div id="legendwrapper2">
    <div id="legenddiv2"></div>
  </div>
  <div id="chartdiv2"></div>
</div>

CSS

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

#chartdiv1 {
  width: 100%;
  height: 500px;
}
#chartdiv2 {
  width: 100%;
  height: 500px;
}
#tab2 {
  display: none;
}
#tab1 {
  display: none;
}

.fil {
  border: 1px solid #d3d3d3;
  padding: 5px;
  cursor: pointer;
  background: red;
  color: #fff;
}

.fil2 {
  border: 1px solid #d3d3d3;
  padding: 5px;
  cursor: pointer;
  background: #6794dc;
  color: #fff;
}
 #legenddiv,#legenddiv1 {
  width: 100%;
  height: 200px;
  margin: 1em 0;
}

#legendwrapper1 {
  overflow-x: none;
  height: 150px;
  max-height: 150px;
  border: 1px dotted #c99;
  overflow-y: scroll;    
}

#legendwrapper2 {
  overflow-x: none;
  height: 150px;
  max-height: 150px;
  border: 1px dotted #c99;
  overflow-y: scroll;    
}

JavaScript

var data = [
	{
		"display": "May      ",
		"aiv_none": 0,
		"Series1 DSB Healthcare Ltd": 3,
		"Series1 AIVHUB Support": 3,
		"Series1 Section AIV (HUB) Ltd": 6,
		"Series1 Section Mayur Hospital": 10,
		"Series1 Transportation Parth (UK) Ltd": 6,
		"Series1 ICU MINAX Ltd": 12,
		"Series1 OLED (MIMU) Ltd": 7,
		"Series1 Transportation Colleges (Vadodara) Ltd": 2,
		"Series1 OLD Road Colleges Exeter Ltd": 4,
		"Series1 Section Colleges (Postman) Ltd": 13,
		"Series1 Section Colleges (Merton) Ltd": 25,
		"Series1 CAST View/Columbus/Cornelius": 1,
		"Series1 DOT Matrix Printer": 11,
		"Series1 Kolkata Hospital Company PLC": 7,
		"Series1 Institute Services (Tendring) Ltd": 10,
		"Series1 Section MINAX  Ltd": 9,
		"Series1 BOMBAY Healthcare PLC": 2,
		"Series1 Health Hardik Collective": 1,
		"Series1 Denk HealthcareHazribag Ltd": 1,
		"Series1 Pariki SCH PLC (South Tees)": 5,
		"Series1 Deshmera Baba Company Ltd": 3,
		"Series1 Dalmentary and Rugby MINAX PLC": 1,
		"Series1 Silver Waste PFI": 5,
		"Series1 Transportation Colleges (Knowsley) Ltd": 2,
		"Series1 Transportation Colleges (Stoke) Limited": 3,
		"Series1 Chopbox Waste": 1,
		"Series1 Transportation Colleges (Toddunga) Ltd": 3,
		"Series1 Bye Food Health Ltd": 1,
		"Series1 Hemer Dance India Dance Stock": 2,
		"Series1 University of Mawa": 7,
		"Series1 OLD Road Colleges (Op Road) Ltd": 1,
		"Series1 Mei Tera Hero Waste PFI": 1,
		"Series2 DSB Healthcare Ltd": 3,
		"Series2 AIVHUB Support": 3,
		"Series2 Section AIV (HUB) Ltd": 6,
		"Series2 Section Mayur Hospital": 10,
		"Series2 Transportation Parth (UK) Ltd": 6,
		"Series2 ICU MINAX Ltd": 12,
		"Series2 OLED (MIMU) Ltd": 7,
		"Series2 Transportation Colleges (Vadodara) Ltd": 2,
		"Series2 OLD Road Colleges Exeter Ltd": 4,
		"Series2 Section Colleges (Postman) Ltd": 13,
		"Series2 Section Colleges (Merton) Ltd": 25,
		"Series2 CAST View/Columbus/Cornelius": 1,
		"Series2 DOT Matrix Printer": 11,
		"Series2 Kolkata Hospital Company PLC": 7,
		"Series2...