Network Chart
Highlights
•
Force, coordinate, circular, or radial layouts with optional axis/grid controls.
•
nodeRadiusRange and nodeValueAccessor.•
linkWidthRange, curved or straight linkShape, palette fallbacks, and opacity/width accessors.•
onNodeFocus / onLinkFocus to drive tooltips or external panels without forking the component.Examples
(6)Properties
(59)Playground
Loading demo…
import
{
NetworkChart
}
from
'@platform-blocks/charts'
;
import
{
LINKS
,
NODES
}
from
'./data'
;
export
function
Demo
(
)
{
return
(
<NetworkChart
title
=
"Cross-team collaboration"
height
=
{
420
}
nodes
=
{
NODES
}
links
=
{
LINKS
}
/>
)
;
}
Loading demo…
import
{
NetworkChart
}
from
'@platform-blocks/charts'
;
import
{
COHORTS
,
REFERRALS
}
from
'./data'
;
const
waveToColor
=
(
wave
?:
number
)
=>
{
if
(
wave
===
1
)
return
'#34C759'
;
if
(
wave
===
2
)
return
'#4DABF7'
;
if
(
wave
===
3
)
return
'#FF922B'
;
return
'#ADB5BD'
;
}
;
const
waveToOpacity
=
(
wave
?:
number
)
=>
{
if
(
wave
===
1
)
return
0.7
;
if
(
wave
===
2
)
return
0.6
;
if
(
wave
===
3
)
return
0.55
;
return
0.45
;
}
;
export
function
Demo
(
)
{
return
(
<NetworkChart
title
=
"Customer referral influence network"
subtitle
=
"Referral pathways by activation wave"
height
=
{
430
}
nodes
=
{
COHORTS
}
links
=
{
REFERRALS
}
showLabels
nodeRadius
=
{
13
}
nodeRadiusRange
=
{
[
11
,
25
]
}
linkWidthRange
=
{
[
1
,
3.6
]
}
linkColorAccessor
=
{
(
link
)
=>
waveToColor
(
typeof link
.
meta
?
.
wave
===
'number'
?
link
.
meta
.
wave
:
Number
(
link
.
meta
?
.
wave
)
)
}
linkOpacityAccessor
=
{
(
link
)
=>
waveToOpacity
(
typeof link
.
meta
?
.
wave
===
'number'
?
link
.
meta
.
wave
:
Number
(
link
.
meta
?
.
wave
)
)
}
/>
)
;
}
Loading demo…
import
{
useState
,
useMemo
}
from
'react'
;
import
{
Text
}
from
'react-native'
;
import
{
NetworkChart
}
from
'@platform-blocks/charts'
;
import
{
MENTORSHIPS
,
TEAMS
}
from
'./data'
;
const
linkColorByType
=
(
type
:
string
|
undefined
)
=>
{
switch
(
type
)
{
case
'cross-team'
:
return
'#5F3DC4'
;
case
'program'
:
return
'#1971C2'
;
case
'rotation'
:
return
'#FFA94D'
;
case
'pairing'
:
return
'#15AABF'
;
default
:
return
'#ADB5BD'
;
}
}
;
const
linkOpacityByType
=
(
type
:
string
|
undefined
)
=>
{
switch
(
type
)
{
case
'cross-team'
:
return
0.72
;
case
'program'
:
return
0.6
;
case
'rotation'
:
return
0.55
;
case
'pairing'
:
return
0.5
;
default
:
return
0.45
;
}
}
;
export
function
Demo
(
)
{
const
[
focusDetail
,
setFocusDetail
]
=
useState
<
string
|
null
>
(
null
)
;
const
highlightText
=
useMemo
(
(
)
=>
focusDetail
,
[
focusDetail
]
)
;
return
(
<>
<NetworkChart
title
=
"Knowledge sharing mentorship graph"
subtitle
=
"Monthly mentorship hours across guild programs"
height
=
{
440
}
layout
=
"radial"
nodes
=
{
TEAMS
}
links
=
{
MENTORSHIPS
}
showLabels
nodeRadius
=
{
14
}
nodeRadiusRange
=
{
[
12
,
26
]
}
linkWidthRange
=
{
[
1.1
,
3.8
]
}
linkShape
=
"curved"
linkCurveStrength
=
{
0.38
}
linkPalette
=
{
[
'#7048E8'
,
'#4263EB'
,
'#0CA678'
,
'#F08C00'
]
}
linkColorAccessor
=
{
(
link
)
=>
linkColorByType
(
link
.
meta
?
.
type
)
}
linkOpacityAccessor
=
{
(
link
)
=>
linkOpacityByType
(
link
.
meta
?
.
type
)
}
onNodeFocus
=
{
(
event
)
=>
setFocusDetail
(
`${event.node.name ?? event.node.id} • ${Math.round(event.node.value ?? 0)} active mentorship hours`
)
}
onNodeBlur
=
{
(
)
=>
setFocusDetail
(
null
)
}
onLinkFocus
=
{
(
event
)
=>
{
const
sourceName
=
event
.
source
.
node
?
.
name
??
event
.
link
.
source
;
const
targetName
=
event
.
target
.
node
?
.
name
??
event
.
link
.
target
;
setFocusDetail
(
`${sourceName} mentoring ${targetName}`
)
;
}
}
onLinkBlur
=
{
(
)
=>
setFocusDetail
(
null
)
}
/>
{
highlightText
&&
(
<Text
style
=
{
{
marginTop
:
12
,
fontSize
:
12
,
color
:
'#495057'
}
}
>
{
highlightText
}
</Text
>
)
}
</>
)
;
}
Loading demo…
import
{
NetworkChart
}
from
'@platform-blocks/charts'
;
import
{
DEPENDENCIES
,
SERVICES
}
from
'./data'
;
const
latencyToColor
=
(
latency
:
number
)
=>
{
if
(
latency
<=
150
)
return
'#12B886'
;
if
(
latency
<=
220
)
return
'#FAB005'
;
return
'#FA5252'
;
}
;
const
latencyToOpacity
=
(
latency
:
number
)
=>
{
if
(
latency
>=
250
)
return
0.9
;
if
(
latency
>=
200
)
return
0.7
;
return
0.5
;
}
;
export
function
Demo
(
)
{
return
(
<NetworkChart
title
=
"Microservice latency map"
subtitle
=
"Edge-to-core call graph with weighted latency"
height
=
{
460
}
nodes
=
{
SERVICES
}
links
=
{
DEPENDENCIES
}
showLabels
nodeRadius
=
{
12
}
nodeRadiusRange
=
{
[
10
,
28
]
}
linkWidthRange
=
{
[
1.2
,
4.6
]
}
linkColorAccessor
=
{
(
link
)
=>
latencyToColor
(
Number
(
link
.
meta
?
.
latency
??
0
)
)
}
linkOpacityAccessor
=
{
(
link
)
=>
latencyToOpacity
(
Number
(
link
.
meta
?
.
latency
??
0
)
)
}
/>
)
;
}
Loading demo…
import
{
NetworkChart
}
from
'@platform-blocks/charts'
;
import
{
PROPAGATION
,
SYSTEMS
}
from
'./data'
;
const
severityToColor
=
(
severity
?:
string
)
=>
{
switch
(
severity
)
{
case
'critical'
:
return
'#FA5252'
;
case
'major'
:
return
'#FD7E14'
;
case
'minor'
:
return
'#FAB005'
;
default
:
return
'#ADB5BD'
;
}
}
;
const
severityToOpacity
=
(
severity
?:
string
)
=>
{
switch
(
severity
)
{
case
'critical'
:
return
0.88
;
case
'major'
:
return
0.68
;
case
'minor'
:
return
0.55
;
default
:
return
0.45
;
}
}
;
export
function
Demo
(
)
{
return
(
<NetworkChart
title
=
"Risk propagation path"
subtitle
=
"Simulated attack progression across services"
height
=
{
420
}
nodes
=
{
SYSTEMS
}
links
=
{
PROPAGATION
}
showLabels
nodeRadius
=
{
12
}
nodeRadiusRange
=
{
[
10
,
26
]
}
linkWidthRange
=
{
[
1.1
,
3.9
]
}
linkColorAccessor
=
{
(
link
)
=>
severityToColor
(
link
.
meta
?
.
severity
)
}
linkOpacityAccessor
=
{
(
link
)
=>
severityToOpacity
(
link
.
meta
?
.
severity
)
}
/>
)
;
}
Loading demo…
import
{
NetworkChart
}
from
'@platform-blocks/charts'
;
import
{
LINKS
,
NODES
}
from
'./data'
;
const
riskToColor
=
(
risk
?:
string
)
=>
{
switch
(
risk
)
{
case
'high'
:
return
'#FA5252'
;
case
'medium'
:
return
'#FCC419'
;
case
'low'
:
return
'#51CF66'
;
default
:
return
'#ADB5BD'
;
}
}
;
const
riskToOpacity
=
(
risk
?:
string
)
=>
{
switch
(
risk
)
{
case
'high'
:
return
0.85
;
case
'medium'
:
return
0.65
;
case
'low'
:
return
0.55
;
default
:
return
0.45
;
}
}
;
export
function
Demo
(
)
{
return
(
<NetworkChart
title
=
"Supply chain relationship map"
subtitle
=
"Tiered flow from suppliers to regional distribution"
height
=
{
440
}
layout
=
"coordinate"
nodes
=
{
NODES
}
links
=
{
LINKS
}
showLabels
nodeRadius
=
{
12
}
nodeRadiusRange
=
{
[
10
,
24
]
}
linkWidthRange
=
{
[
1.2
,
4.2
]
}
linkColorAccessor
=
{
(
link
)
=>
riskToColor
(
link
.
meta
?
.
risk
)
}
linkOpacityAccessor
=
{
(
link
)
=>
riskToOpacity
(
link
.
meta
?
.
risk
)
}
grid
=
{
false
}
xAxis
=
{
{
show
:
false
}
}
yAxis
=
{
{
show
:
false
}
}
/>
)
;
}
</>
react-ui-library
100+ accessible, themeable components that work seamlessly across iOS, Android, and Web.
A Platform Blocks product.
Quick Links
Resources