Javascript chartJS水平可伸缩

我使用chartjs库创建了一个条形图，如下所示。 我们事先不知道会有多少个x点，所以我想显示一定数量的x点，如果大于这个数量，我希望图表可以滚动。请注意，我希望条形图的大小为原始大小，并且不会因为大量的x数据点而缩小（而是使条形图可滚动）

以下是我为不可滚动js图表所做的一切（可行）：

所以现在我的问题是，如果x的数据点数量（即len（xticks））大于一定数量，如何在水平轴上添加一个可滚动的特性？ 或者换句话说，只有当水平数据不能放入具有一定宽度的容器时，才具有滚动选项。 显示容器中的所有数据的问题是，为了适应画布容器，条形图变得非常小

var color = Chart.helpers.color;
        var barChartData = {
            labels: [{% for x in xticks %}
                "{{x}}",
            {% endfor %}],
            datasets: [{
                type: 'bar',
                label: '#Annotation',
                backgroundColor: color(window.chartColors.green).rgbString(),
                borderColor: window.chartColors.green,
                data: [
                    {% for num in num_tasks %}
                        {{num}},
                    {% endfor %}
                ],
                yAxisID: 'y-axis-1',
            }
                , {
                    data: [
                        {% for dur in durations %}
                            {{dur}},
                        {% endfor %}
                    ],
                    yAxisID: 'y-axis-2',
                    label: "Duration",
                    fillColor: "green"
                }]
        };


var ctx = document.getElementById('canvas').getContext('2d');
                window.myBar = new Chart(ctx, {
                    type: 'bar',
                    data: barChartData,
                    responsive: true,
                    maintainAspectRatio:false,
                    options: {
                        responsive: true,
                        tooltips: {
                            mode: 'index',
                            intersect: false
                        },
                        scales: {
                            xAxes: [{
                                display: true,
                                offset: true,
                                scaleLabel: {
                                    display: true,
                                    labelString: '{{ frequencies[freq] }}'
                                }
                            }],
                            yAxes: [{
                                type: 'linear',
                                display: true,
                                position: 'left',
                                id: 'y-axis-1',
                                ticks: {
                                    beginAtZero: true
                                },
                                scaleLabel: {
                                    display: true,
                                    labelString: 'Count'
                                }
                            },
                                {
                                    type: 'linear', 
                                    display: true,
                                    position: 'right',
                                    id: 'y-axis-2',
                                    ticks: {
                                        beginAtZero: true
                                    },
                                    scaleLabel: {
                                        display: true,
                                        labelString: 'Duration in seconds'
                                    }
                                }],
                        },

                    }
                });
            };