Floating column chart spanning from negative to positive with threshold marker
HTML
<script src="http://www.amcharts.com/lib/amcharts.js" type="text/javascript"></script>
<div id="chartdiv" style="width: 100%; height: 355px; background-color: white;"></div>
JavaScript
var chart;
var chartData = [{
country: "1 month",
q1from: -2,
q1to: 3,
q2from: 3,
q2to: 5,
q3from: 5,
q3to: 6,
q4from: 6,
q4to: 7,
div: 3
}, {
country: "3 months",
q1from: -1,
q1to: 2,
q2from: 2,
q2to: 6,
q3from: 6,
q3to: 6.5,
q4from: 6.5,
q4to: 7.3,
div: 6
}, {
country: "6 month",
q1from: 4,
q1to: 4.2,
q2from: 4.2,
q2to: 4.4,
q3from: 4.4,
q3to: 5,
q4from: 5,
q4to: 7.5,
div: 4.4
}, {
country: "3 years",
q1from: 3.5,
q1to: 3.7,
q2from: 3.7,
q2to: 4,
q3from: 4,
q3to: 5,
q4from: 5,
q4to: 6.8,
div: 3.7
}, ];
AmCharts.ready(function () {
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.categoryField = "country";
chart.startDuration = 1;
// AXES
// category
var categoryAxis = chart.categoryAxis;
//categoryAxis.axisAlpha = 0;
//categoryAxis.labelRotation = 90;
//categoryAxis.gridPosition = "start";
// value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.unit = '%';
valueAxis.unitPosition = 'right';
valueAxis.stackType = "3d";
chart.addValueAxis(valueAxis);
// GRAPH
var graph_div = new AmCharts.AmGraph();
graph_div.openField = "div";
graph_div.valueField = "div";
graph_div.type = "column";
graph_div.lineAlpha = 1;
graph_div.lineThickness = 2;
graph_div.fillAlphas = 1;
graph_div.fillColors = "#FF6419";
chart.addGraph(graph_div);
var graph_q4 = new AmCharts.AmGraph();
graph_q4.openField = "q4from";
graph_q4.valueField = "q4to";
graph_q4.type = "column";
graph_q4.lineAlpha = 0;
graph_q4.fillAlphas = 1;
graph_q4.fillColors = "#275737";
chart.addGraph(graph_q4);
var graph_q3 = new AmCharts.AmGraph();
graph_q3.openField = "q3from";
graph_q3.valueField = "q3to";
graph_q3.type = "column";
graph_q3.lineAlpha =...