<template>
 <Line :data="data" :options="options" />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import {
 Chart as ChartJS,
 CategoryScale,
 LinearScale,
 PointElement,
 LineElement,
 Title,
 Tooltip,
 Legend,
 TimeScale,
} from 'chart.js';
import { Line } from 'vue-chartjs';
ChartJS.register(
 CategoryScale,
 LinearScale,
 TimeScale,
 PointElement,
 LineElement,
 Title,
 Tooltip,
 Legend
);
const dataA = [{
 x: 0,
 y: 0,
}, ...];
const dataB = [{
 x: 0,
 y: 0,
}, ...];
const dataC = [{
 x: 0,
 y: 0,
}, ...];
const data = ref({
 datasets: [
 {
 backgroundColor: 'red',
 borderColor: 'red',
 showLine: true,
 fill: false,
 pointRadius: 2,
 label: 'A',
 data: [],
 lineTension: 0,
 interpolate: true,
 },
 {
 backgroundColor: 'green',
 borderColor: 'green',
 showLine: true,
 fill: false,
 pointRadius: 2,
 label: 'B',
 data: [],
 lineTension: 0,
 interpolate: true,
 },
 {
 backgroundColor: 'blue',
 borderColor: 'blue',
 showLine: true,
 fill: false,
 pointRadius: 2,
 label: 'C',
 data: [],
 lineTension: 0,
 interpolate: true,
 },
 ],
 labels: [],
});
const options = {
 scales: {
 x: {
 type: 'linear',
 },
 y: {
 type: 'linear',
 },
 },
};
let index = 0;
setInterval(() => {
 data.value.datasets[0].data.push(dataA[index]);
 data.value.datasets[1].data.push(dataB[index]);
 data.value.datasets[2].data.push(dataC[index]);
 index++;
}, 1000);
</script>