Radial Bar Chart

Circular bar segments representing values radially.

Source

View source code

LLM docs

LLM documentation

Package

@platform-blocks/charts

Examples

⁽³⁾

Properties

⁽⁵²⁾

Playground

Concentric rings compare progress across several metrics, with tip labels and a center average.

Loading demo…

import
 
{
 
RadialBarChart
 
}
 
from
 
'@platform-blocks/charts'
;
 
import
 
{
 
AVG
,
 
METRICS
 
}
 
from
 
'./data'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<RadialBarChart
      
title
=
"Quarterly KPIs"
      
subtitle
=
"Progress toward goals"
      
maxWidth
=
{
400
}
      
height
=
{
400
}
      
data
=
{
METRICS
}
      
barThickness
=
{
18
}
      
gap
=
{
12
}
      showValueLabels
      
valueFormatter
=
{
(
value
)
 
=>
 
`${value}%`
}
      
centerLabel
=
{
`${AVG}%`
}
      
centerSubLabel
=
"Avg score"
      multiTooltip
      liveTooltip
      
legend
=
{
{
 show
:
 
true
,
 position
:
 
'bottom'
 
}
}
    
/>
  
)
;
}

A single thick ring with a center readout — ideal for one headline metric.

Loading demo…

import
 
{
 
RadialBarChart
 
}
 
from
 
'@platform-blocks/charts'
;
 
import
 
{
 
GOAL
 
}
 
from
 
'./data'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<RadialBarChart
      
title
=
"Fundraising Goal"
      
subtitle
=
"$74k raised of $100k"
      
maxWidth
=
{
300
}
      
height
=
{
300
}
      
data
=
{
GOAL
}
      
barThickness
=
{
24
}
      
showValueLabels
=
{
false
}
      
centerLabel
=
"74%"
      
centerSubLabel
=
"of goal"
      multiTooltip
      liveTooltip
    
/>
  
)
;
}

Set startAngle/endAngle to a 180° sweep for a speedometer-style gauge that fills the space.

Loading demo…

import
 
{
 
RadialBarChart
 
}
 
from
 
'@platform-blocks/charts'
;
 
import
 
{
 
SCORE
 
}
 
from
 
'./data'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<RadialBarChart
      
title
=
"Customer Satisfaction"
      
subtitle
=
"Rolling 30-day CSAT"
      
maxWidth
=
{
340
}
      
height
=
{
240
}
      
startAngle
=
{
-
90
}
      
endAngle
=
{
90
}
      
data
=
{
SCORE
}
      
barThickness
=
{
24
}
      
showValueLabels
=
{
false
}
      
centerLabel
=
"82"
      
centerSubLabel
=
"out of 100"
      multiTooltip
      liveTooltip
    
/>
  
)
;
}

Scan to open this page on your phonereact-ui-library.com/components/RadialBarChart

</>

react-ui-library

100+ accessible, themeable components that work seamlessly across iOS, Android, and Web.

A Platform Blocks product.

Quick Links

Components Charts Hooks

Docs

Getting Started Localization llms.txt

Resources

FAQ Changelog Accessibility Sitemap