Simple Column Chart

If you take a close look at this chart, you will notice that grid lines are above the columns - equally dividing them into segments. This is an optional feature, of course. It allows you creating the charts close to the ones described by famous data visualization guru, <a href="http://www.edwardtufte.com/">Edward Tufte</a>, in his book "The Visual Display of Quantitative Information". <h2>From columns to bars - one simple step</h2> Click EDIT button on top of the chart, and add this text to the source (anywhere within curly brackets): <strong>"rotate":true,</strong>. Run the script and... The columns should became bars, category axis should be vertical now and value axis - horizontal! This is the only property you change to make this trick. All our Serial charts can be rotated in the same way.

by navinleon

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		: 500px;
	font-size	: 11px;
}

JavaScript

var chart = AmCharts.makeChart( "chartdiv", {
  "type": "serial",
  "theme": "light",
  "dataProvider": [ {
    "service": "DNS",
    "visits": 2025
  }, {
    "service": "HTTP",
    "visits": 1882
  }, {
    "service": "HTTPS",
    "visits": 1809
  } ],
  "valueAxes": [ {
    "gridColor": "#FFFFFF",
    "gridAlpha": 0.2,
    "dashLength": 0
  } ],
  "gridAboveGraphs": true,
  "startDuration": 1,
  "graphs": [ {
    "balloonText": "[[category]]: <b>[[value]]</b>",
    "fillAlphas": 0.8,
    "lineAlpha": 0.2,
    "type": "column",
    "valueField": "visits"
  } ],
  "chartCursor": {
    "categoryBalloonEnabled": false,
    "cursorAlpha": 0,
    "zoomable": false
  },
  "categoryField": "service",
  "categoryAxis": {
    "gridPosition": "start",
    "gridAlpha": 0,
    "tickPosition": "start",
    "tickLength": 1000
  },
  "export": {
    "enabled": true
  }

} );