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.

CodePudding user response：

You will need to wrap that Vue component in another component. In that other component you can set a height and with to the div your chart component is in.