DocumentationNuxt Charts v3

Radar Chart

Learn how to implement and customize Radar Charts in your Nuxt application.

The RadarChart component plots several series across shared spokes, making it ideal for comparing multi-dimensional profiles such as product feature scores or skill assessments. New in v3.

Basic Usage

<script lang="ts" setup>
interface RadarDatum {
  metric: string;
  productA: number;
  productB: number;
}

const radarChartData: RadarDatum[] = [
  { metric: "Performance", productA: 90, productB: 72 },
  { metric: "Reliability", productA: 78, productB: 85 },
  { metric: "Comfort", productA: 66, productB: 80 },
  { metric: "Safety", productA: 88, productB: 74 },
  { metric: "Efficiency", productA: 70, productB: 90 },
  { metric: "Design", productA: 82, productB: 68 },
];

const categories: Record<string, BulletLegendItemInterface> = {
  productA: { name: "Product A", color: "var(--color-blue-400)" },
  productB: { name: "Product B", color: "var(--color-pink-400)" },
};
</script>

<template>
  <RadarChart
    :data="radarChartData"
    :categories="categories"
    data-key="metric"
    :height="320"
    :fill-opacity="0.35"
    :legend-position="LegendPosition.BottomCenter"
  />
</template>

Props

Prop	Type	Default	Description
`data`	`T[]`	Required	Array of rows. Each row is one spoke (angle-axis entry).
`height`	`number`	Required	Height of the chart in pixels.
`dataKey`	`keyof T`	Required	Row field used for the angle-axis (spoke) labels.
`categories`	`Record<string, BulletLegendItemInterface>`	Required	Maps each numeric series key to its name and color.
`fillOpacity`	`number`	`0.6`	Fill opacity of each radar polygon.
`angleFormatter`	`(value: unknown, index: number) => string`	`undefined`	Formats the angle-axis (spoke) labels.
`tooltipTitleFormatter`	`(data: T) => string \| number`	`undefined`	Custom formatter for tooltip titles.
`hideLegend`	`boolean`	`false`	If true, hides the chart legend.
`hideTooltip`	`boolean`	`false`	If true, hides the tooltip.
`hideRadiusAxis`	`boolean`	`false`	If true, hides the radius (value) axis.
`legendPosition`	`LegendPosition`	`undefined`	Position of the legend.
`legendStyle`	`Record<string, string>`	`undefined`	Optional inline CSS styles for the legend container.
`tooltip`	`TooltipConfig`	`undefined`	Tooltip configuration.
`duration`	`number`	`undefined`	Animation duration in milliseconds.

Data Format

Each object is one spoke of the radar. The dataKey field labels the spoke and every key referenced in categories is plotted as one overlaid polygon.

types.ts

interface RadarChartData {
  metric: string;
  [seriesKey: string]: string | number;
}

Gantt Charts

A Gantt Chart or timeline that displays a list of events in chronological order.

Radial Bar Chart

Learn how to implement and customize Radial Bar Charts in your Nuxt application.