How to make chart horizontally scrollable

Question

I am using this chart library https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js" and I have success to show the chart data, but I cannot make it scrollable horizontally. How to make it scroll? I've tried all the way

<div class="wrapper" style="background-color: whitesmoke; ">
    <div class="chartAreaWrapper" style="width: 550px; overflow:scroll;">
        <canvas id="myChart" width="1600" height="900"></canvas>
    </div>
</div>

this one of them, and this the javascript

var years = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30];
// For drawing the lines
var africa = [86,114,106,106,107,111,133,221,783,2478];
var asia = [282,350,411,502,635,809,947,1402,3700,5267];

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
    labels: years,
    datasets: [
    { 
        data: africa,
        label: "Africa",
        borderColor: "#3e95cd",
        fill: false
    },
    { 
        data: asia,
        label: "Asia",
        borderColor: "#8e5ea2",
        fill: false
    }
    ]
}
});