title: Highcharts X-Axis New Values
body: <p>I am using highcharts to draw a column chart as following:</p>
  
  <pre><code>var chart;
  var count = 0;
  $(function () {
  $(document).ready(function() {
      chart = new Highcharts.Chart({
          chart: {
              renderTo: 'graph',
              type: 'column',
              margin: [ 50, 50, 100, 80]
          },
          title: {
              text: 'Random Data'
          },
          xAxis: {
              categories: [
                  'T1',
                  'T2'
              ],
              startOnTick: true,
              endOnTick: true,
              labels: {
                  rotation: -45,
                  align: 'right',
                  style: {
                      fontSize: '13px',
                      fontFamily: 'Verdana, sans-serif'
                  }
              }
          },
          yAxis: {
              min: 0,
              title: {
                  text: 'Y-Axis'
              }
          },
          legend: {
              enabled: false
          },
          tooltip: {
              formatter: function() {
                  return '&lt;b&gt;'+ this.x +'&lt;/b&gt;&lt;br/&gt;'+
                      'Tip is: '+ Highcharts.numberFormat(this.y, 1);
              }
          },
          series: [{
              name: 'Population',
              data: [34.4, 21.8],
              dataLabels: {
                  enabled: true,
                  rotation: -90,
                  color: '#FFFFFF',
                  align: 'right',
                  x: 4,
                  y: 10,
                  style: {
                      fontSize: '13px',
                      fontFamily: 'Verdana, sans-serif'
                  }
              }
          }]
      });
   });
  
  });
  </code></pre>
  
  <p>I added the following function in order to add new points to the chart</p>
  
  <pre><code> function addPoints(name,acc)
   {
     var series = chart.series[0];
     series.addPoint(acc, false, true);
     categories = chart.xAxis[0].categories;
     categories.push(name+count);
     count++;
     chart.xAxis[0].setCategories(categories, false);
     chart.redraw();
   }
  </code></pre>
  
  <p><strong>The problem is that</strong> everytime I add a new point, one column shifts out of the chart. I would like to keep all columns in the chart view, so when I add a new point the chart just zooms out.</p>
  
  <p>Check it on <a href="http://jsfiddle.net/CukYc/" rel="nofollow">JSFiddle</a></p>
  
  <p><strong>Thanks in Advance ....</strong></p>