2

Polar Chart

PreviousNext

Rose and coxcomb charts for cyclic or directional data.

01020304050NNEESESSWWNW
"use client"

import { PolarChart } from "@/components/ui/charts/statistical/polar-chart"

const windData = [
  { category: "N", value: 45 },
  { category: "NE", value: 32 },
  { category: "E", value: 28 },
  { category: "SE", value: 15 },
  { category: "S", value: 22 },
  { category: "SW", value: 38 },
  { category: "W", value: 52 },
  { category: "NW", value: 48 },
]

export function PolarChartDemo() {
  return (
    <div className="mx-auto w-full max-w-md">
      <PolarChart
        data={windData}
        variant="rose"
        showLabels
        showValues={false}
        showGrid
      />
    </div>
  )
}

About

The Polar Chart (also known as Rose Chart or Nightingale Rose Diagram) displays data in a circular format with segments radiating from the center. It's ideal for visualizing cyclic data like wind direction, time-based patterns, or categorical comparisons.

Installation

pnpm dlx shadcn@latest add https://ui.simplifying.ai/r/polar-chart.json

Usage

import { PolarChart } from "@/components/ui/charts"
 
const data = [
  { category: "N", value: 45 },
  { category: "NE", value: 32 },
  { category: "E", value: 28 },
  { category: "SE", value: 15 },
  { category: "S", value: 22 },
  { category: "SW", value: 38 },
  { category: "W", value: 52 },
  { category: "NW", value: 48 },
]
 
export function Example() {
  return <PolarChart data={data} variant="rose" />
}

Variants

Coxcomb Chart

The coxcomb variant uses area-proportional sectors (radius varies with sqrt of value).

050100150200250JanFebMarAprMayJunJulAugSepOctNovDec
"use client"

import { PolarChart } from "@/components/ui/charts/statistical/polar-chart"

const monthlyData = [
  { category: "Jan", value: 120 },
  { category: "Feb", value: 98 },
  { category: "Mar", value: 145 },
  { category: "Apr", value: 178 },
  { category: "May", value: 210 },
  { category: "Jun", value: 250 },
  { category: "Jul", value: 280 },
  { category: "Aug", value: 265 },
  { category: "Sep", value: 198 },
  { category: "Oct", value: 156 },
  { category: "Nov", value: 132 },
  { category: "Dec", value: 145 },
]

export function PolarChartCoxcomb() {
  return (
    <div className="mx-auto w-full max-w-md">
      <PolarChart
        data={monthlyData}
        variant="coxcomb"
        showLabels
        showValues={false}
        colorScheme={[
          "#059669",
          "#10b981",
          "#34d399",
          "#6ee7b7",
          "#a7f3d0",
          "#d1fae5",
        ]}
      />
    </div>
  )
}

Donut Style

Add an inner radius to create a donut-style polar chart.

020406080FrontendBackendDatabaseDevOpsTestingDesign
"use client"

import { PolarChart } from "@/components/ui/charts/statistical/polar-chart"

const skillsData = [
  { category: "Frontend", value: 85 },
  { category: "Backend", value: 72 },
  { category: "Database", value: 68 },
  { category: "DevOps", value: 55 },
  { category: "Testing", value: 78 },
  { category: "Design", value: 62 },
]

export function PolarChartDonut() {
  return (
    <div className="mx-auto w-full max-w-md">
      <PolarChart
        data={skillsData}
        variant="rose"
        innerRadius={40}
        showLabels
        showValues={false}
        colorScheme={[
          "#7c3aed",
          "#8b5cf6",
          "#a78bfa",
          "#c4b5fd",
          "#ddd6fe",
          "#ede9fe",
        ]}
      />
    </div>
  )
}

API Reference

PropTypeDefaultDescription
dataPolarDataPoint[]requiredArray of data points
variant"rose" | "coxcomb""rose"Chart variant type
innerRadiusnumber0Inner radius for donut style
showLabelsbooleantrueShow category labels
showValuesbooleanfalseShow value labels
showGridbooleantrueShow grid circles
colorSchemestring[]blue paletteColors for segments
valueFormatterfunctiontoLocaleStringFormat values

Notes

  • Polar charts are excellent for visualizing cyclic data like wind direction, time of day, or compass directions
  • The "rose" variant uses bar length to represent values, making it easy to compare magnitudes
  • The "coxcomb" variant (also known as Nightingale Rose Diagram) uses area-proportional sectors where the radius represents the square root of the value
  • Named after Florence Nightingale who famously used coxcomb charts to visualize mortality data during the Crimean War
  • Use the donut style (innerRadius > 0) to create space in the center for additional labels or information
  • Polar charts work best with data that has a natural circular or directional ordering
  • The grid circles help readers gauge the magnitude of each segment