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 rahulshukla422

HTML

<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<script src="http://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="pumpFlowId" style="height:250px"></div>

CSS

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

JavaScript

var chart = AmCharts.makeChart("pumpFlowId", {
                "theme": "light",
                "type": "serial",
                "showBalloon": false,
                "valueAxes": [{
                    "axisAlpha": 0.0,
                    "position": "left",
                    "labelsEnabled": true
                }],
                "graphs": [{
                    "bullet": "round",
                    "bulletBorderAlpha": .1,
                   "bulletBorderColor": "#FFFFFF",
                    "hideBulletsCount": 50,
                    "lineThickness": 1,
                    "lineColor": "#0c3984",
                    "negativeLineColor": "#67b7dc",
                    "valueField": "YAxis",
                                        "bulletSize": 5,
                }],
                //"mouseWheelZoomEnabled": true,
              
                "chartCursor": {
                    "pan": true,
                    "valueLineEnabled": false,
                    "valueLineBalloonEnabled": true,
                    "zooming": true,
                 
                },
                "categoryField": "XAxis",
                "categoryAxis": {
                  "parseDates": true,
    							"axisAlpha": 0,
    							"minHorizontalGap": 55
                }, 
                "dataProvider": [ 
                {  
                   "XAxis":"2018-08-23 17:08:05",
                   "YAxis":"2218.02",
                   "XAxis2":"2018-08-23 17:08:05",
                   "YAxis2":"500.00",
                   "XAxis3":null,
                   "YAxis3":null
                },
                {  
                   "XAxis":"2017-08-21 17:08:05",
                   "YAxis":"2100.05",
                   "XAxis2":"2018-08-23 17:08:05",
                   "YAxis2":"565.00",
                   "XAxis3":null,
                   "YAxis3":null
                },
                {  
                   "XAxis":"2018-07-20 17:07:05",
                   "YAxis":"1980.84",
...