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 from "react";
import { Radar } from "react-chartjs-2";
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
PointElement,
LineElement,
RadialLinearScale,
Tooltip,
Legend,
} from "chart.js";
ChartJS.register(
CategoryScale,
LinearScale,
PointElement,
LineElement,
RadialLinearScale,
Tooltip,
Legend
);
const AbilitiesChart = ({ abilities }) => {
const data = {
labels: abilities.map((ability) => ability.name),
datasets: [
{
label: "나의 능력",
backgroundColor: "rgba(123, 95, 232, 0.5)",
borderColor: "rgba(123, 95, 232, 1)",
pointBackgroundColor: "rgba(123, 95, 232, 1)",
data: abilities.map((ability) => ability.level),
},
],
};
const options = {
scales: {
r: {
angleLines: {
display: false,
},
suggestedMin: 0,
suggestedMax: 5,
},
},
plugins: {
legend: {
position: "top",
},
tooltip: {
enabled: true,
mode: "index",
intersect: false,
},
},
};
return <Radar data={data} options={options} />;
};
export default AbilitiesChart;