PolarAreaChart

Polar area (Nightingale rose): equal-angle sectors whose radius, or area, follows the value. Reference rings, rim labels, hover and keyboard focus with a tooltip, legend toggling.

Import

import { PolarAreaChart } from "@jcsoftdev/ui/charts";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/charts/polar-area-chart.

Usage

<PolarAreaChart
  title="Citas por día de la semana"
  data={weekday}
  scale="radius"
  innerRadius={0.1}
  cornerRadius={4}
  gap={3}
  levels={4}
  showLabels
  startAngle={0}
  valueFormat="integer"
  height={380}
  tooltip
  loading={false}
  animate
  labels={spanishLabels}
/>

Props

Prop	Type	Default	Description
title *	string
description	string
data *	readonly PolarAreaDatum[]
scale	"area" | "radius"	"radius"	radius: length proportional to value. area: sector area proportional to value (Nightingale rose).
innerRadius	number	0.1	Hole in the middle as a fraction of the outer radius.
cornerRadius	number	4
gap	number	3	Gap between sectors, in pixels at the outer ring.
levels	number	4	Concentric reference rings.
showLabels	boolean	true	Names around the rim (hidden automatically in narrow containers).
startAngle	number	0	Rotation of the first sector, in degrees from 12 o’clock.
monochrome	string | boolean	false	One hue in shades, darkest on the largest value. true uses the accent; a string sets the base color.
height	number | "fill"	340
aspectRatio	number		Width / height ratio; sizes the drawing from the container width when height is not “fill”.
valueFormat	ValueFormat
legend	boolean | "top" | "bottom"
tooltip	boolean	true
loading	boolean	false
animate	boolean	true
initialHidden	readonly string[]
labels	Partial<ChartLabels>
className	string

* marks a required prop.

Storybook stories

• Default
• Nightingale Area
• With Hole
• Monochrome
• Loading
• Empty
• Narrow

Source

packages/ui/src/charts/polar-area-chart/polar-area-chart.tsx