Bar Chart
Examples
(6)Properties
(59)Playground
Loading demo…
import
{
BarChart
}
from
'@platform-blocks/charts'
;
import
{
QUARTERLY_REVENUE
}
from
'./data'
;
export
function
Demo
(
)
{
return
(
<BarChart
title
=
"Quarterly revenue"
subtitle
=
"North America"
height
=
{
260
}
data
=
{
QUARTERLY_REVENUE
}
barSpacing
=
{
0.25
}
barBorderRadius
=
{
6
}
valueFormatter
=
{
(
value
)
=>
`$${(value / 1000).toFixed(0)}k`
}
xAxis
=
{
{
show
:
true
}
}
yAxis
=
{
{
show
:
true
,
labelFormatter
:
(
value
)
=>
`$${(value / 1000).toFixed(0)}k`
,
}
}
grid
=
{
{
show
:
true
,
style
:
'dotted'
}
}
tooltip
=
{
{
show
:
true
,
formatter
:
(
point
)
=>
`${point.category}: $${point.value.toLocaleString()}`
,
}
}
enableCrosshair
liveTooltip
/>
)
;
}
Loading demo…
import
{
BarChart
}
from
'@platform-blocks/charts'
;
import
{
FEATURE_ADOPTION
}
from
'./data'
;
const
formatAccounts
=
(
value
:
number
)
=>
`${value.toLocaleString()} accounts`
;
export
function
Demo
(
)
{
return
(
<BarChart
title
=
"Feature adoption by customer tier"
subtitle
=
"Accounts live on the experimentation canvas within 45 days"
height
=
{
400
}
data
=
{
FEATURE_ADOPTION
}
barSpacing
=
{
0.26
}
barBorderRadius
=
{
12
}
legend
=
{
{
show
:
false
}
}
valueFormatter
=
{
(
value
,
datum
)
=>
{
const
segmentTotal
=
datum
.
data
?
.
accounts
??
value
;
const
rate
=
datum
.
data
?
.
adoptionRate
??
value
/
segmentTotal
;
const
percentage
=
`${Math.round((rate ?? 0) * 100)}% adoption`
;
return
`${formatAccounts(value)} (${percentage})`
;
}
}
valueLabel
=
{
{
position
:
'inside'
,
color
:
'#ffffff'
,
fontSize
:
13
,
fontWeight
:
'600'
,
formatter
:
(
value
)
=>
value
.
toLocaleString
(
)
,
}
}
yAxis
=
{
{
show
:
true
,
title
:
'Activated accounts'
,
titleFontSize
:
12
,
labelFormatter
:
(
value
)
=>
value
.
toLocaleString
(
)
,
}
}
xAxis
=
{
{
show
:
true
}
}
grid
=
{
{
show
:
true
}
}
tooltip
=
{
{
formatter
:
(
datum
)
=>
{
const
accounts
=
datum
.
data
?
.
accounts
??
datum
.
value
;
const
adoptionRate
=
datum
.
data
?
.
adoptionRate
??
datum
.
value
/
accounts
;
return
[
datum
.
category
,
`Activated: ${formatAccounts(datum.value)}`
,
`Account base: ${accounts.toLocaleString()}`
,
`Adoption rate: ${(adoptionRate * 100).toFixed(1)}%`
,
]
.
join
(
'\n'
)
;
}
,
}
}
/>
)
;
}
Loading demo…
import
{
BarChart
}
from
'@platform-blocks/charts'
;
import
{
CAMPAIGN_SPEND
,
TOTAL_SPEND
}
from
'./data'
;
const
formatSpend
=
(
value
:
number
)
=>
`$${value.toLocaleString()}k`
;
export
function
Demo
(
)
{
return
(
<BarChart
title
=
"Marketing spend by channel"
subtitle
=
"Multi-touch journey campaign mix"
height
=
{
420
}
data
=
{
CAMPAIGN_SPEND
}
barSpacing
=
{
0.28
}
legend
=
{
{
show
:
false
}
}
valueFormatter
=
{
(
value
)
=>
`${formatSpend(value)} invested`
}
valueLabel
=
{
{
color
:
'#1f2937'
,
fontSize
:
12
,
offset
:
12
,
formatter
:
(
value
)
=>
{
const
share
=
TOTAL_SPEND
?
(
value
/
TOTAL_SPEND
)
*
100
:
0
;
return
`${share.toFixed(1)}% of spend`
;
}
,
}
}
yAxis
=
{
{
show
:
true
,
title
:
'Investment (USD thousands)'
,
titleFontSize
:
12
,
labelFormatter
:
(
value
)
=>
`$${value.toFixed(0)}k`
,
}
}
xAxis
=
{
{
show
:
true
}
}
grid
=
{
{
show
:
true
}
}
tooltip
=
{
{
formatter
:
(
datum
)
=>
{
const
share
=
TOTAL_SPEND
?
(
datum
.
value
/
TOTAL_SPEND
)
*
100
:
0
;
return
[
datum
.
category
,
`Spend: ${formatSpend(datum.value)}`
,
`Share: ${share.toFixed(1)}% of program`
,
datum
.
data
?
.
objective
?
`Objective: ${datum.data.objective}`
:
undefined
,
]
.
filter
(
Boolean
)
.
join
(
'\n'
)
;
}
,
}
}
/>
)
;
}
Loading demo…
import
{
BarChart
}
from
'@platform-blocks/charts'
;
import
{
RECRUITING_PROGRESS
}
from
'./data'
;
const
formatDelta
=
(
value
:
number
,
datum
:
(
typeof RECRUITING_PROGRESS
)
[
number
]
)
=>
{
const
previous
=
datum
.
data
?
.
previous
??
0
;
const
delta
=
value
-
previous
;
if
(
delta
===
0
)
return
'No change vs last cycle'
;
const
sign
=
delta
>
0
?
'+'
:
'-'
;
return
`${sign}${Math.abs(delta)} vs last cycle`
;
}
;
export
function
Demo
(
)
{
return
(
<BarChart
title
=
"New hires secured this recruiting cycle"
subtitle
=
"Compared with winter intake"
height
=
{
440
}
orientation
=
"horizontal"
data
=
{
RECRUITING_PROGRESS
}
barSpacing
=
{
0.25
}
legend
=
{
{
show
:
false
}
}
valueFormatter
=
{
(
value
)
=>
`${value} hires`
}
valueLabel
=
{
{
formatter
:
(
value
,
datum
)
=>
formatDelta
(
value
,
datum
as
(
typeof RECRUITING_PROGRESS
)
[
number
]
)
,
color
:
'#1f2937'
,
fontSize
:
12
,
offset
:
10
,
}
}
xAxis
=
{
{
title
:
'Hires confirmed'
,
labelFormatter
:
(
value
)
=>
`${Math.round(value)}`
,
}
}
yAxis
=
{
{
show
:
true
}
}
grid
=
{
{
show
:
true
}
}
tooltip
=
{
{
formatter
:
(
datum
)
=>
{
const
previous
=
datum
.
data
?
.
previous
??
0
;
const
delta
=
datum
.
value
-
previous
;
const
direction
=
delta
>=
0
?
'+'
:
'-'
;
return
[
`${datum.category}`
,
`This cycle: ${datum.value} hires`
,
`Last cycle: ${previous} hires`
,
`Delta: ${direction}${Math.abs(delta)}`
,
datum
.
data
?
.
priority
?
`Focus: ${datum.data.priority}`
:
undefined
,
datum
.
data
?
.
openRoles
!=
null
?
`Open roles: ${datum.data.openRoles}`
:
undefined
,
]
.
filter
(
Boolean
)
.
join
(
'\n'
)
;
}
,
}
}
/>
)
;
}
Loading demo…
import
{
BarChart
}
from
'@platform-blocks/charts'
;
import
{
REGIONAL_REVENUE
}
from
'./data'
;
const
formatMillions
=
(
value
:
number
)
=>
`$${value.toFixed(2)}M`
;
const
formatVariance
=
(
value
:
number
,
datum
:
(
typeof REGIONAL_REVENUE
)
[
number
]
)
=>
{
const
goal
=
datum
.
data
?
.
goal
??
0
;
const
diff
=
value
-
goal
;
const
direction
=
diff
>=
0
?
'+'
:
'-'
;
return
`${direction}$${Math.abs(diff).toFixed(2)}M vs goal`
;
}
;
export
function
Demo
(
)
{
return
(
<BarChart
title
=
"Quarterly Revenue by Region"
subtitle
=
"Q3 actuals with variance to plan"
height
=
{
420
}
data
=
{
REGIONAL_REVENUE
}
barSpacing
=
{
0.32
}
legend
=
{
{
show
:
false
}
}
valueFormatter
=
{
(
value
,
datum
)
=>
{
const
goal
=
datum
.
data
?
.
goal
;
return
goal
!=
null
?
`${formatMillions(value)} actual (goal ${formatMillions(goal)})`
:
formatMillions
(
value
)
;
}
}
valueLabel
=
{
{
formatter
:
(
value
,
datum
)
=>
formatVariance
(
value
,
datum
as
(
typeof REGIONAL_REVENUE
)
[
number
]
)
,
color
:
'#1f2937'
,
fontSize
:
12
,
fontWeight
:
'600'
,
offset
:
12
,
}
}
yAxis
=
{
{
show
:
true
,
title
:
'Revenue (USD millions)'
,
titleFontSize
:
12
,
labelFormatter
:
(
value
)
=>
`$${value.toFixed(1)}M`
,
}
}
xAxis
=
{
{
show
:
true
}
}
grid
=
{
{
show
:
true
}
}
tooltip
=
{
{
formatter
:
(
datum
)
=>
{
const
goal
=
datum
.
data
?
.
goal
??
0
;
const
diff
=
datum
.
value
-
goal
;
const
pct
=
goal
?
(
diff
/
goal
)
*
100
:
0
;
const
direction
=
diff
>=
0
?
'+'
:
'-'
;
const
varianceValue
=
`${direction}${formatMillions(Math.abs(diff))}`
;
const
variancePct
=
`${direction}${Math.abs(pct).toFixed(1)}%`
;
return
[
`${datum.category}`
,
`Actual: ${formatMillions(datum.value)}`
,
`Goal: ${formatMillions(goal)}`
,
`Variance: ${varianceValue} (${variancePct})`
,
datum
.
data
?
.
focus
?
`Focus: ${datum.data.focus}`
:
undefined
,
]
.
filter
(
Boolean
)
.
join
(
'\n'
)
;
}
,
}
}
/>
)
;
}
Loading demo…
import
{
BarChart
}
from
'@platform-blocks/charts'
;
import
{
SLA_COMPLIANCE
}
from
'./data'
;
const
formatPercent
=
(
value
:
number
)
=>
`${value.toFixed(1)}%`
;
export
function
Demo
(
)
{
return
(
<BarChart
title
=
"SLA compliance by response team"
subtitle
=
"Rolling 12-month attainment"
height
=
{
420
}
orientation
=
"horizontal"
data
=
{
SLA_COMPLIANCE
}
barSpacing
=
{
0.3
}
legend
=
{
{
show
:
false
}
}
valueFormatter
=
{
(
value
)
=>
`${formatPercent(value)} SLA met`
}
valueLabel
=
{
{
color
:
'#111827'
,
fontSize
:
12
,
offset
:
12
,
formatter
:
(
value
)
=>
formatPercent
(
value
)
,
}
}
xAxis
=
{
{
title
:
'Tickets meeting SLA target'
,
labelFormatter
:
(
value
)
=>
`${Math.round(value)}%`
,
}
}
yAxis
=
{
{
show
:
true
}
}
grid
=
{
{
show
:
true
}
}
tooltip
=
{
{
formatter
:
(
datum
)
=>
{
const
last
=
datum
.
data
?
.
lastQuarter
??
datum
.
value
;
const
delta
=
datum
.
value
-
last
;
const
direction
=
delta
>=
0
?
'+'
:
'-'
;
return
[
datum
.
category
,
`Current: ${formatPercent(datum.value)}`
,
`Last quarter: ${formatPercent(last)}`
,
`Change: ${direction}${Math.abs(delta).toFixed(1)} pts`
,
]
.
join
(
'\n'
)
;
}
,
}
}
/>
)
;
}
</>
react-ui-library
100+ accessible, themeable components that work seamlessly across iOS, Android, and Web.
A Platform Blocks product.
Quick Links
Resources