Minimal Circular Radar Chart

Visualize multivariate data with circular grid and no radial lines for the cleanest circular appearance. Combines the organic feel of circular grids with minimal visual clutter. Built for React applications with Next.js integration and TypeScript support.

Recharts

Loading component...

"use client"import { TrendingUp } from "lucide-react"import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"import {  ChartConfig,  ChartContainer,  ChartTooltip,  ChartTooltipContent,} from "@/components/ui/chart"export const description = "A radar chart with a grid and circle fill"const chartData = [  { month: "January", desktop: 186 },  { month: "February", desktop: 305 },  { month: "March", desktop: 237 },  { month: "April", desktop: 203 },  { month: "May", desktop: 209 },  { month: "June", desktop: 214 },]const chartConfig = {  desktop: {    label: "Desktop",    color: "var(--chart-1)",  },} satisfies ChartConfigexport function ChartRadarGridCircleNoLines() {  return (    <div className="w-full h-full flex flex-col p-4">      <div className="text-center mb-2">        <h3 className="text-lg font-semibold">Radar Chart - Grid Circle - No lines</h3>        <p className="text-sm text-muted-foreground">          Showing total visitors for the last 6 months        </p>      </div>      <div className="flex-1 flex items-center justify-center min-h-0">        <ChartContainer          config={chartConfig}          className="aspect-square w-80 h-80"        >          <RadarChart data={chartData}>            <ChartTooltip              cursor={false}              content={<ChartTooltipContent hideLabel />}            />            <PolarGrid gridType="circle" radialLines={false} />            <PolarAngleAxis dataKey="month" />            <Radar              dataKey="desktop"              fill="var(--color-desktop)"              fillOpacity={0.6}              dot={{                r: 4,                fillOpacity: 1,              }}            />          </RadarChart>        </ChartContainer>      </div>      <div className="flex flex-col gap-1 text-sm text-center mt-2">        <div className="flex items-center justify-center gap-2 leading-none font-medium">          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />        </div>        <div className="text-muted-foreground flex items-center justify-center gap-2 leading-none">          January - June 2024        </div>      </div>    </div>  )}

Installation

npx shadcn@latest add https://www.shadcn.io/registry/radar-chart-08.json

npx shadcn@latest add https://www.shadcn.io/registry/radar-chart-08.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/radar-chart-08.json

bunx shadcn@latest add https://www.shadcn.io/registry/radar-chart-08.json

Features

Circular grid with no radial lines combining gridType="circle" and radialLines={false}
Cleanest circular appearance with concentric circles only, no spoke lines
Dot markers highlighting individual data points with customizable size
Hidden tooltip labels using hideLabel prop for cleaner tooltips
Organic visual design with curved grid reference without angular distractions
Single data series with customizable fill and opacity
Responsive design with automatic scaling to fit container
TypeScript support with complete type definitions for all props
shadcn/ui integration using Chart components

Use Cases

This free open source React component works well for:

Ultra-clean designs - Maximum circular aesthetic with minimal grid interference
Organic data presentation - Natural circular flow without harsh angular lines
Focus on data shape - Circular reference without radial line distractions
Modern dashboards - Sophisticated appearance with curved, minimal grid styling

API Reference

ChartRadarGridCircleNoLines

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes for the container

Implementation Notes

PolarGrid configured with both gridType="circle" and radialLines={false}
Creates pure concentric circles without any radial spoke lines
Combines the benefits of circular grids with minimal visual clutter
Dot markers configured with r: 4 radius and fillOpacity: 1 for visibility
Tooltip configured with hideLabel to show only data values
Single radar series with 0.6 fill opacity for balanced visibility
Data structure requires category field (month) and numeric values
Chart automatically maintains aspect ratio within container
Uses Recharts RadarChart with the cleanest possible circular grid
Perfect balance between having reference lines and maintaining clean aesthetics
Ideal for when you want circular reference but minimal visual noise