Radar Chart

Radar charts (also known as spider or web charts) display multivariate data on axes starting from the same center point. They are excellent for comparing multiple datasets across several dimensions simultaneously.

Interface

RadarChart Props

interface RadarChartProps {
  // Required properties
  data: RadarChartData;

  // Optional properties
  custom?: Partial<RadarChartCustom>;
  title?: string;
  getScale?: (data: RadarChartData) => RadarChartScale;
}

Data Structure

type RadarChartData = {
  labels: string[];                                  // Axis labels
  datasets: { legend: string; values: number[] }[];  // Data series
  title?: string;                                    // Chart title
};

type RadarChartScale = {
  min: number;     // Minimum value
  max: number;     // Maximum value
  step: number;    // Step interval
};

Basic Usage

import Widget from '@meursyphus/flitter-react';
import { RadarChart } from '@meursyphus/headless-chart';

const data = {
  labels: ['Attack', 'Defense', 'Speed', 'HP', 'Magic', 'Stamina'],
  datasets: [
    { legend: 'Warrior', values: [90, 85, 60, 80, 30, 75] },
    { legend: 'Mage', values: [40, 50, 70, 60, 95, 55] }
  ],
  title: 'Character Stats'
};

function BasicRadarChart() {
  return (
    <Widget
      width="500px"
      height="500px"
      widget={RadarChart({ data })}
    />
  );
}

Chart Components

Radar Chart consists of the following hierarchical structure:

RadarChart
└── Layout (overall layout)
    ├── Title (chart title)
    ├── Legend (legend items)
    └── Radar (radar area)
        ├── Grid (concentric grid levels)
        ├── Axes (axis lines)
        ├── AxisLabels (axis labels)
        └── Datasets (data series polygons)

Customizable Elements

You can customize the following components through the custom prop:

Real-World Usage Examples

1. Custom Dataset Styling

const styledRadar = RadarChart({
  data,
  custom: {
    dataset: ({ values, legend, index }, config) => {
      const colors = ['rgba(59, 130, 246, 0.3)', 'rgba(239, 68, 68, 0.3)'];
      const borderColors = ['#3b82f6', '#ef4444'];
      // Custom polygon rendering with fill and stroke
    }
  }
});

2. Custom Grid

const customGrid = RadarChart({
  data,
  custom: {
    grid: ({ levels }) => {
      // Draw custom concentric shapes (circles or polygons)
    }
  }
});

Next Steps

• For more examples, check out the demo page
• Try comparing multiple datasets to highlight differences
• Customize axis labels for better readability