Radar

@nivo/radarradialsvgisomorphic
svghttp api

Generates a radar chart from an array of data. Note that margin object does not take grid labels into account, so you should adjust it to leave enough room for it.

The responsive alternative of this component is ResponsiveRadar.

This component is available in the @nivo/api, see sample or try it using the API client.

See the dedicated guide on how to setup legends for this component.

Actions Logs
Start interacting with the chart to log actions
Base
Array<object | Array>required
Chart data.
string | numberoptional
Key to use to index the data.
Array<string | number>optional
Keys to use to determine each serie.
number | stringoptionaldefault:'auto'
auto
Maximum value.
stringoptionaldefault:'linearClosed'
linearClosed
Curve interpolation.
numberrequired
Chart width.
numberrequired
Chart height.
objectoptional
px
px
px
px
Chart margin.
Style
optional
Define style for common elements such as labels, axes…
string | Function | string[]optionaldefault:{"scheme":"nivo"}
nivo
Defines how to compute slice color.
numberoptionaldefault:0.25
Shape fill opacity.
stringoptionaldefault:'normal'
multiply
Defines CSS mix-blend-mode property.
supportsvgapi
numberoptionaldefault:2
px
Shape border width.
string | object | Functionoptionaldefault:{"from":"color"}
inheritthemecustom
inherited property
color
modifiers
No modifier.
Method to compute border color.
Grid
numberoptionaldefault:5
Number of levels to display for grid
stringoptionaldefault:'circular'
circular
Determine shape of the grid.
Functionoptional
Grid label.
numberoptionaldefault:16
px
Label offset from outer radius.
Dots
booleanoptionaldefault:true
   Enable/disable dots.
Functionoptional
Overrides default dot circle.
numberoptionaldefault:6
px
Size of the dots.
string | object | Functionoptionaldefault:{"from":"color"}
inheritthemecustom
theme property
background
Method to compute dots color.
numberoptionaldefault:0
px
Width of the dots border.
string | object | Functionoptionaldefault:{"from":"color"}
inheritthemecustom
inherited property
color
modifiers
No modifier.
Method to compute dots border color.
booleanoptionaldefault:false
   Enable/disable dots label.
stringoptionaldefault:'value'
value
Dot label.
numberoptionaldefault:-12
px
Label Y offset from dot shape.
Interactivity
booleanoptionaldefault:true
   Enable/disable interactivity.
supportsvgapi
Motion
booleanoptionaldefault:true
   Enable/disable transitions.
supportsvgapi
string | objectoptional
wobbly
Motion config for react-spring, either a preset or a custom configuration.
supportsvgapi
Recipes
Formatting tooltip valueCustom label component