He incrustado un gráfico de líneas del gráfico JS en el proyecto vue js. Sin embargo, mi gráfico es demasiado grande para mi página. ¿Cómo puedo hacer que parezca pequeño y compacto en mi página web? Esta es la primera vez que agrego gráficos a vue js. Cualquier consejo o consejo será muy útil para mí. Gracias. Aquí está mi código.

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

Cualquier consejo o consejo será muy útil para mí. Gracias.