I recently integrated a line chart from Chart JS into my Vue.js project, but the chart is taking up too much space on my webpage. I'm looking for ways to make it appear smaller and more compact. This is my first time working with charts in Vue.js, so any advice or tips would be greatly appreciated. Thank you!
<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>
If you have any advice or tips, please share them with me. Thanks!