title: How to make highcharts scrollable horizontally when having big range in x-axis
body: <p>I am generating my x-axis and y-axis data dynamically and displaying highcharts, but the chart becomes messy when the x-axis range is high with small intervals. </p>
  
  <p>How do I make highcharts to make normal horizontally scrollable graph?</p>
  
  <p>Here is what I am using right now:</p>
  
  <p><img src="https://i.stack.imgur.com/fePXa.png" alt="enter image description here"></p>
  
  <pre><code>&lt;div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"&gt;&lt;/div&gt;
  
  //CODE FOR HIGHCHARTS JS
  function makeChart() {
      $('#container').highcharts({
          chart: {
              type: 'line',
              marginRight: 130,
              marginBottom: 100
          },
          title: {
              text: 'Banana',
              x: -20 //center
          },
          subtitle: {
              text: 'Source: banana.com',
              x: -20
          },
          xAxis: {
              categories: xlist
          },
          yAxis: {
              title: {
                  text: 'No. of C'
              },
              plotLines: [{
                  value: 0,
                  width: 1,
                  color: '#808080'
              }]
          },
          tooltip: {
              valueSuffix: 'C'
          },
          legend: {
              layout: 'vertical',
              align: 'right',
              verticalAlign: 'top',
              x: -10,
              y: 100,
              borderWidth: 0
          },
          series: [{
              name: $("#repoSelector option:selected").text(),
              data: ylist
          }]
      });
  }
  </code></pre>