Ridge Chart
Examples
(6)Properties
(44)Playground
Loading demo…
import
{
RidgeChart
}
from
'@platform-blocks/charts'
;
import
{
SERIES
,
formatLatency
}
from
'./data'
;
export
function
Demo
(
)
{
return
(
<RidgeChart
title
=
"API latency distribution by endpoint"
subtitle
=
"Density of response times across rolling deployments"
height
=
{
450
}
series
=
{
SERIES
}
samples
=
{
128
}
bandwidth
=
{
16
}
bandPadding
=
{
0.24
}
amplitudeScale
=
{
0.92
}
grid
=
{
{
show
:
true
,
showMinor
:
false
}
}
xAxis
=
{
{
show
:
true
,
title
:
'Latency (ms)'
,
labelFormatter
:
(
value
)
=>
formatLatency
(
value as
number
)
,
}
}
yAxis
=
{
{
show
:
true
,
tickLength
:
6
,
}
}
/>
)
;
}
Loading demo…
import
{
RidgeChart
}
from
'@platform-blocks/charts'
;
import
{
SERIES
}
from
'./data'
;
export
function
Demo
(
)
{
return
(
<RidgeChart
title
=
"Customer satisfaction distribution"
subtitle
=
"Annual NPS density"
height
=
{
360
}
series
=
{
SERIES
}
samples
=
{
96
}
bandwidth
=
{
3
}
statsMarkers
=
{
{
enabled
:
true
,
showP90
:
true
,
showLabels
:
true
}
}
/>
)
;
}
Loading demo…
import
{
RidgeChart
}
from
'@platform-blocks/charts'
;
import
{
SERIES
,
formatThousands
}
from
'./data'
;
export
function
Demo
(
)
{
return
(
<RidgeChart
title
=
"Daily active users across feature cohorts"
subtitle
=
"Distribution of session counts over the last six months"
height
=
{
480
}
series
=
{
SERIES
}
samples
=
{
128
}
bandwidth
=
{
18
}
bandPadding
=
{
0.32
}
amplitudeScale
=
{
0.95
}
grid
=
{
{
show
:
true
,
showMinor
:
false
}
}
xAxis
=
{
{
show
:
true
,
title
:
'Daily active users'
,
labelFormatter
:
(
value
)
=>
formatThousands
.
format
(
Math
.
round
(
value as
number
)
)
,
tickLength
:
6
,
}
}
yAxis
=
{
{
show
:
true
,
tickLength
:
6
,
}
}
/>
)
;
}
Loading demo…
import
{
RidgeChart
}
from
'@platform-blocks/charts'
;
import
{
SERIES
}
from
'./data'
;
export
function
Demo
(
)
{
return
(
<RidgeChart
title
=
"Employee satisfaction score distribution"
subtitle
=
"Quarterly pulse survey responses by team"
height
=
{
420
}
series
=
{
SERIES
}
samples
=
{
110
}
bandwidth
=
{
0.35
}
bandPadding
=
{
0.3
}
amplitudeScale
=
{
0.85
}
grid
=
{
{
show
:
true
,
showMinor
:
false
}
}
xAxis
=
{
{
show
:
true
,
title
:
'Satisfaction score (1-5)'
,
labelFormatter
:
(
value
)
=>
(
value as
number
)
.
toFixed
(
1
)
,
tickLength
:
6
,
}
}
yAxis
=
{
{
show
:
true
,
tickLength
:
6
,
}
}
/>
)
;
}
Loading demo…
import
{
RidgeChart
}
from
'@platform-blocks/charts'
;
import
{
SERIES
,
currencyFormatter
}
from
'./data'
;
export
function
Demo
(
)
{
return
(
<RidgeChart
title
=
"Revenue per transaction by product line"
subtitle
=
"Transaction value distributions across seasonal cycles"
height
=
{
440
}
series
=
{
SERIES
}
samples
=
{
128
}
bandwidth
=
{
14
}
bandPadding
=
{
0.28
}
amplitudeScale
=
{
0.9
}
grid
=
{
{
show
:
true
,
showMinor
:
false
}
}
xAxis
=
{
{
show
:
true
,
title
:
'Revenue per transaction'
,
labelFormatter
:
(
value
)
=>
currencyFormatter
.
format
(
value as
number
)
,
}
}
yAxis
=
{
{
show
:
true
,
tickLength
:
6
,
}
}
/>
)
;
}
Loading demo…
import
{
RidgeChart
}
from
'@platform-blocks/charts'
;
import
{
SERIES
,
formatDays
}
from
'./data'
;
export
function
Demo
(
)
{
return
(
<RidgeChart
title
=
"Shipping time distribution by carrier"
subtitle
=
"Parcel delivery performance across recent quarters"
height
=
{
420
}
series
=
{
SERIES
}
samples
=
{
110
}
bandwidth
=
{
0.45
}
bandPadding
=
{
0.3
}
amplitudeScale
=
{
0.9
}
grid
=
{
{
show
:
true
,
showMinor
:
false
}
}
xAxis
=
{
{
show
:
true
,
title
:
'Delivery time (days)'
,
labelFormatter
:
(
value
)
=>
formatDays
(
value as
number
)
,
tickLength
:
6
,
}
}
yAxis
=
{
{
show
:
true
,
tickLength
:
6
,
}
}
/>
)
;
}
</>
react-ui-library
100+ accessible, themeable components that work seamlessly across iOS, Android, and Web.
A Platform Blocks product.
Quick Links
Resources