Untitled
unknown
plain_text
4 months ago
1.5 kB
3
Indexable
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;
Editor is loading...
Leave a Comment