Highchart - Add a scroll bar on a column range Chart

Question

I'm trying to add a vertical scroll bar on a column range chart but when i move up or down X-axis and legend overlap the points. How Can I fix the X-axis and legend? The chart was imported in the Looker Platform but I can change the .js code

See the chart

The code is:

 chart: {
    scrollablePlotArea: {
      minHeight: 800
    },
    animation: false,
    backgroundColor: 'rgba(0, 0, 0, 0)',
    inverted: true,
    style: {
      fontFamily: 'inherit',
    },
    type: 'columnrange',
  },
  legend: {
    enabled: true,
    itemStyle: {
      color: 'var(--vis-color-text4)',
      fontWeight: 'normal',
    },
    navigation: {
      activeColor: '#666666',
    },
  },
  plotOptions: {
    columnrange: {
      borderRadius: 5,
      dataLabels: {
        enabled: false,
      },
      grouping: false,
      groupPadding: 0.74,
      pointPadding: 0,
      minPointLength: 3,
    },
    
  xAxis: {
    categories: [],
       labels: {
      data: [],
      events: {},
      style: {
        fontSize: '9pt',
      },
    },
    title: null,
  },
  yAxis: {
    type: 'datetime',
    opposite: true,
    title: {},
    endOnTick: true,
    labels: {},
  },

Thank you

Answer 1

In that case, it would be better to use the xAxis.scrollbar that HighStock offers:

xAxis: {
  min: 0,
  max: 4,
  scrollbar: {
    enabled: true
  }
}

Demo: https://jsfiddle.net/BlackLabel/1a5u4ftk/
API: https://api.highcharts.com/highstock/xAxis.scrollbar