title: Using highcharts x-axis "zones" for datetime series chart
body: <p>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.   </p>
  
  <p>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.</p>
  
  <p><a href="http://www.highcharts.com/docs/chart-concepts/series#zones" rel="nofollow">http://www.highcharts.com/docs/chart-concepts/series#zones</a></p>
  
  <p><a href="https://jsfiddle.net/x4n91jL8/" rel="nofollow">https://jsfiddle.net/x4n91jL8/</a></p>
  
  <pre><code>$(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
          }
        ]
      });
  
  });
  </code></pre>