File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
import React, { useEffect, useRef } from "react";
import { Chart } from "chart.js/auto";
const AllLineChart = ({ labels, datasets }) => {
const chartRef = useRef(null);
useEffect(() => {
const ctx = chartRef.current.getContext("2d");
const chartInstance = new Chart(ctx, {
type: "line",
data: {
labels: labels,
datasets: datasets.map((dataset) => ({
...dataset,
xAxisID: "x-axis-0", // Add xAxisID
yAxisID: "y-axis-0", // Add yAxisID
})),
},
options: {
responsive: true,
plugins: {
legend: {
position: "top",
},
},
scales: {
"x-axis-0": {
type: "category",
position: "bottom",
title: {
display: true,
text: "날짜",
},
ticks: {
font: {
family: "JalnanGothic, sans-serif",
},
},
},
"y-axis-0": {
type: "linear",
position: "left",
title: {
display: true,
text: "점수",
},
ticks: {
font: {
family: "JalnanGothic, sans-serif",
},
},
},
},
},
});
return () => {
chartInstance.destroy();
};
}, [labels, datasets]);
return <canvas ref={chartRef} />;
};
export default AllLineChart;