title: Create zones on highcharts line charts based on categories
body: <p>I have a graph which will display two line graphs. I define each series more or less like this:</p>
  
  <pre><code>    {
        data,
        name,
        type: 'line',
        zoneAxis: 'x',
        zones: getZones()
      }
  </code></pre>
  
  <p>The x-axis of my graph uses categories which are each month of the year:</p>
  
  <pre><code>xAxis: {
    categories: data.timestamps.forEach(function(time) {
                    dates.push(moment(time).format('MMM D'));
                }),
                ...
  }
  </code></pre>
  
  <p>And I define my zones like this:</p>
  
  <pre><code>{
    value: moment(data.timestamp).format('MMM'),
    color: data.color
  }
  </code></pre>
  
  <p>I figured since the data being passed to the xAxis will ultimately result in an array like <code>['Jan', 'Feb',...]</code> if I set the value of each point to be similar, the result should be the graph changes colors between the points that I set. Instead what I'm seeing is that regardless of what is in the <code>zones</code> array the line on the graph remains the same color as the first element in the array (though the points do change color based on their defined color). My question is is it possible to define zones in the way I'm looking for when the xAxis is based on categories and not on the x value of each individual point, and if so what is the correct way to set up the graph to do this? For what it is worth I did try setting the x-axis on each individual point to be the raw Unix timestamp and then set up a formatter in my plot options on the x-axis but this resulted in some months being duplicated on the graph and the line graphs appearing on after another rather than on top of each other. </p>