Comparison / Intermediate

Radar Chart

Compare profiles across several measures on shared axes.

Interactive Chart Preview

JAVASCRIPT

Live, interactive exampleChart.js

Edit the column names and values to update your chart. Changes stay in this page until you reload.

Chart data editor
Row#	Metric	Score (0–100)	Score (0–100)	Remove row
1
2
3
4
5
6

6 / 200 rows

Use at least three distinct metrics and scores from 0 to 100 on a comparable scale. You can add up to 20 series.

Chart.js Code Example

JAVASCRIPT

import Chart from 'chart.js/auto';

// Illustrative data used by the live preview.
const chartData = {
  "categoryLabel": "Metric",
  "labels": [
    "Speed",
    "Reliability",
    "Comfort",
    "Safety",
    "Efficiency",
    "Design"
  ],
  "datasets": [
    {
      "label": "Product A",
      "data": [
        65,
        59,
        90,
        81,
        56,
        75
      ],
      "borderColor": "rgb(139, 92, 246)",
      "backgroundColor": "rgba(139, 92, 246, 0.2)",
      "borderWidth": 2
    },
    {
      "label": "Product B",
      "data": [
        78,
        75,
        70,
        85,
        88,
        80
      ],
      "borderColor": "rgb(6, 182, 212)",
      "backgroundColor": "rgba(6, 182, 212, 0.2)",
      "borderWidth": 2
    }
  ]
};

function createConfig(chartData) {
    let chartType = 'bar';
    let options = {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                position: 'bottom',
            },
            tooltip: {
                mode: 'index',
                intersect: false,
            },
        },
    };
    chartType = 'radar';
    options.scales = {
        r: {
            min: 0,
            max: 100,
            ticks: {
                stepSize: 20,
            },
        },
    };
    options.plugins.legend = {
        position: 'top',
        display: chartData.datasets.length <= 8,
    };
    return { type: chartType, data: structuredClone(chartData), options };
}

const chart = new Chart(document.getElementById('myChart'), createConfig(chartData));

Preview and code follow the same library selection.

Run This Example

Install the package below in a browser project such as Vite. Put the copied code in a client JavaScript module and add this container to the page before the module runs.

npm install chart.js@4.5.1

<div style="height:320px"><canvas id="myChart"></canvas></div>

The example includes its sample data. When removing the chart, destroy or dispose of its instance and disconnect any resize observer.

Reading This Example

The default Chart.js example compares two illustrative products on six measures, each on a 0-100 scale. Product A scores 90 for Comfort versus Product B at 70. Product B has the higher value on the other five measures; that does not establish a single overall winner.

All library tabs use these illustrative values. Rendering styles and library APIs differ, so use the table to compare exact numbers.

About this example & sample data

Sample values used in the chart
Measure	Product A	Product B
Speed	65	78
Reliability	59	75
Comfort	90	70
Safety	81	85
Efficiency	56	88
Design	75	80

READ THE CHART

Compare Profiles Across Several Measures

A radar chart places several measures on spokes that share a center. Connecting each series produces a profile that can reveal strengths and weaknesses across a small, fixed set of comparable dimensions.

Make Scales Comparable

Use a common range or clearly explain how the measures were normalized. Mixing dollars, seconds, and percentages on unlabeled scales makes a profile difficult to interpret. Decide whether higher values consistently mean the same thing.

Read One Spoke at a Time

Compare series along the same spoke before judging the overall shape. A value farther from the center is larger on that axis. Limit the number of profiles so lines and filled areas remain distinguishable.

Avoid Ranking by Area

Polygon area changes when the order of the spokes changes, even if the values stay the same. It is not a reliable overall score. Keep axis order consistent and explain any method used to combine measures.

Choose a Clearer Alternative

Use grouped bars when exact differences matter or there are many profiles. Use a heatmap for a larger matrix of entities and measures. Radar charts work best as a compact overview with labeled values available.