custom data bar chart

As you can see, the bars (also columns) in our charts can start and end at any place, not necessary from axis or zero-coordinate. All you need to do is set <strong>openField</strong> for column graph and set the open values in data. For a floating-columns check <a href="/demos/waterfall-chart/">Waterfall chart</a> demo.

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/themes/light.js"></script>
<div id="chartdiv"></div>

CSS

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

JavaScript

var data = [
  {
    "name": "Test1",
    "count": 0,
    "amount": 0,
    "amtData": [
      0,
      0,
      0,
      0
    ],
    "cntData": [
      0,
      0,
      0,
      0
    ],
    "color": "#FF0F00"
  },
  {
    "name": "Test2",
    "count": 1,
    "amount": 4164,
    "amtData": [
      4164,
      0,
      0,
      0
    ],
    "cntData": [
      1,
      0,
      0,
      0
    ],
    "color": "#FF0F00"
  },
  {
    "name": "Test3",
    "count": 1,
    "amount": 2509,
    "amtData": [
      2509,
      0,
      0,
      0
    ],
    "cntData": [
      1,
      0,
      0,
      0
    ],
    "color": "#FF0F00"
  },
  {
    "name": "Test4",
    "count": 1,
    "amount": 9909,
    "amtData": [
      9909,
      0,
      0,
      0
    ],
    "cntData": [
      1,
      0,
      0,
      0
    ],
    "color": "#FF0F00"
  },
  {
    "name": "Test5",
    "count": 0,
    "dollars": 0,
    "amount": [
      0,
      0,
      0,
      0
    ],
    "cntData": [
      0,
      0,
      0,
      0
    ],
    "color": "#FF0F00"
  }
]

var chart = AmCharts.makeChart("chartdiv", {
  "theme": "light",
  "type": "serial",
  "dataProvider": data,
  "startDuration": 1,
  "graphs": [{
    "balloonText": "<b>[[category]]</b><br>starts at [[count]]<br>ends at [[amount]]",
    "colorField": "color",
    "fillAlphas": 0.8,
    "lineAlpha": 0,
    "openField": "count",
    "type": "column",
    "valueField": "amount"
  }],
  "rotate": true,
  "columnWidth": 0.8,
  "categoryField": "name",
  "categoryAxis": {
    "gridPosition": "start",
    "axisAlpha": 0,
    "gridAlpha": 0,
    "position": "left"
  },
  "export": {
    "enabled": true
  }
});