Floating 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.

by HemalathaThanigaivel

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<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;
}

JavaScript

/* {
    "fillAlphas": 1,
    "title": "Value A",
    "type": "column",
    "openField": "open_a",
    "valueField": "value_a",
    "descriptionField": "desc_a",
    "balloonFunction": function(dataItem, graph){
      return '<b>' + dataItem.description + '</b>: ' + (dataItem.dataContext.value_a - dataItem.dataContext.open_a);
    },
    "clustered": false,
    "columnWidth": 1
  }, {
    "fillAlphas": 1,
    "title": "Value B",
    "type": "column",
    "openField": "open_b",
    "valueField": "value_b",
    "descriptionField": "desc_b",
    "balloonFunction": function(dataItem, graph){
      return '<b>' + dataItem.description + '</b>: ' + (dataItem.dataContext.value_b - dataItem.dataContext.open_b);
    },
    "clustered": false,
    "columnWidth": 1
  }, {
    "fillAlphas": 1,
    "title": "Value C",
    "type": "column",
    "openField": "open_c",
    "valueField": "value_c",
    "descriptionField": "desc_c",
    "balloonFunction": function(dataItem, graph){
      return '<b>' + dataItem.description + '</b>: ' + (dataItem.dataContext.value_c - dataItem.dataContext.open_c);
    },
    "clustered": false,
    "columnWidth": 1
  }, {
    "bullet": "round",
    "lineThickness": 3,
    "bulletSize": 7,
    "bulletBorderAlpha": 1,
    "bulletColor": "#FFFFFF",
    "useLineColorForBulletBorder": true,
    "bulletBorderThickness": 3,
    "fillAlphas": 0,
    "lineAlpha": 1,
    "title": "Expenses",
    "valueField": "expenses",
    "valueAxis": "v2"
  } */
var data = [ {
    "date": "2017-01-01",
    "desc_label_0": "mainIncomer",
    "open_0": 0,
    "value_0": 80,
    "desc_0": "Segment 1 gjhdj ghjs sgjds jhs jhjfs jsh ",
    "cons_0": 1234,
    "open_1": 100,
    "value_1": 180,
    "desc_1": "Segment 2",
    "cons_1": 7564,
    "open_2": 200,
    "value_2": 280,
    "desc_2": "Segment 3",
    "cons_2": 5332,
    "open_3": 300,
    "value_3": 380,
    "desc_3": "Segment 4",
    "cons_3": 3132,
    "open_4": 400,
    "value_4": 480,
    "desc_4": "Segment 5",
   ...