Horizontal floating bar chart vertical scroll to adjust x axis data - vue.js

Question

So I currently have a floating horizontal bar chart but i'd like to make a few updates to it and not sure based on documentation how.
I'd like to make the x-axes "sticky" so that when the chart loads, the user sees some data along with the x-axis labels (they can see the numbers associated to the chart) this is because the div that wraps it will be scrollable in the Y direction along side a lot of information so they won't be able to see the x-axis labels when it loads without scrolling to the bottom.
Additionally, is there a way to make it that when the user scrolls, the x-axis labels will adjust to fit all the data being presented within it?
new Vue({
el: "#app",
data: {
chart: null,
},
computed: {
options() {
return {
indexAxis: 'y',
responsive: true,
elements: {
bar: {
borderWidth: 0,
},
},
legend: {
display: false,
},
plugins: {
legend: {
display: false,
},
title: {
display: false,
},
},
scales: {
xAxes: {
min: 100,
max: 10000,
},
yAxes: {
grid: {
display: false,
},
},
},
};
},
},
mounted() {
const data = {
labels: ["a", "b", "c", "c", "c", "c", "c", "c", "c", "c", "c", "c"],
datasets: [
{
axis: 'y',
label: 'Min and Max',
data: [[100,300], [400,3000], [3000,5000],[3000,5000],[3000,5000],[3000,5000],[3000,5000],[3000,5000],[3000,5000],[3000,5000],[3000,7000],[8000,10000] ],
borderRadius: 80,
borderSkipped: false,
barThickness: 10,
backgroundColor: ['rgb(130, 188, 0)', 'rgb(146, 146, 146)'],
barPercentage: 0.3,
minBarLength: 20,
},
],};
const ctx = document.getElementById('myChart').getContext('2d');
this.chart = new Chart(ctx, {
type: "bar",
data,
options: this.options,
});
this.chart.update();
},
})
floating horizontal bar chart jsfiddle