3D Bar Chart

Columns and bars in our charts can have a 3D look. You can adjust depth and angle to make them more deep - click EDIT button and play with depth3D and angle properties.

by Rogério Saraceni

HTML

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>

CSS

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

JavaScript

var chart = AmCharts.makeChart("chartdiv", {
	    "theme": "light",
	    "type": "serial",

	    "autoMargins": false,
	    "marginTop": 0,
	    "marginBottom": 14,

	    "dataProvider": [{
	        "progresso": "status",
	        "dias": 15
	    }],

	    "valueAxes": [{
	        "stackType": "100%",
	        "position": "left",
          "axisAlpha": 0,
	        "gridAlpha": 0,
          "fontSize": 10,
          "axisThickness": -10,
          "autoGridCount": false,
          "gridCount": 10,
          
          
	    }],
      
      "startDuration": 1,

	    "graphs": [{
	        "balloonText": " [[value]] dias",
	        "fillAlphas": 1,
	        "lineAlpha": 1,
	        "title": "dias",
          "fontSize": 10,
          "color": "#fff",
          "labelText": "[[value]] dias",
	        "type": "column",
          "lineColor": "#3498db",
	        "valueField": "dias"
	    }],

	    "rotate": true,
	    "categoryField": "progresso",

	    "categoryAxis": {
	        "gridPosition": "start",
	        "axisAlpha": 0,
	        "gridAlpha": 0,
	        "labelsEnabled": false,
	    },

	    "export": {
	        "enabled": false
	    }
	});