import {

  Chart as ChartJS,

  Filler,

  Legend,

  LineElement,

  PointElement,

  RadialLinearScale,

  Tooltip,

} from "chart.js";

import React from "react";

import { Radar } from "react-chartjs-2";

import "./SpiderChart.scss";

ChartJS.register(

  RadialLinearScale,

  PointElement,

  LineElement,

  Filler,

  Tooltip,

  Legend

);

type Dataset = {

  data: number[];

  backgroundColor: string;

  borderColor: string;

  borderWidth: number;

  pointBorderColor: string;

  pointBackgroundColor?: string;

  pointBorderWidth: number;

  pointRadius: number;

};

interface SpiderChartProps {

  data: {

    labels: string[];

    datasets: Dataset[];

  }

}

​

const SpiderChart: React.FC<SpiderChartProps> = ({ data }) => {

​

  const options = {

    plugins: {

      legend: {

        display: false,

      },

    },

    scales: {

      r: {

        grid: {

          color: "#607080",

        },

        angleLines: {

          color: "#607080", 

        },

        ticks: {

          color: "white",

          backdropColor: "transparent",

        },

        pointLabels: {

          color: "rgba(255, 255, 255, 0.6)",

        },

      },

    },

  };

  return (

    <div className="spider-chart" style={{ width: "500px" }}>

      <Radar options={options} data={data} />;

    </div>

  );

};

​

export default SpiderChart;