how to add scroll bar in scatter highcharts?

Question

I have created scatter graph using highchart, but not able to add vertical scroll bar when series data is in more in numbers then scoped rendering area.

Currently all series are overlapped on each other.

Current behavior:
https://jsfiddle.net/s1eL30Lh/235/

I want to add vertical scroll to chart hence all series will be displayed properly instead of overlapping on each other.

Some thing like: 
https://jsfiddle.net/s1eL30Lh/237/

Answer 1

You can do that with HighStock not Highcharts - More infos

yAxis: {
    tickInterval: 1,

    scrollbar: {
      enabled: true,
    },
    max: 20, // To enable a default Zoom
    title: {
      text: 'sdsdsds'
    },
},

Api Doc and Updated Fiddle

Answer 2

You just need to increase the height of the div in which you are populating the graph.

<div id="container" style="height: 800px;""></div>

function toMs(h, m) {
  return Date.UTC(1970, 0, 1, h, m);
}

var series = [{
  // First series
  name: 'Running',
  color: 'green',
  dataRaw: [{
    y: 1,
    xRanges: [
      // first value: from; second value: to
      [toMs(15, 30), toMs(15, 40)],
      [toMs(15, 50), toMs(16, 10)]
    ]
  }, {
    y: 2,
    xRanges: [
      // first value: from; second value: to
      [toMs(15, 30), toMs(15, 55)]
    ]
  }]
}, {
  // Second series
  name: 'Not running',
  color: 'red',
  dataRaw: [{
    y: 1,
    xRanges: [
      // first value: from; second value: to
      [toMs(15, 40), toMs(15, 50)]
    ]
  }, {
    y: 2,
    xRanges: [
      // first value: from; second value: to
      [toMs(15, 55), toMs(16, 10)]
    ]
  }, {
    y: 3,
    xRanges: [
      // first value: from; second value: to
      [toMs(15, 55), toMs(16, 10)]
    ]
  }, {
    y: 4,
    xRanges: [
      // first value: from; second value: to
      [toMs(15, 55), toMs(16, 10)]
    ]
  }, {
    y: 5,
    xRanges: [
      // first value: from; second value: to
      [toMs(15, 55), toMs(16, 10)]
    ]
  }, {
    y: 2,
    xRanges: [
      // first value: from; second value: to
      [toMs(15, 55), toMs(16, 10)]
    ]
  }, {
    y: 2,
    xRanges: [
      // first value: from; second value: to
      [toMs(15, 55), toMs(16, 10)]
    ]
  }, {
    y: 6,
    xRanges: [
      // first value: from; second value: to
      [toMs(15, 55), toMs(16, 10)]
    ]
  }, {
    y: 7,
    xRanges: [
      // first value: from; second value: to
      [toMs(15, 55), toMs(16, 10)]
    ]
  }, {
    y: 8,
    xRanges: [
      // first value: from; second value: to
      [toMs(15, 55), toMs(16, 10)]
    ]
  }, {
    y: 9,
    xRanges: [
      // first value: from; second value: to
      [toMs(15, 55), toMs(16, 10)]
    ]
  }, {
    y: 10,
    xRanges: [
      // first value: from; second value: to
      [toMs(15, 55), toMs(16, 10)]
    ]
  }, {
    y: 11,
    xRanges: [
      // first value: from; second value: to
      [toMs(15, 55), toMs(16, 10)]
    ]
  }, {
    y: 12,
    xRanges: [
      // first value: from; second value: to
      [toMs(15, 55), toMs(16, 10)]
    ]
  }, {
    y: 13,
    xRanges: [
      // first value: from; second value: to
      [toMs(15, 55), toMs(16, 10)]
    ]
  }, {
    y: 14,
    xRanges: [
      // first value: from; second value: to
      [toMs(15, 55), toMs(16, 10)]
    ]
  }, {
    y: 15,
    xRanges: [
      // first value: from; second value: to
      [toMs(15, 55), toMs(16, 10)]
    ]
  }, {
    y: 16,
    xRanges: [
      // first value: from; second value: to
      [toMs(15, 55), toMs(16, 10)]
    ]
  }, {
    y: 17,
    xRanges: [
      // first value: from; second value: to
      [toMs(15, 55), toMs(16, 10)]
    ]
  }]
}].map(function(series) {
  series.data = [];
  series.dataRaw.forEach(function(dataRaw) {
    dataRaw.xRanges.forEach(function(xRange) {
      series.data.push([xRange[0], dataRaw.y], [xRange[1], dataRaw.y], [xRange[1], null]); // null breakes the line
    }); // forEach
  }); // forEach
  return series;
});


var chart = Highcharts.chart('container', {
  chart: {
    type: 'scatter',
    height:500,
  //width: 300,
  },
  title: {
    text: 'Example'
  },
  tooltip: {
    formatter: function() {
      return Highcharts.dateFormat('%H:%M', this.x);
    }
  },
  plotOptions: {
    series: {
      lineWidth: 5,
      marker: {
        enabled: false,
        symbol: 'circle'
      }
    }
  },

  xAxis: {
    title: {
      text: 'Time'
    },
    type: 'datetime',
    dateTimeLabelFormats: { //force all formats to be hour:minute
      second: '%H:%M',
      minute: '%H:%M',
      hour: '%H:%M',
      day: '%H:%M',
      week: '%H:%M',
      month: '%H:%M',
      year: '%H:%M'
    },
    scrollbar: {
        enabled: true
    },
    
  },

  yAxis: {
    tickInterval: 1,
    scrollbar: {
        enabled: true
    },
    title: {
       text: 'sdsdsds'
    },
  },
  series: series
});

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 800px;""></div>