Untitled

import React from "react";
import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";
import HighchartsMore from "highcharts/highcharts-more"; // For spider/radar chart support

// Initialize Highcharts-more module
HighchartsMore(Highcharts);

const SpiderChart = () => {
  const options = {
    chart: {
      polar: true, // Enable polar chart for spider/radar
      type: "line", // Line type for spider chart
    },
    title: {
      text: "Skills Assessment",
      align: "center",
    },
    pane: {
      size: "80%", // Adjust the size of the spider chart
    },
    xAxis: {
      categories: [
        "React",
        "JavaScript",
        "HTML",
        "CSS",
        "Node.js",
        "MongoDB",
      ],
      tickmarkPlacement: "on",
      lineWidth: 0, // Removes outer border
    },
    yAxis: {
      gridLineInterpolation: "polygon",
      lineWidth: 0,
      min: 0,
      max: 100,
    },
    tooltip: {
      shared: true,
      pointFormat: "<b>{series.name}: {point.y}</b>",
    },
    legend: {
      align: "center",
    },
    series: [
      {
        name: "John Doe",
        data: [90, 85, 75, 80, 70, 60],
        pointPlacement: "on",
      },
      {
        name: "Jane Doe",
        data: [80, 70, 65, 85, 75, 95],
        pointPlacement: "on",
      },
    ],
  };

  return (
    <div>
      <HighchartsReact highcharts={Highcharts} options={options} />
    </div>
  );
};

export default SpiderChart;