Horizontally stacked axes

Similarly to <a href="https://www.amcharts.com/demos/vertically-stacked-axes-chart/">vertically stacked axes</a> you can stack them horizontally. It's a single XY chart with one shared Y axis and multiple value axes. Instead of arranging them one under another we arrange them horizontally. To do this, you simply set <code>chart.bottomAxesContainer.layout = "horizontal";</code>. You can specify custom width for each of the axes if you don't want them to be of the same width.

by Rogério Saraceni

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: 600px;
}

JavaScript

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

	var data = [];
	var value1 = 100;
	var value2 = 100;
	var value3 = 100;

	var names = [
		"DC Luoyang",
		"DC Beijing",
		"DC Dalian",
		"DC Jinan",
		"DC Hangzhou",
		"DC Jiangyi",
		"DC Jinhua",
		"DC Ningbo",
		"DC Quzhou",
		"DC Yueqin"
	];

	for (var i = 0; i < names.length; i++) {
		value1 += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 5);
		value2 += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 5);
		value3 += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 5);
		data.push({
			category: names[i],
			value1: value1,
			value2: value2,
			value3: value3
		});
	}

	var interfaceColors = new am4core.InterfaceColorSet();

	var chart = am4core.create("chartdiv", am4charts.XYChart);

	chart.data = data;
	// the following line makes value axes to be arranged vertically.
	chart.bottomAxesContainer.layout = "horizontal";
	chart.bottomAxesContainer.reverseOrder = true;

	var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
	categoryAxis.dataFields.category = "category";
	categoryAxis.renderer.grid.template.stroke = interfaceColors.getFor("background");
	categoryAxis.renderer.grid.template.strokeOpacity = 1;
	categoryAxis.renderer.grid.template.location = 1;
	categoryAxis.renderer.minGridDistance = 20;


	//coluna 1
	var valueAxis1 = chart.xAxes.push(new am4charts.ValueAxis());
	valueAxis1.tooltip.disabled = true;
    valueAxis1.renderer.baseGrid.disabled = true;
	valueAxis1.marginRight = 30;
	valueAxis1.renderer.gridContainer.background.fill = interfaceColors.getFor("alternativeBackground");
	valueAxis1.renderer.gridContainer.background.fillOpacity = 0.05;
	valueAxis1.renderer.grid.template.stroke = interfaceColors.getFor("background");
	valueAxis1.renderer.grid.template.strokeOpacity = 1;
	valueAxis1.title.text = "Fundamentals";
    valueAxis1.title.fontWeight = 600;
    valueAxis1.layout = "absolute";
    valueAxis1.title.dy =...