chartJS horizontal scalable

I have created a bar chart using chartjs library like below. We don't know beforehand how many x points would be there so I want to show a certain number of x points, and if it is larger than that I would like the chart to be scrollable. Note that I want the bar sizes to be the original size and not being shrinked due to a high volume of x data points (but instead making the bar chart scrollable).

Here is all I have done for the non-scrollable js chart (workable):

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'
                                    }
                                }],
                        },

                    }
                });
            };

So now my question is how to add a scrollable feature to the horizontal axis in case the number of data points for x (i.e. len(xticks)) is larger than a certain amount? Or in other words, only have a scroll option if the horizontal data can not fit in the container which has a certain width. The problem with showing all the data in a container is that the bars get really small to fit the canvas container.