react-chartjs-2（Chart.js）

import {
  Chart as ChartJS,
  RadialLinearScale,
  PointElement,
  LineElement,
  Filler,
  Tooltip,
  Legend,
  ChartData,
  ChartOptions,
} from 'chart.js';
import { Radar } from 'react-chartjs-2'
import { FC } from 'react'


ChartJS.register(
  RadialLinearScale,
  PointElement,
  LineElement,
  Filler,
  Tooltip,
  Legend,
)

export const ResultReferenceEasyToHearChart: FC = () => {
  const chartData: ChartData<'radar'> = {
    labels: ['a', 'b', 'c'],
    datasets: [
      {
        label: 'label1',
        data: [1, 2, 3],
        borderColor: '#0000ff',
        borderWidth: 4,
        fill: false,
        borderJoinStyle: 'round',
        pointStyle: 'cross',
      },
      {
        label: 'label2',
        data: [2,3,4],
        borderColor: '#00ff00',
      },
    ],
  }

  const chartOptions: ChartOptions<'radar'> = {
    plugins: {
      legend: {
        position: 'bottom',
      },
      tooltip: {
        enabled: false,
      },
    },
  }

  return (
    <Radar data={chartData} options={chartOptions} />
  )
}