Column With Rotated Series

Column chart (or Bar chart) is the most recognizable and easiest to comprehend chart type. When your goal is not to woo viewers with fancy graphics but rather delivering the information in the most straightforward way, Column chart is your best friend. However, when you get over a certain amount of columns (or your items just have fairly long names) axis labels become quite crowded and hard to read. One option to rectify this is to <a href="https://www.amcharts.com/dataviz-tip-13-switch-horizontal-bar-chart-labels-dont-fit/">switch from a vertical to a horizontal bar chart</a>. Another quick fix is to turn the labels on their side. In amCharts 4 you do this with the <a href="https://www.amcharts.com/docs/v4/reference/label/#rotation_property"><code>Label.rotation</code></a> property on the axis. <code>categoryAxis.renderer.labels.template.rotation = 270;</code>

by amcharts

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

am4core.options.commercialLicense= true;
			
		// Create chart instance
		var chart = am4core.create("chartdiv", am4charts.XYChart);
	
	
		// Add data
		chart.data = [{
		  "country": "USA",
		  "visits": 0
		}, {
		  "country": "China",
		  "visits": 0
		}, {
		  "country": "Japan",
		  "visits": 0
		}, {
		  "country": "Germany",
		  "visits": 0
		}, {
		  "country": "UK",
		  "visits": 0
		}, {
		  "country": "France",
		  "visits": 0
		}, {
		  "country": "India",
		  "visits": 0
		}, {
		  "country": "Spain",
		  "visits": 0
		}];
	
		// Create axes
		var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
		categoryAxis.dataFields.category = "country";
		categoryAxis.renderer.grid.template.location = 0;
		categoryAxis.renderer.minGridDistance = 30;
		categoryAxis.tooltip.disabled = true;
		categoryAxis.renderer.minHeight = 110;
		categoryAxis.renderer.fontSize = 0;
		
		categoryAxis.renderer.line.strokeOpacity = 1;
		categoryAxis.renderer.grid.template.strokeWidth = 0.3;
	
		var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
		categoryAxis.renderer.minGridDistance = 20;
		valueAxis.renderer.minWidth = 50;
		valueAxis.renderer.fontSize = 0;
		  
		valueAxis.renderer.line.strokeOpacity = 1;
    valueAxis.renderer.baseGrid.strokeOpacity = 0;
		valueAxis.renderer.grid.template.strokeWidth = 0.3;
	
		// Create series
		var series = chart.series.push(new am4charts.ColumnSeries());
		series.dataFields.valueY = "visits";
		series.dataFields.categoryX = "country";
		series.columns.template.strokeWidth = 0;
	
		series.tooltip.pointerOrientation = "vertical";
		series.strokeWidth = 0;
		
		// Create label for no data available
		let label = chart.createChild(am4core.Label);
		
		label.text="Please make selection from left panel";
		
		label.fontSize = 15;
		label.isMeasured = false;
		label.x = am4core.percent(40);
		label.y = am4core.percent(40);