I have embedded line chart from chart JS in vue js project. However my chart is too big for my page. How can I make it appear small and compact in my webpage? This is the first time I am adding charts to vue js. Any advice or tips will be really helpful for me. Thanks. Here is my code.

<script>
import { Line , mixins } from 'vue-chartjs';
import Chart from "chart.js";

export default {
  extends: Line,
  mixins: [mixins.reactiveProp],
  props: ["options"],
  data: () => ({
      chartdata: {
        labels: ["Oct 2021", "Nov2021", "Nov2021", "Nov2021", "Nov2021","Nov2021","Nov2021","Nov2021"],
        datasets: [
         {
            data: [0, 3.2, 0.2,5.9, 7.9, 6, 5.5, 4.2, 4.2, 3.8,3.8,3.8,2],
            label: "Critical",
            backgroundColor: "rgb(226,135,67)",
            borderColor: "#e28743",
            borderWidth: 3,
          },
           {
            data: [0, 6.3, 0.5, 6, 7.9, 9, 9.8, 10, 11.3, 15],
            label: "High",
            backgroundColor: "rgb(234,182,118)",
            borderColor: "#eab676",
            borderWidth: 3,
          },
          {
            data: [0, 0, 0, 0, 0, 0, 0.1, 0.1, 0, 0],
            label: "Low",
            backgroundColor: "rgb(38, 177, 212)",
            borderColor: "#26b1d4",
            borderWidth: 3,
          },
        ],
     },
    options: {
    responsive: true,
     maintainAspectRatio: false,
    lineTension: 1,
    scales: {
      yAxes: [
        {
          ticks: {
            beginAtZero: true,
             padding:20,
          }
        }
      ]
    }
        },
     }),
  mounted() {
    window.dispatchEvent(new Event("resize"));
    this.renderChart(
      this.chartdata,
      this.options,
      // this.textCenter(" Hello world ")
    );
    // this.renderChart(this.chartdata, this.options)
  },
};

</script>

Any advice or tips will be really helpful for me. Thanks.