Responsive Customizable SVG Radar Charts in JavaScript – RadarChartJS

RadarChartJS is a lightweight JavaScript library for generating responsive, customizable, interactive radar charts. It creates SVG radar charts that adapt to screen sizes and supports 3-6 data dimensions. Charts update dynamically, scale values automatically, and render gradients based on data thresholds.

This library is useful for comparing different data sets or showing performance metrics. For example, you could use it to compare the features of different products, the performance of various team members, or the characteristics of multiple items.

How to use it:

1. Download and add the chart.js file to your webpage:

<script src="chart.js"></script>

2. Create a div element where the radar chart will appear:

<div id="radar-chart"></div>

3. Initialize the radar chart with your data. Remember that the data should contain between three to six data points.

const container = document.getElementById("radar-chart");
const data = {
  JavaScript: 85,
  CSS: 90,
  HTML: 98,
  React: 80,
  Vue: 50,
};
const chart = new RadarChart(container, data);

4. Customize the chart’s appearance and behavior through the options object:

const options = {
  maxValue: 100,
  labels: Object.keys(data),
  // Base size values for scaling calculations
  baseSize: 400,
  basePadding: 50,
  baseStrokeWidth: 2,
  basePointRadius: 4,
  baseTextSize: 14, // 0.875rem in pixels
  baseLabelDistance: 1.15,
};
const chart = new RadarChart(container, data, options);

5. Use addDataPoint to add more data points.

chart.addDataPoint("Angular", 75);

6. Use removeDataPoint to remove a data point.

chart.removeDataPoint("React");

7. If you need to resize the chart manually, call the resize() function. It resizes automatically with the window, too.

chart.resize();

8. The library uses color thresholds to visually distinguish data values. You can customize them like this:

this.colorThresholds = [
  { threshold: 0.33, color: "#007EFD" },
  { threshold: 0.66, color: "#F5D85E" },
  { threshold: 1, color: "#FC517B" },
];

Changelog:

10/12/2025

• Bugfixes