<script lang="ts" setup> import { ref, watch, computed, onMounted } from 'vue'; import { Chart, LineElement, PointElement, LineController, LinearScale, CategoryScale, Tooltip, registerables } from 'chart.js'; import { Ref } from 'vue'; import { ChartDataCustomTypesPerDataset } from 'chart.js'; // interface Dataset { // borderColor: string; // // borderDash: // // (0) [] // borderDashOffset: number; // borderWidth: number; // cubicInterpolationMode: string; // data: Array<number>; // fill: boolean; // pointBackgroundColor: string; // pointBorderColor: string; // pointBorderWidth: number; // pointHoverBackgroundColor: string; // pointHoverBorderWidth: number; // pointHoverRadius: number; // pointRadius: number; // tension: number; // } const props = defineProps({ data: { type: Object, required: true, }, }); const root: Ref<HTMLCanvasElement | null> = ref<HTMLCanvasElement | null>(null); let chart; Chart.register(LineElement, PointElement, LineController, LinearScale, CategoryScale, Tooltip); onMounted(() => { Chart.register(...registerables); // https://gitea.geologie.ac.at/kaiarn/geomon.viewer/src/branch/master/src/common/graphjs/geomon-timeseries-chart/geomon-timeseries-chart.component.ts chart = new Chart(root.value, { type: 'line', data: props.data as ChartDataCustomTypesPerDataset<"line", number[], string>, // data: { // labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], // // labels: [], // datasets: [ // { // data: [86, 114, 106, 106, 107, 111, 133, 221, 783, 2478, 2600, 2700], // label: "Africa", // borderColor: "#3e95cd", // fill: false // }, { // data: [282, 350, 411, 502, 635, 809, 947, 1402, 3700, 5267, 444, 555], // label: "Asia", // borderColor: "#8e5ea2", // fill: false // } // ] // }, options: { responsive: true, maintainAspectRatio: false, scales: { y: { display: false, }, x: { display: true, }, }, plugins: { legend: { display: true, }, }, }, }); }); const chartData = computed(() => props.data); watch(chartData, (data) => { if (chart) { chart.data = data; chart.update(); } }); </script> <template> <canvas ref="root" /> </template>