title: How to make HighStock / HighChart scroll bar location default to the left hand side?
body: <p>I am trying to make the HighStock chart's scroll bar default to the left hand side location. Essentially, I am looking at forecast data that starts from today's date. The chart defaults to a 3 month window, and I need this window's starting location to be from today. Here is an example plot: <a href="https://i.stack.imgur.com/5yBhy.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5yBhy.jpg" alt="enter image description here"></a></p>
  
  <p>I need the highlighted scroll bar to default to the left. I am working with a team in India on this issue, and they told me "it's not possible, and is a HighChart's limitation". I'm not saying they are wrong, but I really feel like it can be done without too much issue. Bellow is the js that generates my specific plot (not the same as the one pictured above).</p>
  
  <pre><code>$(function () {
      var now = new Date();
      var utc_timestamp = Date.UTC(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0, 0);
  
      $.ajax({
          type: 'GET',
          url: '/Conductivity/ForecastPlot',
          data: { USGSID: Source1Id },
          success: function (jsonData) {
              var BestCase = new Array();
              var WorstCase = new Array();
              for (var i = 0 ; i &lt; jsonData.AverageForecastData.length ; i++) {
                  var BestData = new Object();
                  var WorstData = new Object();
                  BestData = jsonData.AverageForecastData[i];
                  WorstData = jsonData.MaximumForecastData[i];
                  BestCase.push(BestData.cond);
                  WorstCase.push(WorstData.cond)
              }
              $('#Forecast_Source_1').empty();
              $('#Forecast_Source_1').highcharts('StockChart', {
  
                  rangeSelector: {
                      selected: 1,
                  },
                  chart: {
                      type: 'spline',
                      zoomType: 'x',
                      width: 630,
                      height: 300
                  },
                  xAxis: {
                      type: 'datetime',
                      tickInterval: 24 * 3600 * 1000 * 21,
                      title: {
                          text: 'Date'
                      }
                  },
                  yAxis: {
                      title: {
                          text: 'Conductivity'
                      }
                  },
                  credits: {
                      enabled: false
                  },
                  tooltip: {
                      shared: true,
                      crosshairs: true
                  },
                  plotOptions: {
                      series: {
                          cursor: 'pointer',
                          point: {
                              events: {
                                  click: function (e) {
  
                                  }
                              }
                          },
                          marker: {
                              enabled:false,
                              lineWidth: 1
                          }
                      }
                  },
                  legend: {
                      enabled: true,
                      layout: 'horizontal',
                      borderWidth: 1
                  },
                  series: [{
                      name: 'WorstCase',
                      pointInterval: 24 * 3600 * 1000,
                      pointStart: utc_timestamp,
                      data: WorstCase,
                      color: '#FF0000'
                  },{
                      name: 'Expected',
                      pointInterval: 24 * 3600 * 1000,
                      pointStart: utc_timestamp,
                      data: BestCase
                  }]
              });
          }
      });
  });
  </code></pre>
  
  <p>I've taken a quick look at the API and I don't specifically see an option for this in the "scrollbar" option, but I am thinking of creating a custom zoom function that loads the appropriate window with the From: xx/xx/xx To: xx/xx/xx boxes when a user clicks on the 1m,3m,or 6m buttons.</p>
  
  <p><strong><em>Edit: Partial Solution</em></strong></p>
  
  <p>I have a partial solution that seems to be working great. Here is what I changed:</p>
  
  <p>First of all, I know that all the data in my MySQL database is always rounded to the nearest day, so I made sure that the code was rounding also:</p>
  
  <pre><code>    var now = new Date();
      now.setHours(now.getHours()) + Math.round(now.getMinutes()); 
      now.setMinutes(0);
      var utc_timestamp_today = Date.UTC(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0, 0);
      var utc_timestamp_3moFromNow = Date.UTC(now.getFullYear(), (now.getMonth() + 3), now.getDate(), 0, 0, 0, 0);
  </code></pre>
  
  <p>After adding this in, I simply added a "min" and "max" to my "xAxis" parameter. </p>
  
  <pre><code>                    xAxis: {
                      type: 'datetime',
                      tickInterval: 24 * 3600 * 1000 * 21,
                      min: utc_timestamp_today,
                      max: utc_timestamp_3moFromNow,
                      title: {
                          text: 'Date'
                      }
  </code></pre>
  
  <p>You can see the new plot below. This is the actual plots I am dealing with, and you can see how when the page first loads the scroll bar is now in the proper location:</p>
  
  <p><a href="https://i.stack.imgur.com/rNrri.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rNrri.jpg" alt="enter image description here"></a></p>
  
  <p>Now my only remaining issue is that when the user goes and clicks on the 1m, 3m, 6m option the graph's window scroll bar will revert to being back at the right hand side. Does anyone know how I might solve this?</p>
  
  <p><strong><em>Final Working Solution:</em></strong></p>
  
  <pre><code>   $(function () {
  
      var now = new Date();
      now.setHours(0, 0, 0, 0);;
      now.setMinutes(0);
  
      var plus1mo = new Date();
      plus1mo.setMonth((now.getMonth() + 1));
      plus1mo.setHours(0, 0, 0, 0);
      plus1mo.setMinutes(0);
  
      var plus3mo = new Date();
      plus3mo.setMonth((now.getMonth() + 3));
      plus3mo.setHours(0, 0, 0, 0);
      plus3mo.setMinutes(0);
  
      var plus6mo = new Date();
      plus6mo.setMonth((now.getMonth() + 6));
      plus6mo.setHours(0, 0, 0, 0);
      plus6mo.setMinutes(0);
  
      var utc_timestamp_today = Date.UTC(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0, 0);
      var utc_timestamp_1moFromNow = Date.UTC(plus1mo.getFullYear(), plus1mo.getMonth(), plus1mo.getDate(), 0, 0, 0, 0);
      var utc_timestamp_3moFromNow = Date.UTC(plus3mo.getFullYear(), plus3mo.getMonth(), plus3mo.getDate(), 0, 0, 0, 0);
      var utc_timestamp_6moFromNow = Date.UTC(plus6mo.getFullYear(), plus6mo.getMonth(), plus6mo.getDate(), 0, 0, 0, 0);
  
      $.ajax({
          type: 'GET',
          url: '/Conductivity/ForecastPlot',
          data: { USGSID: Source1Id },
          success: function (jsonData) {
              var BestCase = new Array();
              var WorstCase = new Array();
              for (var i = 0 ; i &lt; jsonData.AverageForecastData.length ; i++) {
                  var BestData = new Object();
                  var WorstData = new Object();
                  BestData = jsonData.AverageForecastData[i];
                  WorstData = jsonData.MaximumForecastData[i];
                  BestCase.push(BestData.cond);
                  WorstCase.push(WorstData.cond)
              }
              $('#Forecast_Source_1').empty();
              $('#Forecast_Source_1').highcharts('StockChart', {
  
                  rangeSelector: {
                      buttons: [{
                          type: 'month',
                          count: 1,
                          text: '1m'
                      }, {
                          type: 'month',
                          count: 3,
                          text: '3m'
                      }, {
                          type: 'month',
                          count: 6,
                          text: '6m'
                      }, {
                          type: 'all',
                          text: 'All'
                      }],
                      selected: 1
                  },
                  chart: {
                      type: 'spline',
                      zoomType: 'x',
                      width: 630,
                      height: 300
                  },
                  xAxis: {
                      type: 'datetime',
                      tickInterval: 24 * 3600 * 1000 * 21,
                      min: utc_timestamp_today,
                      max: utc_timestamp_3moFromNow,
                      title: {
                          text: 'Date'
                      },
                      events: {
                          afterSetExtremes: function (e)
                          {
                              if(e.trigger == "rangeSelectorButton" &amp;&amp; e.rangeSelectorButton.text == "1m") {
                                  setTimeout(function () {
                                      Highcharts.charts[1].xAxis[0].setExtremes(utc_timestamp_today, utc_timestamp_1moFromNow)
                                  }, 1);
                              }
                              else if(e.trigger == "rangeSelectorButton" &amp;&amp; e.rangeSelectorButton.text == "3m") {
                                  setTimeout(function () {
                                      Highcharts.charts[1].xAxis[0].setExtremes(utc_timestamp_today, utc_timestamp_3moFromNow)
                                  }, 1);
                              }
                              else if(e.trigger == "rangeSelectorButton" &amp;&amp; e.rangeSelectorButton.text == "6m") {
                                  setTimeout(function () {
                                      Highcharts.charts[1].xAxis[0].setExtremes(utc_timestamp_today, utc_timestamp_6moFromNow)
                                  }, 1);
                              }
                          }
                      }
                  },
                  yAxis: {
                      title: {
                          text: 'Conductivity'
                      }
                  },
                  credits: {
                      enabled: false
                  },
                  tooltip: {
                      shared: true,
                      crosshairs: true
                  },
                  plotOptions: {
                      series: {
                          cursor: 'pointer',
                          point: {
                              events: {
                                  click: function (e) {
  
                                  }
                              }
                          },
                          marker: {
                              enabled:false,
                              lineWidth: 1
                          }
                      }
                  },
                  legend: {
                      enabled: true,
                      layout: 'horizontal',
                      borderWidth: 1
                  },
                  series: [{
                      name: 'WorstCase',
                      pointInterval: 24 * 3600 * 1000,
                      pointStart: utc_timestamp_today,
                      data: WorstCase,
                      color: '#FF0000'
                  },{
                      name: 'Expected',
                      pointInterval: 24 * 3600 * 1000,
                      pointStart: utc_timestamp_today,
                      data: BestCase
                  }]
              });
          }
      });
  });
  </code></pre>
  
  <p>The trick was setting a "timeout" function to be called after HighCharts is doing all it's stuff. Only then do I set the min/max so that I can get the appropriate range. (By the way: It's <code>Highcharts.charts[1]</code> because I have 2 charts)</p>