RadarChart

Live preview

Loading example…

Radar (spider) chart: several series over shared spokes, polygon or circular grid, translucent areas, markers and a tooltip that lists every series for the hovered or focused axis.

Import

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

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

Usage

<RadarChart
  title="Evaluación de barberos por habilidad"
  axes={skills}
  series={barbers}
  valueFormat="integer"
  levels={4}
  gridShape="polygon"
  fill
  fillOpacity={0.18}
  markers
  showValues
  startAngle={0}
  height={380}
  tooltip
  loading={false}
  animate
  labels={spanishLabels}
/>

Props

Prop	Type	Default	Description
`title` *	`string`
`description`	`string`
`axes` *	`readonly string[]`		One name per spoke (at least 3).
`series` *	`readonly ChartSeries[]`		One value per axis in each series.
`max`	`number`		Value at the outer ring. Rounded up from the data by default.
`min`	`number`	`0`	Value at the centre.
`levels`	`number`	`4`	Number of concentric grid rings.
`gridShape`	`"circle" \| "polygon"`	`"polygon"`
`fill`	`boolean`	`true`	Translucent fill under each series.
`fillOpacity`	`number`	`0.18`
`markers`	`boolean`	`true`
`showValues`	`boolean`	`true`	Ring values along the first spoke.
`startAngle`	`number`	`0`	Rotation of the first spoke, in degrees from 12 o’clock.
`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

Source

packages/ui/src/charts/radar-chart/radar-chart.tsx