Using highcharts x-axis "zones" for datetime series chart

Question

I've got a two-series Highcharts column chart that I'm trying to modify the color between past and future. I'd like the colors in past to be green, and colors in future to be blue essentially. I've read about highcharts "zones" which allow you to change attributes on the axis after a point, but the documentation uses a simple data chart, and not a datetime version like I'm using.

How can I use these zones with a datetime chart, or better-- how can I change the border/fill color of my bars for future instead of default colors used.

http://www.highcharts.com/docs/chart-concepts/series#zones

https://jsfiddle.net/x4n91jL8/

$(function () {
    var colors = Highcharts.getOptions().colors;
    colors[0] = 'rgba(255,255,255,0)';
    colors[1] = '#7FC69E';


    $('#container').highcharts({
      "credits": {
        "enabled": false
      },
      "chart": {
        "renderTo": "container",
        "type": "area",
        "alignTicks": false,
        "height": 300,
        "marginLeft": 1,
        "marginBottom": 1,
        "backgroundColor": "transparent",
        "events": {}
      },
      "title": {
        "enabled": false,
        "text": ""
      },
      "plotOptions": {
        "series": {
          "pointPadding": 0,
          "groupPadding": 0.02,
          "marker": {
            "enabled": false
          }
        },
        "column": {
          "animation": false,
          "grouping": false,
          "pointPadding": 0,
          "borderWidth": 0,
          "allowPointSelect": false,
          "events": {}
        },
        "line": {
          "allowPointSelect": false,
          "events": {}
        },
        "area": {
          "allowPointSelect": false,
          "events": {}
        }
      },
      "legend": {
        "enabled": false,
        "layout": "horizontal",
        "align": "center",
        "verticalAlign": "top",
        "floating": true,
        "backgroundColor": "#FFFFFF"
      },
      "tooltip": {
        "enabled": false,
        "shared": true
      },
      "rangeSelector": {
        "enabled": false,
        "inputEnabled": true
      },
      "xAxis": {
        "gridLineColor": "transparent",
        "zIndex": 3,
        "minorTickInterval": 604800000,
        "minorTickPosition": "inside",
        "minorTickLength": 5,
        "minorTickWidth": 1,
        "minorGridLineWidth": 0,
        "startOnTick": false,
        "gridLineWidth": 1,
        "type": "datetime",
        "min": 1451800000000,
        "max": 1457000000000,
        "labels": {
          "enabled": false,
          "step": 1
        },
        "dateTimeLabelFormats": {
          "month": "%b",
          "year": "%Y"
        }
      },
      "series": [
        {
          "name": "Duration",
          "zIndex": 3,
          "type": "column",
          "data": [
            [
              1452470400000,
              6.5
            ],
            [
              1453075200000,
              11.25
            ],
            [
              1453680000000,
              8.25
            ],
            [
              1454284800000,
              6.55
            ],
            [
              1454889600000,
              1.05
            ],
            [
              1455494400000,
              4.633333333333333
            ],
            [
              1456099200000,
              1.1666666666666667
            ],   
          ],
          "tooltip": {
            "yDecimals": 0
          },
          "borderWidth": 1,
          "borderColor": "#008244",
          "opacity": 0.6,
          "lineWidth": 1,
          "states": {
            "hover": {
              "lineWidth": 1
            }
          },
          "zoneAxis": "x",
          "zones": [
            {
              "value": 1454284800000
            },
            {
              "borderColor": "#566888"
            }
          ],
          "_colorIndex": 0
        },
        {
          "name": "Duration",
          "zIndex": 3,
          "type": "column",
          "data": [
            [
              1454284800000,
              5.216666666666667
            ],
            [
              1454889600000,
              0
            ],
            [
              1455494400000,
              2.6666666666666665
            ],
            [
              1456099200000,
              1.1666666666666667
            ],
          ],
          "tooltip": {
            "yDecimals": 0
          },
          "borderWidth": 0,
          "borderColor": "#008244",
          "opacity": 0.6,
          "lineWidth": 1,
          "states": {
            "hover": {
              "lineWidth": 1
            }
          },
          "zoneAxis": "x",
          "zones": [
            {
              "value": 1454284800000
            },
            {
              "fillColor": "#566888"
            }
          ],
          "_colorIndex": 1
        }
      ],
      "yAxis": [
        {
          "labels": {
            "enabled": false
          },
          "opposite": false,
          "gridLineWidth": 0,
          "minorGridLineWidth": 0,
          "showEmpty": false,
          "title": {
            "text": "",
            "align": "middle",
            "style": {
              "color": "rgba(255,255,255,0)"
            }
          },
          "lineWidth": 1,
          "min": 0,
          "startOnTick": false,
          "endOnTick": false,
          "max": 16.875,
          "lineColor": "rgba(255,255,255,0)",
          "index": 0
        }
      ]
    });

});

Answer 1

The correct format is actually like this: And it also requires Highcharts 4.1.4 (I was using an older 4.0.4 actually).

"zones": [
    {
          "value": new Date().getTime(),
          "color":'#7FC69E' 
    }
}