Highcharts: Make scrollbar only cover drawing area

Question

Here's 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 take up 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?

P粉178132828 · Answer

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:

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