Grouped Bar Chart
Examples
(6)Properties
(50)Playground
Loading demo…
import
{
GroupedBarChart
}
from
'@platform-blocks/charts'
;
import
{
SERIES
}
from
'./data'
;
export
function
Demo
(
)
{
return
(
<GroupedBarChart
title
=
"Product revenue by segment"
subtitle
=
"Comparison vs targets"
height
=
{
320
}
series
=
{
SERIES
}
barSpacing
=
{
0.15
}
innerBarSpacing
=
{
0.2
}
xAxis
=
{
{
show
:
true
,
title
:
'Segment'
}
}
yAxis
=
{
{
show
:
true
,
title
:
'Revenue (USD thousands)'
,
labelFormatter
:
(
value
)
=>
`$${value}`
,
}
}
grid
=
{
{
show
:
true
}
}
legend
=
{
{
show
:
true
,
position
:
'bottom'
}
}
animation
=
{
{
duration
:
450
}
}
colorOptions
=
{
{
hash
:
false
}
}
/>
)
;
}
Loading demo…
import
{
GroupedBarChart
}
from
'@platform-blocks/charts'
;
import
{
SERIES
}
from
'./data'
;
export
function
Demo
(
)
{
return
(
<GroupedBarChart
title
=
"Experiment conversion uplift by region"
subtitle
=
"Completed purchases per 100 sessions"
height
=
{
340
}
series
=
{
SERIES
}
barSpacing
=
{
0.22
}
innerBarSpacing
=
{
0.18
}
xAxis
=
{
{
show
:
true
,
title
:
'Region'
,
}
}
yAxis
=
{
{
show
:
true
,
title
:
'Conversion rate (%)'
,
labelFormatter
:
(
value
)
=>
`${value.toFixed(1)}%`
,
ticks
:
[
3
,
4
,
5
,
6
]
,
}
}
grid
=
{
{
show
:
true
}
}
legend
=
{
{
show
:
true
,
position
:
'bottom'
}
}
multiTooltip
liveTooltip
valueLabels
=
{
{
show
:
true
,
position
:
'outside'
,
formatter
:
(
{
value
}
)
=>
`${value.toFixed(1)}%`
,
color
:
'#1F1F24'
,
fontWeight
:
'600'
,
offset
:
8
,
}
}
animation
=
{
{
duration
:
420
}
}
/>
)
;
}
Loading demo…
import
{
GroupedBarChart
}
from
'@platform-blocks/charts'
;
import
{
SERIES
}
from
'./data'
;
export
function
Demo
(
)
{
return
(
<GroupedBarChart
title
=
"Feature usage by platform"
subtitle
=
"Weekly active users per capability (in thousands)"
height
=
{
360
}
series
=
{
SERIES
}
barSpacing
=
{
0.18
}
innerBarSpacing
=
{
0.16
}
xAxis
=
{
{
show
:
true
,
title
:
'Product capability'
,
}
}
yAxis
=
{
{
show
:
true
,
title
:
'Weekly active users (thousands)'
,
labelFormatter
:
(
value
)
=>
`${value}k`
,
}
}
grid
=
{
{
show
:
true
}
}
legend
=
{
{
show
:
true
,
position
:
'bottom'
}
}
valueLabels
=
{
{
show
:
true
,
position
:
'inside'
,
formatter
:
(
{
value
}
)
=>
`${value}k`
,
color
:
'rgba(255,255,255,0.96)'
,
fontWeight
:
'600'
,
minBarHeightForInside
:
24
,
}
}
animation
=
{
{
duration
:
420
}
}
/>
)
;
}
Loading demo…
import
{
GroupedBarChart
}
from
'@platform-blocks/charts'
;
import
{
SERIES
}
from
'./data'
;
export
function
Demo
(
)
{
return
(
<GroupedBarChart
title
=
"Sales pipeline by industry"
subtitle
=
"Qualified pipeline this quarter (USD millions)"
height
=
{
360
}
series
=
{
SERIES
}
barSpacing
=
{
0.2
}
innerBarSpacing
=
{
0.22
}
xAxis
=
{
{
show
:
true
,
title
:
'Industry vertical'
,
}
}
yAxis
=
{
{
show
:
true
,
title
:
'Pipeline value (USD millions)'
,
labelFormatter
:
(
value
)
=>
`$${value.toFixed(1)}M`
,
ticks
:
[
0
,
2
,
4
,
6
]
,
}
}
grid
=
{
{
show
:
true
}
}
legend
=
{
{
show
:
true
,
position
:
'bottom'
}
}
valueLabels
=
{
{
show
:
true
,
position
:
'outside'
,
formatter
:
(
{
value
}
)
=>
`$${value.toFixed(1)}M`
,
color
:
'#2F2F35'
,
fontWeight
:
'600'
,
offset
:
10
,
}
}
animation
=
{
{
duration
:
440
}
}
/>
)
;
}
Loading demo…
import
{
GroupedBarChart
}
from
'@platform-blocks/charts'
;
import
{
SERIES
}
from
'./data'
;
export
function
Demo
(
)
{
return
(
<GroupedBarChart
title
=
"Assessment results by grade level"
subtitle
=
"Spring benchmark proficiency rates"
height
=
{
360
}
series
=
{
SERIES
}
barSpacing
=
{
0.18
}
innerBarSpacing
=
{
0.18
}
xAxis
=
{
{
show
:
true
,
title
:
'Subject area'
,
}
}
yAxis
=
{
{
show
:
true
,
title
:
'Students meeting or exceeding standard (%)'
,
labelFormatter
:
(
value
)
=>
`${value}%`
,
ticks
:
[
60
,
70
,
80
,
90
,
100
]
,
}
}
grid
=
{
{
show
:
true
}
}
legend
=
{
{
show
:
true
,
position
:
'bottom'
}
}
valueLabels
=
{
{
show
:
true
,
position
:
'inside'
,
formatter
:
(
{
value
}
)
=>
`${Math.round(value)}%`
,
color
:
'rgba(255,255,255,0.94)'
,
fontWeight
:
'600'
,
minBarHeightForInside
:
20
,
}
}
animation
=
{
{
duration
:
430
}
}
/>
)
;
}
Loading demo…
import
{
GroupedBarChart
}
from
'@platform-blocks/charts'
;
import
{
SERIES
}
from
'./data'
;
export
function
Demo
(
)
{
return
(
<GroupedBarChart
title
=
"On-time delivery by logistics partner"
subtitle
=
"Share of shipments delivered within committed window"
height
=
{
360
}
series
=
{
SERIES
}
barSpacing
=
{
0.18
}
innerBarSpacing
=
{
0.16
}
xAxis
=
{
{
show
:
true
,
title
:
'Logistics partner'
,
}
}
yAxis
=
{
{
show
:
true
,
title
:
'On-time shipments (%)'
,
labelFormatter
:
(
value
)
=>
`${value}%`
,
ticks
:
[
80
,
85
,
90
,
95
,
100
]
,
}
}
grid
=
{
{
show
:
true
}
}
legend
=
{
{
show
:
true
,
position
:
'bottom'
}
}
valueLabels
=
{
{
show
:
true
,
position
:
'inside'
,
formatter
:
(
{
value
}
)
=>
`${Math.round(value)}%`
,
color
:
'rgba(255,255,255,0.95)'
,
fontWeight
:
'600'
,
minBarHeightForInside
:
22
,
}
}
animation
=
{
{
duration
:
440
}
}
/>
)
;
}
</>
react-ui-library
100+ accessible, themeable components that work seamlessly across iOS, Android, and Web.
A Platform Blocks product.
Quick Links
Resources