3D Cylinder Chart

amCharts 4 includes a <a href="https://www.amcharts.com/docs/v4/chart-types/xy-chart/#Going_3D">3D variant of XYChart</a> called <a href="https://www.amcharts.com/docs/v4/reference/xychart3d/">XYChart3D</a>. With <a href="https://www.amcharts.com/docs/v4/reference/coneseries/">ConeSeries</a> we can easily create a bar chart with cylinder-like bars.

by amcharts

HTML

<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.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 instance
var chart = am4core.create("chartdiv", am4charts.XYChart3D);
chart.paddingBottom = 30;
//chart.angle = 180;
chart.scrollbarX = new am4core.Scrollbar();

// Add data
chart.data = [{
  "country": "USA",
  "visits": 4025
}, {
  "country": "China",
  "visits": 1882
}, {
  "country": "Japan",
  "visits": 1809
}, {
  "country": "Germany",
  "visits": 1322
}, {
  "country": "UK",
  "visits": 1122
}, {
  "country": "France",
  "visits": 1114
}, {
  "country": "India",
  "visits": 984
}, {
  "country": "Spain",
  "visits": 711
}, {
  "country": "Netherlands",
  "visits": 665
}, {
  "country": "Russia",
  "visits": 580
}, {
  "country": "South Korea",
  "visits": 443
}, {
  "country": "Canada",
  "visits": 441
}, {
  "country": "Brazil",
  "visits": 395
}, {
  "country": "Italy",
  "visits": 386
}, {
  "country": "Taiwan",
  "visits": 338
}];

// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "country";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 20;
// categoryAxis.renderer.inside = true;
categoryAxis.renderer.grid.template.disabled = true;

let labelTemplate = categoryAxis.renderer.labels.template;
// labelTemplate.rotation = -90;
// labelTemplate.horizontalCenter = "left";
// labelTemplate.verticalCenter = "middle";
// labelTemplate.dy = 10; // moves it a bit down;
// labelTemplate.inside = false; // this is done to avoid settings which are not suitable when label is rotated



/*
labelTemplate.adapter.add("dy", function(dy, target){  
  return dy
})
*/

var valueAxis = chart.yAxes.push(new...