Stacked chart Scrolling Issue - highcharts

Question

I have to use stacked bar and there are below requirements :
Bar width should be fixed ( lets say 15px, using pointWidth property)
Gap should be maintained between bars irrespective of number of values or Bars.
If Chart's Height goes beyond 600 px, need to show scroll ( point #1 and Point #2 should be in place)
I have achieved Point #1 and #2 ( Adjusting chart's height at run time using some logic basis bar/series count) but facing issue on Point #3 as there is a property
scrollablePlotArea: {
minHeight: 400
}
which displaying scroll when charts min height is less than 400 but it seems no option to show scroll when height goes beyond to particular limit or say MaxHeight option is missing.

Answer 1

Responsive rules should help, you can fit a chart for your conditions. I'm not sure you know that fact
the bar chart is exactly the same as a column chart only the x-axis and y-axis are switched.
Highcharts.chart('container', {
chart: {
type: 'bar',
scrollablePlotArea: {
minHeight: 600
},
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 2,
title: {
text: 'Total fruit consumption'
}
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}],
responsive: {
rules: [{
condition: {
minWidth: 600
},
// Make the labels less space demanding on mobile
chartOptions: {
chart: {
scrollablePlotArea: {
minHeight: 800
},
},
}
}]
}
});
Live demo:
https://jsfiddle.net/BlackLabel/ae4z53hw/
API References:
https://api.highcharts.com/highcharts/responsive.rules.condition
It would be better to adjust the width of the columns using use groupPadding, pointPadding and centerInCategory to manipulate.
PointWidth is a value in pixels that can be more difficult to manipulate so that they do not overlap.
plotOptions: {
series: {
grouping: false,
stacking: 'normal',
groupPadding: 0,
pointPadding: 0,
centerInCategory: true,
}
},
https://api.highcharts.com/highcharts/plotOptions.bar.centerInCategory