---
title: "Radar chart animated icon"
description: "Radar chart animated icon (Tables & analytics). The scores are plotted. Light: the value triangle is pushed out along its three axes and stops dead on its values, and the three data points flash in turn around the chart (top, right, left). Strong: two readings: the triangle steps out halfway and stops, then out to its full values, and the data points flash bigger. Values never overshoot; the axes never move; the plotted triangle stays."
canonical: https://generativeicons.com/icons/radar-chart/
---

# Radar chart animated icon

The scores are plotted. Light: the value triangle is pushed out along its three axes and stops dead on its values, and the three data points flash in turn around the chart (top, right, left). Strong: two readings: the triangle steps out halfway and stops, then out to its full values, and the data points flash bigger. Values never overshoot; the axes never move; the plotted triangle stays.

- Id: `radar-chart`
- Category: Tables & analytics
- Search terms: spider chart, spider graph, web chart, star chart, polar chart, radial chart, kiviat diagram, skills chart, attribute comparison, multivariate
- Two states: prepared to result, played forward and back
- Styles: outline, solid, duotone; outline weights 1.5, 2, 2.5 (any from 1 to 3); motion light or strong
- File: https://generativeicons.com/assets/radar-chart.lottie (dotLottie, 8421 bytes, sha256 0e499f613fa32d04fd24a8558be789987d2fceb89ae461bff7126449e6a28300)
- License: MIT

## Install

```sh
npm install @lottiefiles/generative-icons-runtime
npx generative-icons init
npx generative-icons add radar-chart
```

## React

```tsx
// npm install @lottiefiles/generative-icons-react
'use client';
import { AnimatedIcon } from '@lottiefiles/generative-icons-react';
import icon, { src } from './generative-icons/radar-chart.mjs';

export function RadarChartIcon() {
  return <AnimatedIcon icon={icon} src={src} size={32}
    color="#ffffff" variant="outline" weight={2}
    motion="light" theme="dark" />;
}
```

## JavaScript

```js
import { createIcon } from '@lottiefiles/generative-icons-runtime';
import icon, { src } from './generative-icons/radar-chart.mjs';

const handle = await createIcon(canvas, {
  icon, src,
  color: '#ffffff', style: 'outline', weight: 2,
  motion: 'light', theme: 'dark'
});
button.addEventListener('click', () => handle.play());
// On removal: handle.destroy();
```

More: https://generativeicons.com/icons/radar-chart/ · https://generativeicons.com/api/icons/radar-chart