Update Chart Js 3.x to the latest version and ask code modification questions

[IdiotsPapa]

Which part of the code below should I change to show the chart normally?

Sample Image

`mounted() {
const timeFormat = "YYYY-MM-DD HH:mm:ss";
const ctx = this.$refs.canvas.getContext("2d");
this.chartConfig = {
type: "line",
data: {
labels: [],
datasets: [],
},
options: {
title: {
text: "Chart.js Time Scale",
},
elements: {
line: {
tension: 0.001,
},
point: {
//pointStyle: (ctx) => console.log(ctx),
radius: 0,
hoverRadius: 5,
},
},
legend: {
display: false,
position: "bottom",
},
animation: {
duration: 0,
},
scales: {
xAxes: [
{
type: "time",
time: {
parser: timeFormat,
round: "second",
tooltipFormat: timeFormat,
},
scaleLabel: {
display: false,
labelString: "시간",
},
ticks: {
display: false,
callback(_, index, values) {
const value = values[index];
return [
window.moment(value).format("HH"),
window.moment(value).format("mm"),
];
},
},
},
],
yAxes: [
{
scaleLabel: {
display: false,
labelString: "사용율(%)",
},
ticks: {
display: false,
min: 0,
max: 100,
},
},
],
},
},
};
this.lineChart = new Chart(ctx, this.chartConfig);
},
methods: {
updateChart() {
// 서버에서 최초 값 조회 시. 차트 데이터 셋팅.
const config = this.chartConfig;

  config.data.labels = [];
  config.data.datasets = [];

  // datasets 설정.
  if (this.serverStatus.length > 0) {
    //datasets의 값 초기화후 재등록.

    config.data.datasets[0] = {
      label: "CPU",
      backgroundColor: "rgba(245, 0, 86, 0.5)",
      pointBorderColor: "#fff",
      data: [],
    };
    config.data.datasets[1] = {
      label: "Memory",
      fill: false,
      borderColor: "rgba(41, 98, 255, 0.5)",
      pointBorderColor: "#fff",
      data: [],
    };
    config.data.datasets[2] = {
      label: "PhysiMemory",
      fill: false,
      borderColor: "rgba(0, 153, 153, 0.5)",
      pointBorderColor: "#fff",
      data: [],
    };
    

    // Disk 정보를 이용하여 여러디스크 이용.
    this.diskInfo = this.serverStatus[
      this.serverStatus.length - 1
    ].diskInfo.split(",");

    for (var d = 0, dj = this.diskInfo.length; d < dj; d++) {
      config.data.datasets[3 + d] = {
        label: this.diskInfo[d],
        fill: false,
        borderColor: "rgba(150, 210, 20, 0.5)",
        pointBorderColor: "#fff",
        data: [],
      };
    }

    // 상태값들 data에 push
    for (var i = 0; i < this.serverStatus.length; ++i) {
      this.pushChartData(config, this.serverStatus[i]);
    }
  }

  this.lineChart.update();
},
//데이터 추가.
pushChartData(config, data) {
  config.data.labels.push(new Date(data.checkAt));
  config.data.datasets[0].data.push({
    x: new Date(data.checkAt),
    y: data.cpuUsage,
  });
  config.data.datasets[1].data.push({
    x: new Date(data.checkAt),
    //y: (data.memUse / data.memTot) * 100,
    y: ((data.memUse + data.memUseVirtual) / (data.memPhysi + data.memVirtual) ) * 100,
  });
  config.data.datasets[2].data.push({
    x: new Date(data.checkAt),
    y: (data.memUse / data.memPhysi) * 100,
  });

  for (var d = 0, j = this.diskInfo.length; d < j; d++) {
    config.data.datasets[3 + d].data.push({
      x: new Date(data.checkAt),
      y:
        (data["disk" + (1 + d) + "Use"] / data["disk" + (1 + d) + "Tot"]) *
        100,
    });
  }
},

},
};`

[stockiNail]

@IdiotsPapa the options must be changed. Didn't test it but it should be something like that:

options: {
    elements: {
        line: {
            tension: 0.001,
        },
        point: {
            //pointStyle: (ctx) => console.log(ctx),
            radius: 0,
            hoverRadius: 5,
        },
    },
    animation: {
        duration: 0,
    },
    plugins: {
        title: {
            display: true,
            text: "Chart.js Time Scale",
        },
        legend: {
            display: false,
            position: "bottom",
        },
    }
    scales: {
        xAxes: {
            type: "time",
            time: {
                parser: timeFormat,
                round: "second",
                tooltipFormat: timeFormat,
            },
            title: {
                display: false,
                text: "시간",
            },
            ticks: {
                display: false,
                callback(_, index, values) {
                    const value = values[index];
                    return [
                        window.moment(value).format("HH"),
                        window.moment(value).format("mm"),
                    ];
                },
            },
        },
        yAxes: {
            min: 0,
            max: 100,
            title: {
                display: false,
                text: "사용율(%)",
            },
            ticks: {
                display: false,
            },
        },
    },
},