Highcharts: Make scrollbar only cover drawing area

Question

This is a fiddle for a sample chart, based on the scrollbar tutorial on the highcharts documentation here: https://jsfiddle.net/zao68u2k/1/ The only change I made to the default demo was to remove the mask via:

scrollablePlotArea: {
  opacity: 1,
}

Now that the mask is gone, it makes no sense for the scrollbar to occupy the entire width of the chart. I want to shorten the scrollbar so that it is just the width of the plot itself, without including the axes, as I simulated in the picture. is it possible?

Answer 1

In this case you should use the xAxis.scrollbar property along with xAxis.min and xAxis instead of chart.scrollablePlotArea. maximum:

xAxis: {
    min: Date.UTC(2023, 6, 1),
    max: Date.UTC(2023, 6, 1, 3),
    scrollbar: {
        enabled: true
    }
}

However, this is a feature provided by Stock, so you need to have a license for the product and import the corresponding library in the project:

<script src="https://code.highcharts.com/stock/highstock.js"></script>

Demo: https://jsfiddle.net/BlackLabel/rvm1s67w/
API：https://api.highcharts.com/highstock/xAxis .Scrollbar