title: How to set default range selected on chart draw in Highcharts/Highstock
body: <p>How can I set default range selected without using the:</p>
  
  <pre><code>rangeSelector:{
    selected: 3
  }
  </code></pre>
  
  <p>The reason why I want to do that is that I am trying to develop a custom range selector of my own. Also can I also ask why I'm getting a broken chart once I press the YTD again. Here is a link to my <a href="http://jsfiddle.net/a_miguel6687/Gpb56/2/" rel="nofollow">Fiddle</a> and my sample code:</p>
  
  <pre><code>$(function () {
      $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&amp;callback=?', function (data) {
          $('.zoom_controls a').click(function (e) {
              e.preventDefault();
              // OK, pretty ugly :)
              var call = 'zoom' + $(this).attr('data-range');
              // I have two globally accessible charts here:
              if ($(this).attr('data-chart') == 'line') {
                  lineChart[call]();
              } else {
                  candleChart[call]();
              }
              $(this).addClass('active');
  
          });
          var proto = Highcharts.Chart.prototype;
          proto.zoomToD = function (delta) {
              var chartMin = this.xAxis[1].min;
              var chartMax = this.xAxis[0].max;
              var min = chartMax - delta;
  
              if (chartMin &lt; min) {
                  // this.xAxis[0] is the view, this.xAxis[1] is the navigator
                  this.xAxis[0].setExtremes(min, chartMax);
                  this.yAxis[0].setExtremes(this.series[0].dataMin, this.series[0].dataMax);
                  return true;
              }
  
              this.xAxis[0].setExtremes(chartMin, chartMax);
              this.yAxis[0].setExtremes(this.series[0].dataMin, this.series[0].dataMax);
              return false;
          };
  
          proto.zoom3m = function () {
              return this.zoomToD(2592000 * 3 * 1000);
          };
          proto.zoom6m = function () {
              return this.zoomToD(2592000 * 6 * 1000);
          };
          proto.zoom1y = function () {
              return this.zoomToD(2592000 * 12 * 1000);
          };
          proto.zoom2y = function () {
              return this.zoomToD(2592000 * 24 * 1000);
          };
          proto.zoom3y = function () {
              return this.zoomToD(2592000 * 36 * 1000);
          };
          proto.zoom5y = function () {
              return this.zoomToD(2592000 * 60 * 1000);
          };
          proto.zoom10y = function () {
              return this.zoomToD(2592000 * 120 * 1000);
          };
          proto.zoomYtd = function () {
              var chartMin = this.xAxis[1].min;
              var chartMax = this.xAxis[1].max;
              var min = chartMax - 2592000 * 12 * 1000;
  
              if (chartMin &lt; min) {
                  this.xAxis[0].setExtremes(min, chartMax);
                  return true;
              }
  
              this.xAxis[0].setExtremes(chartMin, chartMax);
              return false;
          }
  
          /*And then I define some stuff that instantiates Highcharts.StockChart objects, e.g.:*/
          lineChart = new Highcharts.StockChart({
              chart: {
                  renderTo: 'container',
                  type: 'area'
  
  
              },
  
              series: [{
                  id: "data",
                  name: 'HP',
                  data: data,
                  color: '#7BA6A5',
                  tooltip: {
                      valueDecimals: 2
                  }
              }],
  
              xAxis: {
                  type: 'datetime',
                  dateTimeLabelFormats: {
                      year: '%Y',
                      month: '%m',
                      week: '%b %e'
                  },
                  gridLineWidth: 1
  
              },
  
              yAxis: {
                  opposite: false,
                  minorTickInterval: 'auto'
              },
              rangeSelector: {
                  enabled: false
  
              },
              scrollbar: {
                  enabled: true
              },
              navigator: {
                  enabled: true
              }
          });
          lineChart.scroller.xAxis.labelGroup.hide();
          lineChart.scroller.xAxis.gridGroup.hide();
          lineChart.scroller.series.hide();
          lineChart.scroller.scrollbar.hide();
          lineChart.scroller.scrollbarGroup.hide();
          lineChart.scroller.navigatorGroup.hide();
          lineChart.scroller.scrollbarTrack.hide();
          $.each(lineChart.scroller.elementsToDestroy, function (i, elem) {
              elem.hide();
          });
          lineChart.rangeSelector.zoomText.hide();
          /*$.each(lineChart.rangeSelector.buttons, function () {
              this.hide();
          });*/
          /*lineChart.rangeSelector.inputEnabled = false;*/
  
      });
  });
  </code></pre>
  
  <p>Any help or guide would be appreciated.</p>