如何使图表水平滚动

Question

我正在使用此图表库 https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js“ 并且可以成功显示图表数据，但是无法使其水平滚动。如何使其滚动？ 我已经尝试过了

<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>

其中之一，这是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
    }
    ]
}
});