title: Highstock Column Chart - data grouping causes data to scroll independently of axis
body: <p>I am attempting to make a stacked column chart representing events on a timeline.  I need evenly-spaced bars, that scroll left/right with their respective ticks.  Currently upon scrolling, the columns remain in place and their data is updated to reflect the new timespan they represent (I assume).</p>
  
  <p>For example: when scrolling one "step" to the right, I note these differences:</p>
  
  <p><img src="https://i.stack.imgur.com/pcOiS.png" alt="The column remains in place with updated data and the axis tick moves"></p>
  
  <p>The column remains in place with updated data and the axis tick moves to the left.  This results in a 'graphic equalizer'-like effect when scrolling.  (See <a href="http://jsfiddle.net/whiletrue/s6BmC/1/" rel="nofollow noreferrer" title="jsfiddle">fiddle</a>)</p>
  
  <p>What I need is to have the column represent the same data for the life of the chart, and to scroll left/right with its tick mark.</p>
  
  <p>I suspect I'm misunderstanding something in the configuration.  Any help/direction would be very much appreciated.</p>
  
  <p>(As a side note: is there any easy way to style/color data from the past (with an xAxis datetime value of &lt; today) differently to normal data?)</p>
  
  <pre><code>chart: {
      alignTicks: false,
      backgroundColor: '#eeeeee',
      events: {
          load: function (e) {
              this.xAxis[0].setExtremes(1390943153305, 1400015153305);
          }
      },
      ignoreHiddenSeries: true,
      renderTo: $('#chart')[0]
  },
  colors: ['#89f1a4','#68d9f7','#9eb9ef','#c49eef'],
  credits: {enabled: false},
  legend: {
      enabled: true,
      shadow: true
  },
  rangeSelector: {selected: 1},
  title: {text: 'Global Events'},
  navigator: {
      height: 40,
      xAxis: {
          gridLineWidth: 1
      },
      series: {type: 'column'}
  },
  plotOptions: {
      series: {
          showInLegend: true,
          stacking: 'normal',
          dataGrouping: {
              enabled: true,
              forced: true,
              units: [
                  ['millisecond', [604800000]], // Attempting to force data into weekly groups, throws error if this is null
                  ['second', [604800]],
                  ['minute', [10080]],
                  ['hour', [168]],
                  ['day', [7]],
                  ['week', [1]], // Expected this to be the only required option if I only want weekly grouping...
                  ['month', null],
                  ['year', null]
              ]
          }
      }
  },
  xAxis: {ordinal: false},
  series: data
  </code></pre>