How I have scroll in bar chart ? [Echarts] - css

Question

I'm using echart to create bar I have this question:
I want to have fixed height and width to only show 5 rows when its more than 5 it have vertical scroll I tried to do it in html but the numbers/ xAxis it disappear and only appears when the user pull the scroll down so I need to make it in echart
option = {
barWidth: '30%',
barCategoryGap :'10%',
title: {
text: 'test',
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '7%',
right: '4%',
bottom: '40%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
data: ['Web', 'Web', 'web', 'web', 'web','web', 'web', 'web']
},
series: [
{
name: 'test',
type: 'bar',
data: [ 100, 80,30,50, 70, 100, 80,30]
},
]
};

Answer 1

I know this is an old question, check datazoom option.
https://echarts.apache.org/examples/en/editor.html?c=area-simple
https://echarts.apache.org/examples/en/#chart-type-dataZoom

Answer 2

To make the chart scrollable, add this to your chart option configuration.
You can get the scrollbar to appear on the right with this configuration.
dataZoom: [
{
type: 'slider',
yAxisIndex: 0,
zoomLock: true,
width: 10,
right: 10,
start: 25,
end: 100,
handleSize: 20,
},
]
Using this configuration, you can use the mouse cursor to move the chart.
dataZoom:[ {
type: 'inside',
id: 'insideY',
yAxisIndex: 0,
start: 95,
end: 100,
zoomOnMouseWheel: false,
moveOnMouseMove: true,
moveOnMouseWheel: true
}]
By using this yAxisIndex key, you can place the scrollbar on the y-axis, and by using this xAxisIndex key, you can place scrollbar on the x-axis and Other properties can be configured based on that.