Weighted Radar Chart Maker

Overview

Weighted Radar Chart Maker is an interactive web tool for visualizing and comparing multi-dimensional data using a combination of radar (spider) charts and weighted pie sectors. Each axis represents a metric with a value and a weight, and the chart visually displays both the relative importance (weight) and the score (value) for each metric.

• Radar Chart: Shows the values for each axis as a polygon.
• Pie Sectors: Each sector's angle is proportional to its weight, visually emphasizing more important metrics.
• Legend: Displays axis names, weights, scores, and the total weighted score.
• Customization: Adjust axis names, values, weights, chart colors, opacities, and toggle between light/dark mode.
• Export: Download your chart as SVG or PNG with a transparent background.

Features

• Add or remove axes (minimum 3 axes required)
• Set custom names, values (0–100), and weights (0.1–50) for each axis
• Real-time chart updates as you adjust controls
• Customize radar fill, stroke, grid, axis, and text colors
• Adjust pie and radar opacity
• Toggle pie sectors on/off
• Light and dark mode support
• Download chart as SVG or PNG
• Chart state and theme are saved in your browser (localStorage)

Usage

Use Demo

Click here to access the demo.

Use Locally

1. Open index.html in your browser.
2. Use the controls on the left to:
   • Add or remove axes
   • Edit axis names, values, and weights
   • Adjust chart settings and colors
   • Switch between light and dark mode
3. The chart and legend update instantly.
4. Click Download SVG or Download PNG to export your chart.

Example Use Cases

• Product feature comparison
• Project evaluation (performance, reliability, usability, etc.)
• Team skill assessment
• Risk analysis
• Any scenario where weighted multi-factor comparison is useful

File Structure

index.html        # Main HTML file
script.js         # Chart logic and interactivity
styles.css        # Styling for light/dark mode and layout

Customization

• Add more axes: Click "Add Axis". You can have as many axes as you need.
• Remove axes: Click the red × button (minimum 3 axes required).
• Edit axis: Change the name, value, or weight using the provided inputs.
• Colors: Use the color pickers to match your branding or presentation style.
• Theme: Toggle between light and dark mode using the button in the header.

Exporting

• SVG: High-quality, scalable vector export with transparent background.
• PNG: Raster image export, suitable for slides and documents.

Browser Support

• Modern browsers (Chrome, Firefox, Edge, Safari)
• No installation or server required (pure HTML/JS/CSS)

License

This project is open source and free to use for any purpose.