Charts — Radar Chart — Semiotic

Home · Getting Started · Charts · Features · Playground

This page requires JavaScript for interactive chart demos.

AI / Machine-readable docs: llms.txt · llms-full.txt · Full AI Reference · schema.json · API Reference · Examples

View on GitHub · npx semiotic-ai for CLI access

Machine-readable page content

Canonical: https://semiotic.nteract.io/charts/radar-chart

RadarChart

charts

import { RadarChart } from "semiotic/ordinal"

Wraps: StreamOrdinalFrame

Related: DotPlot·PieChart

RadarChart compares several quantitative attributes across series on a shared radial axis. Data is long-form: one row per series and attribute. Use it when the axes are comparable magnitudes, not a closed cycle of unrelated units.

Quick Start

import { RadarChart } from "semiotic" const frameProps = { /* --- Data --- */ data: [ { name: "Alpha", attribute: "speed", value: 80 }, { name: "Alpha", attribute: "power", value: 55 }, ], /* --- Process --- */ valueAccessor: "value", categoryAccessor: "attribute", /* --- Customize --- */ colorBy: "name", showLegend: true, /* --- Other --- */ seriesAccessor: "name" } export default () => { return <RadarChart {...frameProps} /> }

Props

Prop	Type	Required	Default	Description
`data`	array	Yes	—	Long-form rows: one observation per series × attribute.
`categoryAccessor`	string \| function	—	`"attribute"`	Axis around the radar.
`valueAccessor`	string \| function	—	`"value"`	Magnitude along each axis.
`seriesAccessor`	string \| function	—	—	Series identity used to connect a polygon. Defaults to colorBy.
`colorBy`	string \| function	—	—	Series color channel.
`pointRadius`	number	—	`4`	Vertex radius.
`valueExtent`	array	—	`[0, data-max]`	Fixed value-axis domain.