Radar Chart
Examples
(8)Properties
(45)Playground
Loading demo…
import
{
RadarChart
}
from
'@platform-blocks/charts'
;
import
{
SERIES
}
from
'./data'
;
export
function
Demo
(
)
{
return
(
<RadarChart
title
=
"Engineering guild comparison"
subtitle
=
"Quarterly capability radar"
maxWidth
=
{
700
}
height
=
{
440
}
series
=
{
SERIES
}
maxValue
=
{
100
}
radialGrid
=
{
{
rings
:
5
,
shape
:
'polygon'
,
showAxes
:
true
}
}
enableCrosshair
multiTooltip
liveTooltip
legend
=
{
{
show
:
true
,
position
:
'right'
,
align
:
'start'
}
}
tooltip
=
{
{
show
:
true
,
formatter
:
(
point
)
=>
`${point.axis}: ${Math.round(point.value)}%`
,
}
}
/>
)
;
}
Loading demo…
import
{
RadarChart
}
from
'@platform-blocks/charts'
;
import
{
SERIES
}
from
'./data'
;
export
function
Demo
(
)
{
return
(
<RadarChart
title
=
"Product health radar"
subtitle
=
"Operational score vs. strategic goal"
maxWidth
=
{
580
}
height
=
{
440
}
series
=
{
SERIES
}
maxValue
=
{
10
}
radialGrid
=
{
{
rings
:
4
,
shape
:
'circle'
,
showAxes
:
false
}
}
enableCrosshair
legend
=
{
{
show
:
true
,
position
:
'bottom'
,
align
:
'center'
}
}
tooltip
=
{
{
show
:
true
,
formatter
:
(
point
)
=>
`${point.axis}: ${point.value.toFixed(1)} / 10`
,
}
}
/>
)
;
}
Loading demo…
import
{
RadarChart
}
from
'@platform-blocks/charts'
;
import
{
SERIES
}
from
'./data'
;
export
function
Demo
(
)
{
return
(
<RadarChart
title
=
"Team capability radar"
maxWidth
=
{
560
}
height
=
{
380
}
series
=
{
SERIES
}
maxValue
=
{
60
}
radialGrid
=
{
{
rings
:
5
,
shape
:
'polygon'
,
showAxes
:
true
}
}
smooth
fill
enableCrosshair
multiTooltip
liveTooltip
legend
=
{
{
show
:
true
,
position
:
'bottom'
}
}
tooltip
=
{
{
show
:
true
,
formatter
:
(
point
)
=>
`${point.axis}: ${point.value}`
,
}
}
/>
)
;
}
Loading demo…
import
{
RadarChart
}
from
'@platform-blocks/charts'
;
import
{
SERIES
}
from
'./data'
;
export
function
Demo
(
)
{
return
(
<RadarChart
title
=
"Data platform maturity"
subtitle
=
"Governance and enablement dimensions"
maxWidth
=
{
620
}
height
=
{
480
}
series
=
{
SERIES
}
maxValue
=
{
5
}
fill
enableCrosshair
multiTooltip
legend
=
{
{
show
:
true
,
position
:
'bottom'
,
align
:
'center'
}
}
radialGrid
=
{
{
rings
:
5
,
shape
:
'polygon'
,
axisLabelPlacement
:
'outside'
,
axisLabelOffset
:
24
,
ringLabels
:
[
'Ad hoc'
,
'Emerging'
,
'Defined'
,
'Managed'
,
'Optimized'
,
]
,
ringLabelPosition
:
'outside'
,
ringLabelOffset
:
16
,
}
}
tooltip
=
{
{
show
:
true
,
formatter
:
(
point
)
=>
`${point.label ?? point.axis}: ${point.value.toFixed(1)} / 5`
,
}
}
/>
)
;
}
Loading demo…
import
{
RadarChart
}
from
'@platform-blocks/charts'
;
import
{
SERIES
}
from
'./data'
;
export
function
Demo
(
)
{
return
(
<RadarChart
title
=
"Engineering readiness radar"
subtitle
=
"Security, reliability, scalability, performance, maintainability"
maxWidth
=
{
600
}
height
=
{
440
}
series
=
{
SERIES
}
maxValue
=
{
5
}
fill
enableCrosshair
legend
=
{
{
show
:
true
,
position
:
'bottom'
}
}
radialGrid
=
{
{
rings
:
5
,
shape
:
'circle'
,
showAxes
:
true
,
axisLabelPlacement
:
'outside'
,
ringLabels
:
[
'Reactive'
,
'Developing'
,
'Consistent'
,
'Resilient'
,
'Elite'
,
]
,
ringLabelPosition
:
'inside'
,
ringLabelOffset
:
18
,
}
}
tooltip
=
{
{
show
:
true
,
formatter
:
(
point
)
=>
`${point.axis}: ${point.value.toFixed(1)} readiness`
,
}
}
/>
)
;
}
Loading demo…
import
{
RadarChart
}
from
'@platform-blocks/charts'
;
import
{
SERIES
}
from
'./data'
;
export
function
Demo
(
)
{
return
(
<RadarChart
title
=
"Market perception signal"
subtitle
=
"Customer interview scorecard"
maxWidth
=
{
700
}
height
=
{
460
}
series
=
{
SERIES
}
maxValue
=
{
5
}
fill
enableCrosshair
multiTooltip
legend
=
{
{
show
:
true
,
position
:
'right'
,
align
:
'center'
}
}
radialGrid
=
{
{
rings
:
5
,
shape
:
'polygon'
,
axisLabelPlacement
:
'outside'
,
axisLabelOffset
:
18
,
ringLabels
:
(
{
index
}
)
=>
[
'Poor'
,
'Fair'
,
'Good'
,
'Great'
,
'Exceptional'
]
[
index
]
,
}
}
tooltip
=
{
{
show
:
true
,
formatter
:
(
point
)
=>
`${point.label ?? point.axis}: ${point.value.toFixed(1)} / 5`
,
}
}
/>
)
;
}
Loading demo…
import
{
RadarChart
}
from
'@platform-blocks/charts'
;
import
{
SERIES
}
from
'./data'
;
export
function
Demo
(
)
{
return
(
<RadarChart
title
=
"Product capability vs. competition"
subtitle
=
"Benchmarking core differentiators"
maxWidth
=
{
620
}
height
=
{
460
}
series
=
{
SERIES
}
maxValue
=
{
10
}
fill
enableCrosshair
legend
=
{
{
show
:
true
,
position
:
'bottom'
,
align
:
'center'
}
}
radialGrid
=
{
{
rings
:
5
,
shape
:
'polygon'
,
showAxes
:
true
,
axisLabelPlacement
:
'outside'
,
axisLabelOffset
:
20
,
ringLabels
:
[
'Baseline'
,
'Market ready'
,
'Parity'
,
'Differentiated'
,
'Category leader'
,
]
,
}
}
tooltip
=
{
{
show
:
true
,
formatter
:
(
point
)
=>
`${point.label ?? point.axis}: ${point.value.toFixed(1)} / 10`
,
}
}
/>
)
;
}
Loading demo…
import
{
RadarChart
}
from
'@platform-blocks/charts'
;
import
{
SERIES
}
from
'./data'
;
export
function
Demo
(
)
{
return
(
<RadarChart
title
=
"Role family skills gap analysis"
subtitle
=
"Percent attainment against competency targets"
maxWidth
=
{
720
}
height
=
{
480
}
series
=
{
SERIES
}
maxValue
=
{
100
}
fill
enableCrosshair
multiTooltip
legend
=
{
{
show
:
true
,
position
:
'right'
,
align
:
'start'
}
}
radialGrid
=
{
{
rings
:
4
,
shape
:
'polygon'
,
axisLabelPlacement
:
'outside'
,
axisLabelOffset
:
24
,
ringLabels
:
(
{
value
}
)
=>
`${Math.round(value)} pts`
,
}
}
tooltip
=
{
{
show
:
true
,
formatter
:
(
point
)
=>
`${point.label ?? point.axis}: ${Math.round(point.value)} / 100`
,
}
}
/>
)
;
}
</>
react-ui-library
100+ accessible, themeable components that work seamlessly across iOS, Android, and Web.
A Platform Blocks product.
Quick Links
Resources