Charts > Radar Chart ​

A radar chart is a graphical method of displaying multivariate data in the form of a two-dimensional chart, with three or more quantitative variables represented on axes starting from the same point.

The Chart ​

Randomize dataUpload data

Download example CSV

Copy HTML

Playground ​

Data

Animation

Style

Usage Example (with tooltip) ​

<template>
  <RadarChart :data="data" @hover="setTooltip" />

  <OTTooltip :info="tooltip">
    <div class="">
      <p class=" my-0">
        <span class="font-semibold">Value: </span>{{ tooltip?.data?.value }}
      </p>
    </div>
  </OTTooltip>
</template>

<script setup>
import useTooltip from "@/functions/useTooltip.js";

const [tooltip, setTooltip] = useTooltip();
</script>

Component API ​

The radar chart is built with SVG and d3. The shape animates using d3 transition.

Data ​

[
 { name: "Axis 1", value: 10 },
 { name: "Axis 2", value: 30 },
 ...
]<

Props ​

Dependencies ​

• d3

Featured in ​

• WEF Country Page