title: Highcharts horizontal scroll
body: <p>I'm new in highcharts and I'm trying to do a graphic with bars and a line. The bars represent the average of set values and the line represents the real value of the set.</p>
  
  <p>I generated the set randomly with 100 values, but the graphic interface sees horrible when I run chart in Jsfiddle. I put a drag selection zoom but is not comfortable to use. Then I decided to put an horizontal scroll and I've seen in Stack Overflow posts that I must to include highstock.js, enable scrollbar and set parameter min and max to enable scroll scrolling. I did it and my chart works but without the scroll.</p>
  
  <p>Link to the Chart: <a href="http://jsfiddle.net/zd12fa5L/2/" rel="nofollow noreferrer">http://jsfiddle.net/zd12fa5L/2/</a></p>
  
  <p>According to Jsfiddle, my HTML is:</p>
  
  <pre><code>&lt;script src="https://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/jquery-3.1.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/stock/highstock.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/stock/modules/exporting.js"&gt;&lt;/script&gt;
  &lt;div id="container" style="height: 400px"&gt;&lt;/div&gt;
  &lt;div id="report"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>And the JSON is:</p>
  
  <pre><code>// create the chart
  Highcharts.chart('container', {
      chart: {
  
          events: {
              selection: function (event) {
                  var text,
                      label;
                  if (event.xAxis) {
                      text = 'min: ' +     Highcharts.numberFormat(event.xAxis[0].min, 2) + ', max: ' +     Highcharts.numberFormat(event.xAxis[0].max, 2);
                  } else {
                      text = 'Selection reset';
                  }
                  label = this.renderer.label(text, 100, 120)
                      .attr({
                          fill: Highcharts.getOptions().colors[0],
                          padding: 10,
                          r: 5,
                          zIndex: 8
                      })
                      .css({
                          color: '#FFFFFF'
                      })
                      .add();
  
                  setTimeout(function () {
                      label.fadeOut();
                  }, 1000);
              }
          },
          zoomType: 'x'
      },
      title: {
          text: 'Chart selection demo'
      },
      subtitle: {
          text: 'Click and drag the plot area to draw a selection'
      },
  
  
      xAxis: {
          min: 0,
          max:9,
  
          categories:     ['Subject1','Subject2','Subject3','Subject4','Subject5','Subject6','Subject7','Subject8','Subject9',
                  'Subject10','Subject11','Subject12','Subject13','Subject14','Subject15','Subject16','Subject17',
                  'Subject18','Subject19','Subject20','Subject21','Subject22','Subject23','Subject24','Subject25',
                  'Subject26','Subject27','Subject28','Subject29','Subject30','Subject31','Subject32','Subject33',
                  'Subject34','Subject35','Subject36','Subject37','Subject38','Subject39','Subject40','Subject41',
                  'Subject42','Subject43','Subject44','Subject45','Subject46','Subject47','Subject48','Subject49',
                  'Subject50','Subject51','Subject52','Subject53','Subject54','Subject55','Subject56','Subject57',
                  'Subject58','Subject59','Subject60','Subject61','Subject62','Subject63','Subject64','Subject65',
                  'Subject66','Subject67','Subject68','Subject69','Subject70','Subject71','Subject72','Subject73',
                  'Subject74','Subject75','Subject76','Subject77','Subject78','Subject79','Subject80','Subject81',
                  'Subject82','Subject83','Subject84','Subject85','Subject86','Subject87','Subject88','Subject89',
                  'Subject90','Subject91','Subject92','Subject93','Subject94','Subject95','Subject96','Subject97',
                  'Subject98','Subject99','Subject100']
      },
      scrollbar: {
          enabled: true
      },
      series: [{
  
          type: 'column',
          name: 'Average',
  
          data:     [514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0    ]
      }, 
      {
  
          name: 'Value',
          data:     [11.0,11.0,118.0,126.0,131.0,142.0,159.0,172.0,178.0,181.0,182.0,186.0,189.0,206.0,218.0,219.0,221.0,238.0,       256.0,260.0,272.0,282.0,283.0,300.0,317.0,337.0,351.0,360.0,404.0,424.0,425.0,438.0,446.0,456.0,462.0,
             464.0,468.0,469.0,479.0,488.0,494.0,501.0,501.0,503.0,504.0,516.0,518.0,519.0,522.0,530.0,531.0,533.0,
             534.0,537.0,549.0,563.0,565.0,573.0,577.0,599.0,608.0,631.0,638.0,641.0,649.0,668.0,674.0,68.0,68.0,
             683.0,7.0,727.0,735.0,748.0,749.0,771.0,782.0,783.0,799.0,831.0,839.0,844.0,847.0,847.0,854.0,86.0,867.0,
             873.0,888.0,891.0,894.0,896.0,898.0,910.0,918.0,938.0,944.0,963.0,981.0,999.0 
  
          ]
      }]
  });
  </code></pre>
  
  <p>Thank you, regards.</p>