Making chartjs scrollable on the x-axis - chart.js

Question

I want to make a chartjs graph scrollable on the x-axis but only the cavas.
I've tried this solution but makes all of the div scrollable.
<div class="chartWrapper">
<div class="chartAreaWrapper" id="chartAreaWrapper">
<canvas id="chart-hora" height="500" width="1200"></canvas>
</div>
</div>
.chartWrapper {
position: relative;
}
.chartWrapper > canvas {
position: absolute;
left: 0;
top: 0;
pointer-events:none;
}
.chartAreaWrapper {
width: 600px;
overflow-x: auto;
}
I am showing this chart on mobile app so I only want the canvas to be scrollable and not the whole div which makes the view scrollable.

Answer 1

Place your canvas inside a div and define their width as shown below. Make sure also, to define CSS overflow: auto on the wrapping div element.
<div style="width: 600px; overflow: auto;">
<canvas id="myChartAxis" width="1500" height="120"></canvas>
</div>
To avoid that the canvas automatically resizes when the wrapper div does, make sure, the chart is not responsive. This needs to be defined inside the chart options as follows:
options: {
responsive: false
Please have a look at the running code sample below:
new Chart(document.getElementById('myChartAxis'), {
type: 'line',
data: {
labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N'],
datasets: [{
label: 'WARNINGS',
data: [1, 2, 2, 2, 3, 2, 1, 4, 4, 2, 1, 4, 3, 4],
borderColor: 'rgb(255, 159, 64)',
backgroundColor: 'rgba(255, 159, 64, 0.2)'
},
{
label: 'ERRORS',
data: [4, 5, 3, 2, 1, 0, 3, 2, 5, 5, 3, 4, 2, 1],
borderColor: 'rgb(255, 99, 132)',
backgroundColor: 'rgba(255, 99, 132, 0.2)'
}
]
},
options: {
responsive: false
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<div style="width: 600px; overflow: auto;">
<canvas id="myChartAxis" width="1500" height="120"></canvas>
</div>