Pie Chart
Examples
(6)Properties
(67)Playground
Loading demo…
import
{
PieChart
}
from
'@platform-blocks/charts'
;
import
{
TRAFFIC_SOURCES
}
from
'./data'
;
export
function
Demo
(
)
{
return
(
<PieChart
title
=
"Traffic sources"
maxWidth
=
{
560
}
height
=
{
360
}
data
=
{
TRAFFIC_SOURCES
}
innerRadius
=
{
70
}
outerRadius
=
{
150
}
showLabels
=
{
true
}
labelPosition
=
"outside"
showValues
=
{
true
}
valueFormatter
=
{
(
value
)
=>
`${value}%`
}
legend
=
{
{
show
:
true
,
position
:
'right'
}
}
tooltip
=
{
{
show
:
true
,
formatter
:
(
segment
)
=>
`${segment.label}: ${segment.value}%`
,
}
}
startAngle
=
{
-
90
}
endAngle
=
{
270
}
/>
)
;
}
Loading demo…
import
{
PieChart
,
type
PieChartDataPoint
}
from
'@platform-blocks/charts'
;
import
{
BROWSER_USAGE
}
from
'./data'
;
const
formatLabel
=
(
slice
:
PieChartDataPoint
)
=>
`${slice.label} ${slice.value}%`
;
const
formatTooltip
=
(
slice
:
PieChartDataPoint
)
=>
`${slice.label}: ${slice.value}% of sessions`
;
export
function
Demo
(
)
{
return
(
<PieChart
title
=
"Browser usage share"
subtitle
=
"Active sessions"
maxWidth
=
{
520
}
height
=
{
420
}
data
=
{
BROWSER_USAGE
}
outerRadius
=
{
150
}
showLabels
labelPosition
=
"outside"
padAngle
=
{
1.5
}
labelFormatter
=
{
formatLabel
}
legend
=
{
{
show
:
true
,
position
:
'bottom'
}
}
tooltip
=
{
{
show
:
true
,
formatter
:
formatTooltip
}
}
animation
=
{
{
type
:
'spiral'
,
duration
:
900
}
}
startAngle
=
{
-
90
}
endAngle
=
{
270
}
/>
)
;
}
Loading demo…
import
{
PieChart
,
type
PieChartDataPoint
}
from
'@platform-blocks/charts'
;
import
{
BUG_TYPES
}
from
'./data'
;
const
formatLabel
=
(
slice
:
PieChartDataPoint
)
=>
`${slice.label} ${slice.value}%`
;
const
formatTooltip
=
(
slice
:
PieChartDataPoint
)
=>
`${slice.label}: ${slice.value}% of release defects`
;
export
function
Demo
(
)
{
return
(
<PieChart
title
=
"Bug type distribution"
subtitle
=
"Latest release cycle"
maxWidth
=
{
560
}
height
=
{
380
}
data
=
{
BUG_TYPES
}
innerRadius
=
{
70
}
outerRadius
=
{
150
}
showLabels
labelPosition
=
"center"
labelFormatter
=
{
formatLabel
}
padAngle
=
{
1
}
legend
=
{
{
show
:
true
,
position
:
'right'
}
}
tooltip
=
{
{
show
:
true
,
formatter
:
formatTooltip
}
}
animation
=
{
{
type
:
'bounce'
,
duration
:
800
,
stagger
:
80
}
}
startAngle
=
{
-
90
}
endAngle
=
{
270
}
/>
)
;
}
Loading demo…
import
{
PieChart
,
type
PieChartDataPoint
}
from
'@platform-blocks/charts'
;
import
{
OPERATING_EXPENSES
,
TOTAL_EXPENSE
}
from
'./data'
;
const
formatTooltip
=
(
slice
:
PieChartDataPoint
)
=>
{
const
share
=
Math
.
round
(
(
slice
.
value
/
TOTAL_EXPENSE
)
*
100
)
;
return
`${slice.label}: $${slice.value}M (${share}%)`
;
}
;
export
function
Demo
(
)
{
return
(
<PieChart
title
=
"Operating expense mix"
subtitle
=
"FY25 year-to-date"
maxWidth
=
{
520
}
height
=
{
440
}
data
=
{
OPERATING_EXPENSES
}
innerRadius
=
{
90
}
outerRadius
=
{
160
}
showLabels
labelPosition
=
"outside"
padAngle
=
{
1.5
}
labelFormatter
=
{
(
slice
)
=>
`${slice.label} · $${slice.value}M`
}
legend
=
{
{
show
:
true
,
position
:
'bottom'
}
}
tooltip
=
{
{
show
:
true
,
formatter
:
formatTooltip
}
}
startAngle
=
{
-
90
}
endAngle
=
{
270
}
/>
)
;
}
Loading demo…
import
{
PieChart
,
type
PieChartDataPoint
}
from
'@platform-blocks/charts'
;
import
{
SUPPORT_CHANNELS
,
TOTAL_INTERACTIONS
}
from
'./data'
;
const
toShare
=
(
value
:
number
)
=>
Math
.
round
(
(
value
/
TOTAL_INTERACTIONS
)
*
100
)
;
const
formatLabel
=
(
slice
:
PieChartDataPoint
)
=>
`${slice.label} ${toShare(slice.value)}%`
;
const
formatTooltip
=
(
slice
:
PieChartDataPoint
)
=>
{
const
share
=
toShare
(
slice
.
value
)
;
return
`${slice.label}: ${slice.value.toLocaleString()} interactions (${share}%)`
;
}
;
export
function
Demo
(
)
{
return
(
<PieChart
title
=
"Support contact mix"
subtitle
=
"Last 30 days"
maxWidth
=
{
580
}
height
=
{
380
}
data
=
{
SUPPORT_CHANNELS
}
innerRadius
=
{
80
}
outerRadius
=
{
150
}
showLabels
labelPosition
=
"outside"
padAngle
=
{
1
}
labelFormatter
=
{
formatLabel
}
legend
=
{
{
show
:
true
,
position
:
'right'
}
}
tooltip
=
{
{
show
:
true
,
formatter
:
formatTooltip
}
}
startAngle
=
{
-
70
}
endAngle
=
{
290
}
/>
)
;
}
Loading demo…
import
{
PieChart
,
type
PieChartDataPoint
}
from
'@platform-blocks/charts'
;
import
{
TOTAL_COMPLETIONS
,
TRAINING_COMPLETIONS
}
from
'./data'
;
const
toPercent
=
(
value
:
number
)
=>
Math
.
round
(
(
value
/
TOTAL_COMPLETIONS
)
*
100
)
;
const
formatLabel
=
(
slice
:
PieChartDataPoint
)
=>
`${slice.label} ${toPercent(slice.value)}%`
;
const
formatTooltip
=
(
slice
:
PieChartDataPoint
)
=>
{
const
share
=
toPercent
(
slice
.
value
)
;
return
`${slice.label}: ${slice.value.toLocaleString()} completions (${share}%)`
;
}
;
export
function
Demo
(
)
{
return
(
<PieChart
title
=
"Training completion share"
subtitle
=
"Annual compliance program"
maxWidth
=
{
520
}
height
=
{
440
}
data
=
{
TRAINING_COMPLETIONS
}
innerRadius
=
{
100
}
outerRadius
=
{
160
}
showLabels
labelPosition
=
"outside"
padAngle
=
{
1.2
}
labelFormatter
=
{
formatLabel
}
legend
=
{
{
show
:
true
,
position
:
'bottom'
}
}
tooltip
=
{
{
show
:
true
,
formatter
:
formatTooltip
}
}
animation
=
{
{
type
:
'wave'
,
duration
:
900
,
stagger
:
70
}
}
startAngle
=
{
-
100
}
endAngle
=
{
260
}
/>
)
;
}
</>
react-ui-library
100+ accessible, themeable components that work seamlessly across iOS, Android, and Web.
A Platform Blocks product.
Quick Links
Resources