RadarChart

<RadarChart data={rows} config={{ desktop }} x="month" dots={{ r: 4 }} tooltip={{ cursor: false }} />

<RadarChart data={rows} {config} x="month" lines fillOpacity={0}
            grid={{ radialLines: false }} tooltip={{ indicator: "line", cursor: false }} />

<RadarChart data={rows} {config} x="month" margin={{ top: 10, right: 10, bottom: 10, left: 10 }}
            angleAxis={{ detail: (row) => `${row.desktop}/${row.mobile}` }}
            tooltip={{ indicator: "line", cursor: false }} />

<RadarChart data={rows} config={{ desktop }} x="month"
            grid={{ radialLines: false, radii: [90] }} tooltip={{ hideLabel: true, cursor: false }} />

<RadarChart data={rows} config={{ desktop }} x="month" grid={false} dots={{ r: 4 }} />

<RadarChart data={rows} config={{ desktop }} x="month" grid={{ type: "circle" }} dots={{ r: 4 }} />

<RadarChart data={rows} config={{ desktop }} x="month"
            grid={{ type: "circle", radialLines: false }} dots={{ r: 4 }} />

<RadarChart data={rows} config={{ desktop }} x="month"
            grid={{ type: "circle", fill: true }} fillOpacity={0.5} />

<RadarChart data={rows} config={{ desktop }} x="month" grid={{ fill: true }} fillOpacity={0.5} />

<RadarChart data={rows} {config} x="month" tooltip={{ indicator: "line", cursor: false }} />

<RadarChart data={rows} {config} x="month" legend tooltip={{ indicator: "line", cursor: false }} />

<RadarChart data={rows} config={{ desktop: { ..., icon: "monitor" }, mobile: { ..., icon: "smartphone" } }}
            x="month" legend tooltip={{ indicator: "line", cursor: false }} />

<RadarChart data={rows} {config} x="month" angleAxis={false}
            radiusAxis={{ angle: 60, orientation: "middle" }} tooltip={{ indicator: "line", labelKey: "month" }} />

<!-- each value just outside its vertex -->
<RadarChart data={rows} {config} x="month" series={["desktop"]} labels dots />

<!-- March has no value: the polygon breaks there, or connectNulls closes it over the spoke -->
<RadarChart data={gaps} {config} x="month" series={["desktop"]} lines />
<RadarChart data={gaps} {config} x="month" series={["desktop"]} lines connectNulls />

<!-- a [low, high] pair per month draws the band between them -->
const ranges = [{ month: "January", temperature: [12, 24] }, ...];
<RadarChart data={ranges} {config} x="month" />

<!-- ticks fixes the values; the grid rings follow them -->
<RadarChart data={rows} {config} x="month" radiusAxis={{ angle: 0, ticks: [100, 250] }} />
<!-- allowDecimals false keeps the ticks on whole numbers -->
<RadarChart data={scores} {config} x="skill" radiusAxis={{ angle: 0, allowDecimals: false }} />
<!-- reversed: the largest value at the center; the spokes run counter-clockwise -->
<RadarChart data={rows} {config} x="month" radiusAxis={{ angle: 0, reversed: true }} angleAxis={{ reversed: true }} />

<RadarChart data={rows} {config} x="month"
            margin={{ left: 40 }} cx="40%" cy="60%" />

<!-- wait 150ms, then take 900ms to enter or move to new data -->
<RadarChart data={rows} {config} x="month"
            animation={{ begin: 150, duration: 900, easing: (t) => t * t }} />

<!-- desktop's legend icon is a line; mobile is left out of the tooltip, other out of the legend -->
<RadarChart data={rows} x="month" legend config={{
  desktop: { label: "Desktop", color: "var(--chart-1)", legendType: "line" },
  mobile: { label: "Mobile", color: "var(--chart-2)", tooltipType: "none" },
  other: { label: "Other", color: "var(--chart-3)", legendType: "none" },
}} />

<RadarChart data={rows} {config} x="month" legend={{ toggle: true }} hidden={state.hidden}
            radiusAxis={{ angle: 0, tickCount: 3, domain: [0, 400], tickFormatter: (v) => `${v}+` }}
            active={state.active} onActiveChange={() => state.changes++}
            onItemClick={(i) => state.clicked = i} />

<RadarChart data={rows} config={{ desktop }} x="month" innerRadius={30} />
<RadarChart data={rows} config={{ desktop }} x="month"
            grid={{ polarAngles: [90, 0, 270, 180] }}
            angleAxis={{ axisLine: true, axisLineType: "circle", tickLine: true, label: "Visits" }}
            radiusAxis={{ angle: 30, axisLine: true, tickLine: true, label: "Count" }} />
<!-- two radius axes: mobile has a scale of its own -->
<RadarChart data={rows} {config} x="month"
            radiusAxis={[{ angle: 90 }, { angle: 270, series: ["mobile"], domain: [0, 1000] }]} />
<!-- two angle axes: mobile runs its spokes the other way -->
<RadarChart data={rows} {config} x="month"
            angleAxis={[{}, { series: ["mobile"], reversed: true, hide: true }]} />

<!-- the rings and spokes in the first chart color, dashed, 2px -->
<RadarChart data={rows} {config} x="month"
            grid={{ stroke: "var(--chart-1)", strokeDasharray: "3 3", strokeWidth: 2 }} />

<!-- unit follows each value in the tooltip -->
<RadarChart data={rows} {config} x="month" radiusAxis={{ angle: 0, unit: "k" }} />
<!-- the ticks beside the spoke, ending at their value -->
<RadarChart data={rows} {config} x="month" radiusAxis={{ angle: 90, orientation: "left" }} />
<!-- keep 0 to 200 though February reaches 305 -->
<RadarChart data={rows} {config} x="month" radiusAxis={{ angle: 0, domain: [0, 200], allowDataOverflow: true }} />
<!-- hiding a series keeps the scale -->
<RadarChart data={rows} {config} x="month" legend={{ toggle: true }}
            radiusAxis={{ angle: 0, includeHidden: true }} />
<!-- each month label turned 45 degrees -->
<RadarChart data={rows} {config} x="month" angleAxis={{ angle: 45 }} />

<!-- the axis ends at the data's own maximum, ticks evenly spaced -->
<RadarChart data={rows} {config} x="month" radiusAxis={{ angle: 0, niceTicks: "none" }} />
<!-- a square root scale: small values spread out -->
<RadarChart data={rows} {config} x="month" radiusAxis={{ angle: 0, scale: "sqrt" }} />
<!-- each distinct value on a ring of its own, in data order -->
<RadarChart data={rows} {config} x="month" radiusAxis={{ angle: 0, type: "category" }} />
<!-- the axis spans 20 to 60px from the center -->
<RadarChart data={rows} {config} x="month" radiusAxis={{ angle: 0, range: [20, 60] }} />

<!-- a ring per month from the center out, each value a share of the turn from twelve o'clock -->
<RadarChart data={rows} {config} x="month" layout="radial" radiusAxis dots />

<!-- each month keeps its point: the window slides instead of every point changing value -->
<RadarChart data={rows} {config} x="month" animation={{ matchBy: matchByDataKey("month") }} />
<!-- (items, t) => the items to draw: each matched item from prev to next, started one after another -->
<RadarChart data={rows} {config} x="month" animation={{ interpolate: stagger }} />