How to make the chart horizontally scrollable when it gets a certain number of data points.

[Cesaario]

Expected Behavior

Hi, I'm making a real time data chart and I need some help.
I'd like to make a chart that only shows a certain number of data points at a time (for example, 20). When it hits 20 data points, I would like to scroll it to see past data.

Actual Behavior

It fits my line chart to fill all the width available. If it has 3 points, it stretches it out and if it has 50 points, it squeezes them.
This is what happens:
http://prntscr.com/nw3gum
http://prntscr.com/nw3h3t

This is the code I have:

<div style='overflow-x: scroll; width: 100%'>
    <v-card class='mx-2 mt-2' tile height='93%'>
        <v-card-actions style='height: 100%'>
            <GraficoLinha style='width: 100%; height: 100%;' :chart-data='dadosGrafico' :options='{maintainAspectRatio: false, responsive: true}'></GraficoLinha>
        </v-card-actions>
    </v-card>
</div>

<script>
import { Line, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins

export default {
  name: 'GraficoLinha',
  extends: Line,
  mixins: [reactiveProp],
  props: ['options'],
  mounted () {
    this.renderChart(this.chartData, this.options)
  }
}
</script>

Environment

• vue.js version: 2.6.10
• vue-chart.js version: 3.4.2
• npm version: 6.4.1

[Cesaario]

I just used chartjs zoom plugin for this. It allows me to zoom and pan in the chart. Remember to import it accordingly in your chart component.
#94